6. Tablas

<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).

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).

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>.

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)

Formato de tabla (<table>)

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

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>

Leyenda (<caption>)

Cuerpos de tabla (<tbody>), encabezados (<thead>) y pies (<tfoot>)

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.

Filas (<tr>)

Cada fila de la tabla está marcada con la etiqueta <tr> (fila de tabla).

Celdas de datos (<td>) y celdas de cabecera (<th>)

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>

Columnas (<col />) y grupos de columnas (<colgroup>)

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:

Page updated

Report abuse