Tablas HTML

Etiquetas de Tablas

<tr>

Se emplea para definir cada fila de las tablas de datos.

<td>

Se emplea para definir cada una de las celdas que forman las filas de una tabla, es decir, las columnas de la tabla.

<th>

Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla.

<caption>

Se emplea para definir la leyenda o título de una tabla.

Estructura Básica

<table>
  <caption></caption>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Estructura Completa

<table>
  <caption></caption>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Conceptos Importantes

Relaciones en la Tabla

Las tablas describen una relación entre cada celda de datos.

La información que transmite la tabla debe ser la misma, si el usuario tiene activado o no el formato visual.

Combinar Celdas

Para combinar celdas se utilizan los atributos:

• rowspan - Combina filas
• colspan - Combina columnas

<td colspan="3">Contenido que ocupa 3 columnas</td>
<td rowspan="2">Contenido que ocupa 2 filas</td>

Estilos para Tablas

CSS Básico

table, th, td {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
}

border-collapse

• collapse - Colapsa los bordes de la tabla
• separate - Los bordes se separan (valor por defecto)

Selectores Útiles para Tablas

/* Elemento par o impar */
tr:nth-child(2n) { ... }
tr:nth-child(odd) { ... }

/* Elemento adyacente */
td:hover { ... }