23. Tablas en HTML

Una tabla en HTML consta de celdas de tabla dentro de filas y columnas.

Ejm

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th> 
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td> 
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td> 
    <td>Mexico</td>
  </tr>
</table>

Celdas de la tabla

Cada celda de la tabla está definida con la etiqueta <td></td>.

Ejm

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td> 
    <td>Linus</td>
  </tr>
</table>

Filas de la tabla

Cada fila de la tabla comienza con <tr> y finaliza con </tr>.

Ejm

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td> 
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td> 
    <td>10</td>
  </tr>
</table>

Puedes tener tantas filas como desees en una tabla, solo asegúrate de que la cantidad de celdas sea la misma en cada fila.

Encabezados de tabla

A veces deseas que tus celdas sean encabezados, en esos casos usa la etiqueta <th> en lugar de la etiqueta <td>.

Ejm

<table>
  <tr>
    <th>Persona 1</th>
    <th>Persona 2</th> 
    <th>Persona 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td> 
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td> 
    <td>10</td>
  </tr>
</table>

De manera predeterminada, el texto en los elementos <th> está en negrita y centrado, pero puede cambiar eso con CSS.

Etiquetas HTML usadas para tablas

TagDescrip
<table>Define una tabla
<th>Define una celda de encabezado en una tabla
<tr>Define una fila en una tabla
<td>Define una celda en una tabla
<caption>Define un título de tabla
<colgroup>Especifica un grupo de una o más columnas en una tabla para formatear
<col>Especifica propiedades de columna para cada columna dentro de un elemento <colgroup>
<thead>Agrupa el contenido del encabezado en una tabla
<tbody>Agrupa el contenido del cuerpo en una tabla.
<tfoot>Agrupa el contenido del pie de página en una tabla
Scroll al inicio