HTML Tables

Tabla

Podemos definir una tabla a partir de la etiqueta HTML table.

<table></table>

Dentro definiremos el titulo de la tabla, sus filas, columnas, etc.

Filas

Las etiquetas HTML <tr> definen las filas de la tabla.

<tr></tr>

Encierra las columnas

que contendrá la fila.

Columnas

Las etiquetas HTML <td> definen cada una de las columnas de una fila dada.

<td></td>

En definitiva definen celdas que en su totalidad pueden ser interpretadas como las columnas de nuestra tabla.

Ejemplo

<table>
    <tr>
        <td>Nombre</td>
        <td>Apellido</td>
    </tr>
    <tr>
        <td>Neri</td>
        <td>Güidi</td>
    </tr>
</table>

Cabecera

Las etiquetas HTML <th> definen las cabeceras de nuestra tabla.

<th></th>

Una cabecera es una celda interpretada como cabecera.

Ejemplo

<table>
    <tr>
        <th>Nombre</th>
        <th>Apellido</th>
    </tr>
    <tr>
        <td>Neri</td>
        <td>Güidi</td>
    </tr>
</table>

Titulo

La etiqueta HTML <caption> define el titulo de nuestra tabla.

<caption></caption>

Solo puede existir un titulo por pagina, y su definición debe ser inmediatamente después de la creación del table.

Ejemplo

<table>
    <caption>Tutor</caption>
    <tr>
        <th>Nombre</th>
        <th>Apellido</th>
    </tr>
    <tr>
        <td>Neri</td>
        <td>Güidi</td>
    </tr>
</table>

Atributos de los <td> y <th>

Los únicos atributos validos en HTML5 que pueden ser aplicados a los <td> y <th> son

Encabezado, Cuerpo y Pie

Existen tres etiquetas HTML que me permiten dividir una tabla en el Encabezado, el Cuerpo y el Pie de la Tabla

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

Una tabla puede contener un solo Encabezado y Pie, pero puede tener muchos Cuerpos

Grupos de Columnas

Existen dos etiquetas HTML que me permiten gestionar mis columnas.

<colgroup>
    <col span="numero">
</colgroup>

Deben ser definidas después del <caption> y antes de cualquier <thead>,<tbody> o <tfoot>.