HTML Tablas
Las tablas HTML permiten a los desarrolladores web organizar los datos en filas y columnas.
Ejemplo
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Definir una tabla HTML
Una tabla en HTML consta de celdas dentro de filas y columnas.
Ejemplo
Una tabla HTML simple:
<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>
Inténtalo tú mismo »
Celdas de tabla
Cada celda de la tabla está definida por una etiqueta <td> y </td>.
td significa datos de tabla (table data).
Todo lo que está entre <td> y </td> es el contenido de la celda de la tabla.
Ejemplo
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Inténtalo tú mismo »
Nota: los elementos de datos de la tabla son los contenedores de datos de la tabla.
Pueden contener todo tipo de elementos HTML; texto, imágenes, listas, otras tablas, etc.
Filas de la tabla
Cada fila de la tabla comienza con una etiqueta <tr> y termina con una etiqueta </tr>.
tr significa fila de tablas (table row).
Ejemplo
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Inténtalo tú mismo »
Puedes tener tantas filas como quieras en una tabla, solo asegúrate de que la cantidad de celdas sea la misma en cada fila.
Nota: Hay ocasiones en las que una fila puede tener menos o más celdas que otra. Aprenderá sobre esto en un capítulo posterior.
Encabezados de tabla
A veces quieres que tus celdas sean encabezados, en esos casos usa la etiqueta <th> en lugar de la <td> etiqueta:
Ejemplo
Deje que la primera fila sean encabezados de tabla:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 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>
Inténtalo tú mismo »
De forma predeterminada, el texto de los elementos <th> está en negrita y centrado, pero puedes cambiarlo con CSS.
HTML Ejercicios
Etiquetas de tabla HTML
| Etiqueta | Descripción |
|---|---|
| <table> | Define una tabla |
| <th> | Definir una celda de encabezado en una tabla |
| <tr> | Define una fila en una tabla |
| <td> | Define una celda en una tabla |
| <caption> | Definir un título de tabla |
| <colgroup> | Especificar un grupo de una o más columnas en una tabla para formatear |
| <col> | Especificar 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 |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
