Contenidos

    alt

    Una tabla HTML es una forma sencilla de organizar la información que aparece en un código HTML, basándonos en la ubicación de filas y columnas. 

    Una tabla básica dispone de tres elementos claramente diferenciados:

    • <table>, el contenedor principal
    • <tr>, el representante de las filas que contienen las celdas
    • <td>, el representante de las celdas. 

    Estos tres conceptos básicos de HTML son los que nos permiten organizar una tabla en HTML. 

    Siguiendo con las enseñanzas de HTML, hoy vamos a aprender cómo crear tablas en HTML con algunos ejemplos prácticos. Las tablas HTML permiten organizar datos como texto, imágenes, enlaces, otras tablas, etc. en filas y columnas de celdas. ¿Estás preparado para aprender? Pues sigue leyendo.

    ¿Qué es una tabla de HTML?

    A grandes rasgos, una tabla de HTML es una manera sencilla de ordenar etiquetas, para que la visión de datos en HTML resulte más sencilla. 

    En las tablas sencillas se comienza con la etiqueta <table>, de esta forma definimos la tabla. Una tabla de dos filas por dos columnas sería el ejemplo clásico de una tabla sencilla, sin embargo, lo común es trabajar con tablas más complejas. 

    El atributo <colspan> nos permite integrar varias tablas en una sola. Mediante este sistema podemos trabajar con complejas tablas de datos, pero visualizándolas de una manera sencilla y eficaz.  

    Lo que buscamos mediante este tipo de tablas es conseguir una visión más clara e inmediata acerca de un código más o menos complejo. 

    Tipos de tablas

    Existen tipos de tablas en HTML muy diferentes, pero los módulos básicos son los siguientes:

    • Tabla básica: Se considera una tabla básica a la compuesta por dos filas y dos columnas, o bien tres filas y dos columnas. 
    • Tablas expandidas: Las tablas expandidas incluyen ítems aislados que ocupan dos filas. 
    • Tablas con cabeceras: En estas tablas se incluye un título en cada columna. Los títulos también pueden ser laterales si los ubicamos en cada fila. 
    • Cabeceras múltiples: Estas tablas incluyen diferentes ítems expandidos, además de cabeceras.  

    En realidad existen muchos tipos de tablas diferentes, pero la gran mayoría se pueden encuadrar en estos 4 tipos básicos.  

    Cómo hacer una tabla en HTML paso a paso

    Como decíamos, las tablas se definen con la etiqueta <table>.

     

    Las tablas se dividen en filas de la tabla con la etiqueta <tr>.

     

    Las tablas se dividen en filas con la etiqueta <td>.

     

    Por ejemplo, esta es una tabla con dos filas y dos columnas (En todos los ejemplos pongo primero el código y luego cómo se vería en la web):

     

    <table>

     

    <tr>

     

    <td>Fila 1, Columna 1</td>

     

    <td> Fila 1, Columna 2</td>

     

    </tr>

     

    <tr>

     

    <td>Fila 2, Columna 1</td>

     

    <td>Fila 2, Columna 2</td>

     

    </tr>

     

    </table>

     

    Fila 1, Columna 1                Fila 1, Columna 2

    Fila 2, Columna 1               Fila 2, Columna 2

     

    Puesta así como está en el ejemplo anterior la tabla tiene estructura de tabla, pero no tiene bordes, por lo que su visualización puede ser algo complicada. Para poner borde hay que añadir el atributo border en la etiqueta table. La primera fila de la tabla puede convertirse en el encabezado de la tabla con la etiqueta <th>. Veamos un ejemplo de esto con una tabla sencilla donde aparezcan los ganadores de una carrera:

     

    <table border=»1″>

     

    <tr>

     

    <th>Puesto</th>

     

    <th>Corredor</th>

     

    </tr>

     

    <tr>

     

    <td>Usain Bolt</td>

     

    <td>1</td>

     

    </tr>

     

    <tr>

     

    <td>Chema Martinez</td>

     

    <td>2</td>

     

    </tr>

     

    <tr>

     

    <td>Shabbir Hussein</td>

     

    <td>3</td>

     

    </tr>

     

    </table>

     

    Corredor                     Puesto

    Usain Bolt                       1

    Chema Martínez          2

    Shabbir Hussein          3

     

    Bien, ya tienes una tabla con bordes. El border=1 significa que el borde mide un solo píxel.

     

    Otros atributos interesantes son colspan (para combinar dos o más columnas en una sola) y rowspan (para combinar dos o más filas en una sola).

     

    <table border=»1″>

     

    <tr>

     

    <th>Columna 1</th>

     

    <th>Columna 2</th>

     

    <th>Columna 3</th>

     

    </tr>

     

    <tr><td rowspan=»2″>Fila 1 Celda 1</td><td>Fila 1 Celda 2</td><td>Fila 1 Celda 3</td></tr>

     

    <tr><td>Fila 2 Celda 2</td><td>Fila 2 Celda 3</td></tr>

     

    <tr><td colspan=»3″>Fila 3 Celda 1</td></tr>

     

    </table>

     

    Columna 1              Columna 2             Columna 3

    Fila 1 Celda 1         Fila 1 Celda 2        Fila 1 Celda 3

    Fila 2 Celda 1        Fila 2 Celda 2

    Fila 3 Celda 1

     

    Puede establecer una anchura y altura de la tabla usando los atributos width y height respectivamente. Puedes especificar la anchura o altura de la tabla en píxeles o en términos de porcentaje de área de pantalla disponible.

     

    Ejemplos:

     

    <table border=»1″ width=»400″ height=»150″>

     

    <table border=»1″ width=»100%» height=»50%»>

     

    Celdas y encabezados

    Este tipo de celda se usa para organizar y categorizar otras celdas. Es el elemento <th> el que se ubica en la primera fila de la tabla, encima de las celdas comunes. 

    Atributos en una tabla en HTML

    Los atributos son valores adicionales que configuran los elementos de diversas formas.

    Títulos

    El título aporta jerarquía y legibilidad. Algunas tablas no necesitan de la inclusión de títulos, pero la mayoría de las veces los titles son muy útiles. 

    Unificación de celdas

    Se trata de combinar o unir dos o más celdas anexas en una sola tabla. los atributos colspan y rowspan son los que hacen posible unir filas y columnas respectivamente. 

    Agrupación de filas

    HTML propone tres soluciones diferentes para llevar a cabo la unión de filas.

    • <thead> para filas que disponen de un encabezado.
    • <tfoot> para filas con pie o resumen.
    • <tbody> para bloques completos de filas que queremos unir en un solo cuerpo de datos. 

    Agrupación de columnas en una tabla en HTML

    El elemento colgroup es el que nos permite agrupar columnas para que tengan un único significado semántico. 

    !Haz una práctica!

    En cualquier caso, lo mejor que puedes hacer es practicar. Con nuestra guía para hacer una tabla de HTML podrás disponer de toda la información que necesitas para agrupar y ordenar tus líneas de HTML.

     

    Te deSEO un buen día

     

    William Penguin.  

    Artículos Relacionados
    SEO Responsive 12/06/2019 SEO Responsive, una condición básica para posicionarse en Google

    El SEO Responsive es una de las condiciones básicas para el posicionamiento en Google. En el post anterior analizábamos...

    desactivar gutenberg 12/12/2018 Cómo desactivar Gutenberg y volver al antiguo editor de WordPress

    Poca gente sabe que fui de las primeras personas en ir al trabajo en patinete eléctrico. También me saqué...

    gutenberg wordpress 11/12/2018 Gutenberg WordPress: Así es el nuevo editor del CMS más popular

    Este fin de semana ha sido movidito, y es que de golpe y porrazo han llegado dos de los...

    poner un hipervinculo en html 24/10/2018 Cómo crear hipervínculos en HTML para poner links a otras páginas

    Llamados links o hipervínculos, los enlaces HTML son los puentes que nos permiten movernos de una página a otra....

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    1. Avatar Benny dice:

      Gracias a esto pude resolver mi error en algo tan sencillo, muchas gracias

    2. Avatar Roberto dice:

      Que buena pagina la verdad me ayudo mucho

    3. Avatar Angelica dice:

      Muchas gracias, me servio de mucho =)