Tablas HTML
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 de tabla 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>
Celdas de tabla
Cada celda de la tabla está definida por una
<td>y una </td>etiqueta.
td
significa datos de tabla.
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>
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 tabla
Cada fila de la tabla comienza con una
<tr>y termina con una </tr>etiqueta.
tr
significa fila de mesa.
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>
Puede tener tantas filas como desee en una tabla, solo asegúrese 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 eso en un capítulo posterior.
Encabezados de tabla
A veces desea que sus celdas sean encabezados, en esos casos use la
<th>etiqueta 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>
De forma predeterminada, el texto de los <th>elementos está en negrita y centrado, pero puedes cambiar eso con CSS.
Ejercicios HTML
Etiquetas de tabla HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .