SlideShare une entreprise Scribd logo
1  sur  12
   El estándar CSS 2.1 define dos modelos diferentes para el
    tratamiento de los bordes de las celdas. La propiedad que
    permite seleccionar el modelo de bordes es border-
    collapse:
   .normal {
   width: 250px;
   border: 1px solid #000;
   border-collapse: collapse;
   }
   .normal th, .normal td {
   border: 1px solid #000;
   }
   <table class="normal" summary="Tabla genérica">
   <tr>
   <th scope="col">A</th>
   <th scope="col">B</th>
   <th scope="col">C</th>
   <th scope="col">D</th>
   <th scope="col">E</th>
   </tr>
   ...
   </table>
   Si se opta por el modelo separate (que es el
    modelo por defecto si no se indica lo contrario)
    se puede utilizar la propiedad border-spacing
    para controlar la separación entre los bordes de
    cada celda.
   CSS define otras propiedades específicas para el
    control del aspecto de las tablas. Una de ellas es
    el tratamiento que reciben las celdas vacías de
    una tabla, que se controla mediante la propiedad
    empty-cells. Esta propiedad sólo se aplica
    cuando el modelo de bordes de la tabla es de
    tipo separate.
   Ejemplo
   El título de las tablas se establece mediante el
    elemento <caption>, que por defecto se muestra
    encima de los contenidos de la tabla. La
    propiedad caption-side permite controlar la
    posición del título de la tabla.
   ejemplo sencillo de uso de la propiedad caption-
    side:

.especial {
caption-side: bottom;
}
<table class="especial" summary="Tabla
   genérica">
<caption>Tabla 2.- Título especial</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
...
</table>
   Una pequeña mejora es que el color de las
    filas varíe cuando el usuario pasa el ratón por
    encima de cada fila. La pseudo-clase :hover
    permite añadir fácilmente esta característica:

table tr:hover {
background: #FFFF66;
}
capitulo 10 Tablas

Contenu connexe

Tendances (20)

Supresión de tablas
Supresión de tablasSupresión de tablas
Supresión de tablas
 
Carpeta y blog
Carpeta y blogCarpeta y blog
Carpeta y blog
 
Comandos mysql
Comandos mysqlComandos mysql
Comandos mysql
 
Sql comandos
Sql comandosSql comandos
Sql comandos
 
Tablas y tipos de datos
Tablas y tipos de datosTablas y tipos de datos
Tablas y tipos de datos
 
Colocar un fondo en una pagina web
Colocar un fondo en una pagina webColocar un fondo en una pagina web
Colocar un fondo en una pagina web
 
Vistas
VistasVistas
Vistas
 
Visualizacion de datos de varias tablas en sql
Visualizacion de datos de varias tablas en sqlVisualizacion de datos de varias tablas en sql
Visualizacion de datos de varias tablas en sql
 
Seleccion de datos
Seleccion de datosSeleccion de datos
Seleccion de datos
 
SQL
SQLSQL
SQL
 
Cursores
CursoresCursores
Cursores
 
10 tablas
10  tablas10  tablas
10 tablas
 
Vistas
VistasVistas
Vistas
 
Sesión02 - Creación de objetos (Oracle)
Sesión02 - Creación de objetos (Oracle)Sesión02 - Creación de objetos (Oracle)
Sesión02 - Creación de objetos (Oracle)
 
Sql Sentencias
Sql Sentencias Sql Sentencias
Sql Sentencias
 
Vistas MySql
Vistas MySqlVistas MySql
Vistas MySql
 
Tablas en html
Tablas en htmlTablas en html
Tablas en html
 
Sentencias Select
Sentencias SelectSentencias Select
Sentencias Select
 
Presentacion
PresentacionPresentacion
Presentacion
 
Ejemplo ddl dml
Ejemplo ddl dmlEjemplo ddl dml
Ejemplo ddl dml
 

En vedette

Manual tenaris casing_tubing
Manual tenaris casing_tubingManual tenaris casing_tubing
Manual tenaris casing_tubingjean523
 
A cidade medieval
A cidade medievalA cidade medieval
A cidade medievalaggcoruxo
 
Christmas in Madrid
Christmas in MadridChristmas in Madrid
Christmas in Madridnavarroadri
 
salud-able
salud-ablesalud-able
salud-ablecdli
 
Trabajo de navidad, 10ºI
Trabajo de navidad, 10ºITrabajo de navidad, 10ºI
Trabajo de navidad, 10ºIClaudia_San
 
Act. 19 jrcg
Act. 19 jrcgAct. 19 jrcg
Act. 19 jrcgchable250
 
Material didactivo 3er avance
Material didactivo 3er avanceMaterial didactivo 3er avance
Material didactivo 3er avancejose mendez
 
La receta china para solucionar todos nuestros problemas
La receta china para solucionar todos nuestros   problemasLa receta china para solucionar todos nuestros   problemas
La receta china para solucionar todos nuestros problemasLuz Elida
 
A-Plan 2009 Projektmanagement einfach und guenstig
A-Plan 2009 Projektmanagement einfach und guenstigA-Plan 2009 Projektmanagement einfach und guenstig
A-Plan 2009 Projektmanagement einfach und guenstigbraintool
 
Presentación de tecnologia
Presentación de tecnologiaPresentación de tecnologia
Presentación de tecnologiaalbamancebo
 
Don juan tenório
Don juan tenórioDon juan tenório
Don juan tenóriodlemosf
 
Apoyo de padres y apoderados al movimiento estudiantil
Apoyo de padres y apoderados al movimiento estudiantilApoyo de padres y apoderados al movimiento estudiantil
Apoyo de padres y apoderados al movimiento estudiantilLicentiare
 

En vedette (20)

