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 |