Tablas, filas, columnas y celdas HTML

Tablas HTML se puede utilizar para organizar el contenido en una página web. En el pasado, el uso de tablas era la única forma práctica de lograr un diseño de página personalizado. En el desarrollo de páginas web de hoy en día, tiene alternativas como usar elementos div y CSS.

Sin embargo, muchos desarrolladores web todavía prefieren usar tablas para personalizar el diseño de sus paginas. Las tablas pueden parecer difíciles al principio, pero después de trabajar con este tutorial y algo de práctica, se familiarizará rápidamente con ellas.

El elemento de la mesa

Una tabla se divide en filas (<tr> elemento), y cada fila se divide en celdas (<td> elemento). El <td> El elemento se utiliza para almacenar «datos de tabla».

A <td> elemento puede contener texto y otros elementos HTML como enlaces, imágenes e incluso otras tablas. Aquí hay un ejemplo de una tabla básica.

<table>
    <tr>
        <td>Cell 1A</td>
        <td>Cell 1B</td>
    </tr>
    <tr>
        <td>Cell 2A</td>
        <td>Cell 2B</td>
    </tr>
</table>

Los encabezados de tabla se pueden utilizar si desea especificar que un fila en la tabla debe ser tratado como un encabezamiento. La información de encabezado en una tabla se define con el <th> elemento.

Se aplican navegadores modernos formato diferente a los elementos de su encabezado. Alternativamente, puede usar CSS para aplicar su propia configuración personalizada.

<table>
    <tr>
        <th>Col A</th>
        <th>Col B</th>
    </tr>
    <tr>
        <td>Cell 1A</td>
        <td>Cell 1B</td>
    </tr>
    <tr>
        <td>Cell 2A</td>
        <td>Cell 2B</td>
    </tr>
</table>

Extender filas y celdas

Tal como lo haría con un documento de hoja de cálculo, habrá instancias en las que necesitará abarcar varias filas o celdas.

Puede hacerlo utilizando el rowspan y colspan atributos en el <td> elemento. Aquí hay un ejemplo.

<table>
    <tr>
        <th>Col A</th>
        <th>Col B</th>
        <th>Col C</th>
    </tr>
    <tr>
        <td rowspan="2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan="3">Row 3 Cell 1</td>
    </tr>
</table>

Relleno y espaciado

Puedes usar el cellpadding y cellspacing atributos para ajustar el espacio en blanco en sus tablas. Aunque usar CSS es el privilegiado método.

El espaciado afectará la distancia. entre las celdasmientras que el relleno afecta la distancia entre los bordes de la celda y el contenido dentro de la celda.

<table border="1" cellpadding="10" cellspacing="10">
    <tr>
        <td>Cell 1A</td>
        <td>Cell 1B</td>
    </tr>
    <tr>
        <td>Cell 2A</td>
        <td>Cell 2B</td>
    </tr>
</table>

Pies de tabla

El <caption> El elemento define un título de tabla. Este elemento debe ser insertado inmediatamente después del inicio <table> etiqueta. Puedes especificar sólo uno título por tabla. De forma predeterminada, el título de la tabla se alineará al centro sobre una tabla.

Sin embargo, puedes usar las propiedades CSS text-align y caption-side se puede utilizar para alinear y colocar el título. Los títulos de las tablas son compatibles con todos los navegadores modernos. Aquí hay un ejemplo.

<table>
    <caption>Table #1</caption>
    <tr>
        <td>Cell 1A</td>
        <td>Cell 1B</td>
    </tr>
    <tr>
        <td>Cell 2A</td>
        <td>Cell 2B</td>
    </tr>
</table>

Agrupar columnas juntas

El <colgroup> y <col> Los elementos se pueden utilizar para columnas de grupo en una tabla para formatear. Esto es útil cuando necesita formatear una o más columnas en lugar de aplicar un estilo para cada celda en cada fila. Aquí hay un ejemplo.

<table>
    <colgroup style="background-color:yellow;"></colgroup>
    <colgroup span="2" style="background-color:green;"></colgroup>
    <tr>
        <td>Cell 1A</td> 
        <td>Cell 1B</td> 
        <td>Cell 1C</td>
    </tr>
    <tr> 
        <td>Cell 2A</td> 
        <td>Cell 2B</td> 
        <td>Cell 2C</td>
    </tr>
</table> 

<table>
    <colgroup>
        <col style="background-color:yellow;" />
        <col span="2" style="background-color:green;"/>
    </colgroup>
    <tr>
        <td>Cell 1A</td>
        <td>Cell 1B</td>
        <td>Cell 1C</td>
    </tr>
    <tr>
        <td>Cell 2A</td>
        <td>Cell 2B</td>
        <td>Cell 2C</td>
    </tr>
</table>

Encabezados, cuerpo y pie de tabla

El <thead>, <tbody>y <tfoot> Los elementos se pueden utilizar para agrupar filas dentro de una tabla, al igual que el colgroup y col elementos. Estos elementos establecen un encabezamiento, cuerpoy pie de página sección de su tabla.

Los navegadores pueden usar estos elementos para tratar cada una de estas secciones independientemente. El uso de estos elementos también es muy útil al formatear filas. Aquí hay un ejemplo de su uso.

<table>
    <thead style="color:red;background-color:yellow;">
        <tr>  
            <td>Product</td>
            <td>Cost</td>
        </tr>
    </thead>
    <tbody style="color:blue;">
        <tr>
            <td>Book</td>
            <td>$20.00</td>
        </tr>
        <tr>
            <td>Magazine</td>
            <td>$5.00</td>
        </tr>
    </tbody>
    <tfoot style="color:green;">
        <tr>
            <td>Total</td>
            <td>$25.00</td>
        </tr>
    </tfoot>
</table> 

Las tablas parecen ser Un poco complicado en comparación con otros elementos HTML. Sin embargo, todavía están muy útil cuando necesite mostrar datos de manera organizada.