Manual tenaris casing_tubing
Manual tenaris casing_tubingManual tenaris casing_tubing
Manual tenaris casing_tubing
 
SERIELL. TEDxKÖLN presentation
SERIELL. TEDxKÖLN presentationSERIELL. TEDxKÖLN presentation
SERIELL. TEDxKÖLN presentation
 
Pensamiento modificado
Pensamiento modificadoPensamiento modificado
Pensamiento modificado
 
A cidade medieval
A cidade medievalA cidade medieval
A cidade medieval
 
Christmas in Madrid
Christmas in MadridChristmas in Madrid
Christmas in Madrid
 
Santo grial (Juanmi)
Santo grial (Juanmi)Santo grial (Juanmi)
Santo grial (Juanmi)
 
salud-able
salud-ablesalud-able
salud-able
 
Trabajo de navidad, 10ºI
Trabajo de navidad, 10ºITrabajo de navidad, 10ºI
Trabajo de navidad, 10ºI
 
Act. 19 jrcg
Act. 19 jrcgAct. 19 jrcg
Act. 19 jrcg
 
Examen de computacion
Examen de computacionExamen de computacion
Examen de computacion
 
Google docs
Google docsGoogle docs
Google docs
 
Material didactivo 3er avance
Material didactivo 3er avanceMaterial didactivo 3er avance
Material didactivo 3er avance
 
La receta china para solucionar todos nuestros problemas
La receta china para solucionar todos nuestros   problemasLa receta china para solucionar todos nuestros   problemas
La receta china para solucionar todos nuestros problemas
 
Proyecto final de ept
Proyecto final de eptProyecto final de ept
Proyecto final de ept
 
A-Plan 2009 Projektmanagement einfach und guenstig
A-Plan 2009 Projektmanagement einfach und guenstigA-Plan 2009 Projektmanagement einfach und guenstig
A-Plan 2009 Projektmanagement einfach und guenstig
 
Venus
VenusVenus
Venus
 
Presentación de tecnologia
Presentación de tecnologiaPresentación de tecnologia
Presentación de tecnologia
 
Don juan tenório
Don juan tenórioDon juan tenório
Don juan tenório
 
Zukunft | Konsum | Marketing
Zukunft | Konsum | MarketingZukunft | Konsum | Marketing
Zukunft | Konsum | Marketing
 
Apoyo de padres y apoderados al movimiento estudiantil
Apoyo de padres y apoderados al movimiento estudiantilApoyo de padres y apoderados al movimiento estudiantil
Apoyo de padres y apoderados al movimiento estudiantil
 

Similaire à capitulo 10 Tablas

Similaire à capitulo 10 Tablas (20)

Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
Tablas en HTML
Tablas en HTMLTablas en HTML
Tablas en HTML
 
Olivarko
OlivarkoOlivarko
Olivarko
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Unidad #3
Unidad #3Unidad #3
Unidad #3
 
Unidad #3
Unidad #3Unidad #3
Unidad #3
 
Vinculos tablas y frames
Vinculos tablas y framesVinculos tablas y frames
Vinculos tablas y frames
 
Indes.html
Indes.htmlIndes.html
Indes.html
 
Colegio nicolas esguerraa
Colegio nicolas esguerraaColegio nicolas esguerraa
Colegio nicolas esguerraa
 
Colegio nicolas esguerra
Colegio nicolas esguerraColegio nicolas esguerra
Colegio nicolas esguerra
 
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyvaInf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
 
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyvaInf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
 
Tabla imagen hipervinculo
Tabla imagen hipervinculoTabla imagen hipervinculo
Tabla imagen hipervinculo
 
Comandos mysql
Comandos mysqlComandos mysql
Comandos mysql
 
comandos-mysql.pdf
comandos-mysql.pdfcomandos-mysql.pdf
comandos-mysql.pdf
 
Comandos en consola de mysql desde el portal
Comandos en consola de mysql desde el portalComandos en consola de mysql desde el portal
Comandos en consola de mysql desde el portal
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 

capitulo 10 Tablas

  • 1.
  • 2. El estándar CSS 2.1 define dos modelos diferentes para el tratamiento de los bordes de las celdas. La propiedad que permite seleccionar el modelo de bordes es border- collapse:
  • 3.
  • 4. .normal {  width: 250px;  border: 1px solid #000;  border-collapse: collapse;  }  .normal th, .normal td {  border: 1px solid #000;  }  <table class="normal" summary="Tabla genérica">  <tr>  <th scope="col">A</th>  <th scope="col">B</th>  <th scope="col">C</th>  <th scope="col">D</th>  <th scope="col">E</th>  </tr>  ...  </table>
  • 5. Si se opta por el modelo separate (que es el modelo por defecto si no se indica lo contrario) se puede utilizar la propiedad border-spacing para controlar la separación entre los bordes de cada celda.
  • 6. CSS define otras propiedades específicas para el control del aspecto de las tablas. Una de ellas es el tratamiento que reciben las celdas vacías de una tabla, que se controla mediante la propiedad empty-cells. Esta propiedad sólo se aplica cuando el modelo de bordes de la tabla es de tipo separate.
  • 7. Ejemplo
  • 8. El título de las tablas se establece mediante el elemento <caption>, que por defecto se muestra encima de los contenidos de la tabla. La propiedad caption-side permite controlar la posición del título de la tabla.
  • 9. ejemplo sencillo de uso de la propiedad caption- side: .especial { caption-side: bottom; } <table class="especial" summary="Tabla genérica"> <caption>Tabla 2.- Título especial</caption> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> ... </table>
  • 10.
  • 11. Una pequeña mejora es que el color de las filas varíe cuando el usuario pasa el ratón por encima de cada fila. La pseudo-clase :hover permite añadir fácilmente esta característica: table tr:hover { background: #FFFF66; }