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
Tag |
Descrip |
<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 |