<table>
Definición: Inserta una tabla de tamaño variable que contiene las siguientes filas, columnas, encabezado / filas, pie de página / k, fila de cuerpo / k y resumen.
Cada fila y columna también puede constar de cero celdas o más.
Apariencia: se requieren etiquetas iniciales y finales.
Atributos:%attrs, summary, width, border, frame, rules, cellspacing, cellpadding.
summary: resumen del contenido y estructura de la tabla (para los motores de búsqueda).
width: ancho total de la tabla en píxeles (px) o porcentaje (%).
frame: especifica que partes se van a ver de la tabla
· Void (sin valor predeterminado)
· above, bellow, lhs, rhs (solo arriba, sólo abajo, izquierda sola, derecha solamente)
· box (todos los lados)
- rules: Determina qué celdas deben dividirse entre líneas de distribución.
· none (sin valor predeterminado)
groups (sólo entre grupos de filas o de columnas)
· rows, cols (sólo filas, sólo columnas)
· all (todos)
- border: indica el ancho del borde de la tabla en el px.
- cellspacing: Especifica el espacio entre celdas.
- cellpadding: Especifica el espaciado entre un borde de una celda y su contenido.
Contenido de la tabla: <tr>, <td>, <th>, <thead>, <tfoot>, <tbody>, <colgroup>, <col> y <caption>.
<tr>
Definición: Se utiliza para crear una fila dentro de una tabla.
Apariencia: la etiqueta final es opcional.
Atributos:% attrs, align, valign, char, charoff y (bgcolor no permitido).
<td> <th>
Definición: Crea una celda dentro de una fila (<th> celda de encabezado).
Apariencia: la etiqueta final es opcional.
Atributos:% attrs, abbr, axis, headers, scope, rowspan, colspan, align, valign, char, charoff, (bgcolor, nowrap, width, height disapproved)
- align: indica la alineación del texto (izquierda, derecha, centro, justificar, char).
- valign: representa la posición vertical de los datos (top, middle, bottom, baseline).
- char: indica que un carácter particular en el texto actúa como un eje de alineación.
- charoff: indica la distancia entre el carácter de alineación y el borde.
- abbr: indica brevemente el contenido de una celda.
- axis: indica la categoría correspondiente a la celda.
- headers: indica las celdas del encabezado a través de una lista.
- scope: indica las celdas de encabezado a través de row, col, rowgroup y colgroup.
- rowspan: indica el número de filas que contiene la celda (combinar filas).
- colspan: indica el número de columnas que contiene la celda (combinar columnas).
<thead>, <tfoot>, <tbody>
Definición: Las filas se agrupan en un encabezado, pie de página o cuerpo.
Cada fila debe tener al menos una fila definida por <tr>.
Están disponibles para uso en tablas largas que toman varias páginas; El navegador puede repetir el encabezado y el pie de página en cada página, por lo que es más fácil de leer.
Apariencia: la etiqueta final es opcional.
Atributos: Tienen los mismos atributos de <tr>.
<colgroup>
Definición: Se utiliza para crear una serie de columnas.
Apariencia: la etiqueta final es opcional.
Atributos:% attrs, span, width, align, valign, char y charoff.
- span: especifica el número de columnas en el clasificador (sólo en el caso, 1).
- width: especifica el ancho predeterminado para cada columna en el origen.
<col>
Definición: Es una combinación de atributos.
Apariencia: sin etiqueta de fin (V).
Atributos:% attrs, span, width, align, valign, char y charoff.
Ejemplo:
<table border="3" cellspacing="0" cellpadding="0" width="230">
<tr> <td colspan="3" height="10"></td> </tr>
<tr>
<td> </td>
<td width="10" height="44"> </td>
<td width="210" align="center">
<p>
<span><strong>Mens Sana in Corpore Sano</strong></span>
</p>
</td>
<td width="10"> </td>
</tr>
<tr> <td colspan="3" height="10"></td> </tr>
</table>
Ejercicio14:
Construir una tabla de tamaño 2x2 y dar las siguientes características: cellpadding = 10px, cellspacing = 20px, borde de la tabla, color de fondo para las tablas, las celdas de color. Llena las celdas con texto.
Ejemplo:
<table border="3" cellspacing="0" cellpadding="5" width="390">
<tr>
<th width="10">Cod</th><th width="80">Nombre</th>
<th width="300">Significado</th>
</tr>
<tr><td>1</td><td>SGML</td><td>Standard Generalized Markup Language</td> </tr>
<tr><td>2</td><td>HTML</td><td>HyperText Markup Language</td></tr>
<tr><td>3</td><td>XML</td><td>Extended Markup Language</td>
</tr>
</table>
<caption>
Definición: trabaja para un título de la tabla; aparece sobre la tapa.
Apariencia: se requieren etiquetas iniciales y finales.
Atributos:% attrs (alineado condenado).
Diseño de 3 columnas (diseño)
Una tabla XHTML (<table>) es un conjunto de celdas (<td> o <th>) organizadas en filas (<tr>) que a su vez se organizan en grupos de filas (<thead>, <tbody> o <tfoot>). Además, la tabla puede tener una leyenda (<caption>) y hacer referencia a las columnas (<col /> y<colspan>).
La leyenda y los grupos de filas se muestran en este orden:
Titulo de tabla
Titulo (<caption>)
Cabecera de tabla (<thead>)
Cuerpo de tabla (<tbody>)
Pie de tabla (<tfoot>)
...
Columna
Columa
...
...
Columna
Columna
Linea (<tr>)
Ejemplo con cuerpo de tabla ( <tbody>) :
<table border="1"> <caption>Ejemplo de tabla</caption> <tbody> <tr> <td></td> <th>A</th> <th>B</th> </tr> <tr> <th>1</th> <td>A1</td> <td>B1</td> </tr> <tr> <th>2</th> <td>A2</td> <td>B2</td> </tr> </tbody></table>El cuerpo de tabla (<tbody>) es obligatorio y puede haber tantos como se quiera.
Tanto a cabecera de la tabla (<thead>) como el pie de tabla (<tfoot>) son opcionales y sólo puede haber uno de cada por tabla. En el código fuente, la etiqueta <tfoot> se encuentra situada antes del primer <tbody>, aunque los navegadores la muestran al final de la tabla.
<table border="1"> <caption>Ejemplo de tabla</caption> <thead> <tr> <th>thead</th> <td>celda 1</td> <td>celda 2</td> </tr> </thead> <tfoot> <tr> <th>tfoot</th> <td>celda 1</td> <td>celda 2</td> </tr> </tfoot> <tbody> <tr> <th>tbody</th> <td>celda 1</td> <td>celda 2</td> </tr> </tbody></table>Al imprimir una tabla que ocupa varias páginas, Firefox repite al principio y al final de cada página las cabeceras <thead> y pies de tabla <tfoot>, mientras que Internet Explorer y Chrome sólo las incluyen al principio y al final de la tabla. Se puede comprobar, por ejemplo, con la página de explicación sobre colores CSS, en la que la tabla de colores X11/SVG no cabe en una sola página. En la vista preliminar de Firefox se puede ver cómo la cabecera<thead> de esta tabla se coloca al principio de cada página, mientras que en la vista preliminar de Internet Explorer o Chrome la cabecera sólo se coloca al principio de la tabla.
Cada fila de la tabla está marcada con la etiqueta <tr> (fila de tabla).
Cada celda de la tabla está marcada con la etiqueta <td> (celda de datos), aunque también se pueden marcar con la etiqueta <th> (celda de cabecera). Las celdas <th> están pensadas para utilizarse en las celdas que sirven de cabecera para la fila o columna, por lo que los navegadores las muestran resaltadas (normalmente, en negrita y centradas en horizontal), aunque se pueden utilizar en cualquier celda.
<table border="1"> <caption>Fútbol 1º división</caption> <tbody> <tr> <td></td> <th>2003/2004</th> <th>2004/2005</th> </tr> <tr> <th>Campeón</th> <td>Valencia C.F.</td> <td>F.C. Barcelona</td> </tr> <tr> <th>Subcampeón</th> <td>F.C. Barcelona</td> <td>R. Madrid</td> </tr> </tbody></table>Aunque las celdas de una tabla (<td> y <th>) estén organizadas en filas (<tr>) y grupos de filas (<tbody>, <thead> y <tfoot>), también existen dos etiquetas que permiten hacer referencia a las columnas de una tabla: las etiquetas <col /> (columna) y <colgroup> (grupo de columnas).
La etiqueta <col /> permite hacer referencia a una columna y la etiqueta <colgroup> permite definir grupos de columnas (de manera similar a como la etiqueta <tbody> define grupos de filas).
Las etiquetas <col /> y <colgroup> se encuentran situadas al principio de la tabla, después de la etiqueta <caption>.
El ejemplo siguiente muestra la situación de las estiquetas <col /> y <colgroup> en una tabla.
<table border="1" > <caption>Leyenda</caption> <colgroup><col /><col /></colgroup><colgroup><col /></colgroup> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody></table>Cada etiqueta <col /> corresponde a una columna, en el mismo orden (la primera etiqueta<col /> corresponde a la primera columna, y así sucesivamente). En el ejemplo anterior, hay definidas dos grupos de columnas, el primero de los cuales abarca dos columnas y el segundo una columna.
Puede haber menos etiquetas <col /> que columnas en la tabla (también puede haber más, pero serían innecesarias).
En una tabla puede haber únicamente etiquetas <col /> (es decir, puede no haber etiquetas<colgroup />), pero si hay una etiqueta <colgroup /> ya no puede haber etiquetas <col />que no estén dentro de una etiqueta <colgroup>.
Ejercicio15: