Tutorial HTML: Tablas (table, tr, td, th)

Dentro de las múltiples etiquetas que componen HTML, existen algunas que son específicas para la creación de tablas. Estas incluyen principalmente: <table>, <tr>, <td>, y <th>. A continuación, se explica cada una de estas etiquetas en detalle:

• <table>: Esta es la etiqueta que se utiliza para crear una tabla en HTML. Todo el contenido de la tabla se encuentra entre las etiquetas de apertura <table> y cierre </table>.

• <tr>: Esta etiqueta se usa para definir una fila en la tabla. Cada fila de la tabla se marca con la etiqueta de apertura <tr> y la etiqueta de cierre </tr>.

• <td>: Dentro de cada fila, se pueden definir las celdas de la tabla utilizando la etiqueta <td>. td viene de "table data". Cada celda se encierra entre la etiqueta de apertura <td> y la etiqueta de cierre </td>.

• <th>: Esta etiqueta es similar a <td>, pero se utiliza para definir las celdas de encabezado en la tabla. th viene de "table header". Las celdas de encabezado a menudo se utilizan para describir la naturaleza del contenido en las columnas debajo de ellas.

Aquí hay un ejemplo básico de una tabla en HTML:

<table>
    <tr>
        <th>Nombre</th>
        <th>Apellido</th>
    </tr>
    <tr>
        <td>Juan</td>
        <td>Pérez</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td>González</td>
    </tr>
</table>

En este ejemplo, hay una tabla con dos columnas: "Nombre" y "Apellido". La primera fila usa la etiqueta <th> para marcar los encabezados de las columnas. Luego, hay dos filas adicionales que utilizan la etiqueta <td> para indicar los datos en cada columna. La primera fila de datos es "Juan" y "Pérez", y la segunda fila de datos es "Maria" y "González".

Cabe mencionar que las tablas en HTML también pueden tener varias secciones como <thead>, <tbody>, y <tfoot> que representan el encabezado de la tabla, el cuerpo de la tabla y el pie de la tabla respectivamente. Sin embargo, estas secciones no son obligatorias y dependen de las necesidades específicas de la tabla. Por ejemplo, si se desea una tabla con encabezado y pie de tabla, se podría hacer de la siguiente manera:

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellido</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Juan</td>
            <td>Pérez</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>González</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total de personas: 2</td>
        </tr>
    </tfoot>
</table>

En este ejemplo, la tabla está dividida en tres partes: <thead>, <tbody>, y <tfoot>. <thead> contiene los encabezados de las columnas, <tbody> contiene las filas de datos y <tfoot> contiene el pie de la tabla, en este caso, un conteo de las personas en la tabla. La propiedad colspan que se usa en el <td> dentro de <tfoot> indica que esa celda debe abarcar dos columnas.

Recuerde siempre que las tablas en HTML deben usarse para datos tabulares, y no para estructurar el diseño de la página. Para ello, es preferible usar CSS.