¿Cómo hacer tablas HTML? (facilmente)

En este post, aprenderemos cómo crear una tabla en HTML y cómo mejorar su apariencia. Pero antes de sumergirnos en los detalles, repasemos algunos conceptos básicos.

HTML (Hypertext Markup Language) es un lenguaje de marcado utilizado para estructurar y presentar contenido en la web. Fue creado por Tim Berners-Lee en 1990 y desde entonces se ha convertido en el estándar para la creación de páginas web. HTML se compone de una serie de etiquetas, también conocidas como elementos, que definen la estructura y el formato del contenido en una página web.

Las tablas son una herramienta esencial en la organización y presentación de datos en una página web. Permiten mostrar información en filas y columnas de manera clara y fácil de entender. Aunque hoy en día se utilizan principalmente para presentar datos tabulares, en el pasado, las tablas también se usaban para crear diseños de páginas web. Sin embargo, con el advenimiento de CSS (Cascading Style Sheets), el diseño de páginas se ha vuelto más flexible y las tablas se reservan principalmente para la presentación de datos.

A lo largo de este post, aprenderemos cómo crear y personalizar tablas en HTML utilizando etiquetas y atributos, así como cómo aplicar estilos con CSS para mejorar su apariencia y hacerlas responsivas.

¿Qué es una tabla de datos?

Navegando por Internet o consultando cualquier otra fuente, te habrás topado con un elemento rígido que hace asociaciones entre información colocada en filas y columnas que convergen entre sí. Estas tablas de datos te permiten asociar diferentes datos en una sola celda. Si consigues introducirla en el HTML de tu web podrás mejorar considerablemente la experiencia de los usuarios.

Definición

Una tabla es un conjunto estructurado de datos tabulados. Estos se agrupan en columnas y filas. De esta forma, podrás encontrar con rapidez la información que estas buscando en cada momento.

Tablas en HTML

Si no estás familiarizado con el concepto, HTML (HyperText Markup Language) solo debes saber que es un lenguaje de programación empleado en el desarrollo de páginas web. En concreto, es utilizado para estructurar las páginas en cuanto a su contenido. Esto es muy importante desde el punto de vista funcional, pero también desde otros puntos de vista adicionales como la indexación por parte de los algoritmos de los buscadores y el consecuente posicionamiento en los mismos.

Las tablas HTML son tablas que nos permiten darle una organización a los datos de nuestra página web como son los textos, las imágenes, los enlaces e incluso otras tablas. ¿Cómo? A través de celdas dispuestas en filas y columnas. Gracias a estas tablas, podemos jerarquizar la información.

Tipos de tablas

Básicas

Estas tablas están formadas por dos tipos de elementos: las columnas y las filas. Son muy útiles y ofrecen información de forma simplificada y básica.

Avanzadas

Las tablas avanzadas son aquellas que disponen de otros elementos añadidos sobre la tabla básica. Por ejemplo, si tienen una cabecera, una sección de pie o diferentes tipos de datos diferenciados por estilos en las columnas o filas. Un ejemplo común de lo que sería una tabla avanzada son aquellas que se utilizan en los balances de empresa o en las finanzas.

Etiquetas

Las partes que componen tu tabla se van a diferenciar y definir mediante las etiquetas que se insertan en el código.

Etiqueta <table>

La etiqueta <table> se utiliza para crear la estructura básica de una tabla. Toda la información de la tabla se encuentra dentro de esta etiqueta. Al crear una tabla, asegúrate de cerrar la etiqueta con </table>.

<table>
  <!-- Aquí irán las filas y celdas de la tabla -->
</table>

Etiqueta <tr>

La etiqueta <tr> se utiliza para crear una fila dentro de la tabla. Cada fila representa una línea horizontal en la tabla.

<table>
  <tr>
    <!-- Aquí irán las celdas de la fila -->
  </tr>
</table>

Etiqueta <th>

Se utiliza para crear encabezados de tabla.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
</table>

Etiqueta <td>

Se utiliza para las celdas de datos dentro de las filas.

<table>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
</table>

Etiqueta <caption>

Permite añadir un nombre o título a la tabla.

<table border="1">
  <caption>Título de la tabla</caption>
  <tr>
    <th>Categoría 1</th>
    <th>Categoría 2</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

CSS

El CSS es el estilo que quieres aplicar a tu tabla.

Propiedad CSS border

table, td, th {
  border: 1px solid black;
}

Propiedad CSS border-collapse

table {
  border-collapse: collapse;
  width: 100%;
}

cellpadding y cellspacing

<table border="1" cellpadding="5" cellspacing="2">
  <!-- Filas y celdas de la tabla -->
</table>

text-align y valign

<table border="1">
  <tr>
    <td align="center" valign="middle">Dato 1</td>
    <td align="right" valign="bottom">Dato 2</td>
  </tr>
</table>

Atributo colspan

Permite fusionar columnas en una fila.

Atributo rowspan

Permite fusionar filas en una columna.

Cuerpos, encabezados y pies de la tabla

<table>
  <caption>Lista de compras</caption>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>45</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Champú</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Gel</td>
      <td>2</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Galletas</td>
      <td>1</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

Cómo hacer una tabla en HTML responsiva y CSS

1. Primero, crea la tabla en HTML:

   <table>
     <thead>
       <tr>
         <th>Encabezado 1</th>
         <th>Encabezado 2</th>
         <th>Encabezado 3</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Dato 1.1</td>
         <td>Dato 1.2</td>
         <td>Dato 1.3</td>
       </tr>
       <tr>
         <td>Dato 2.1</td>
         <td>Dato 2.2</td>
         <td>Dato 2.3</td>
       </tr>
     </tbody>
   </table>
   

2. Luego, añade el siguiente CSS:

   .responsiva {
     width: 100%;
     overflow-x: auto;
     display: block;
   }
   
   @media screen and (max-width: 767px) {
     .responsiva thead {
       display: none;
     }
     .responsiva tbody tr {
       display: block;
       margin-bottom: 10px;
     }
     .responsiva td {
       display: block;
       text-align: right;
       padding: 5px;
     }
     .responsiva td::before {
       content: attr(data-label);
       float: left;
       font-weight: bold;
       text-transform: uppercase;
     }
   }
   

3. Agrega el atributo data-label a cada celda <td>:

   <tr>
     <td data-label="Encabezado 1">Dato 1.1</td>
     <td data-label="Encabezado 2">Dato 1.2</td>
     <td data-label="Encabezado 3">Dato 1.3</td>
   </tr>
   

Con este enfoque, la tabla se mostrará con un diseño de bloques en pantallas pequeñas. Es legible, fácil de navegar, y muy útil para mejorar la experiencia móvil.

Esperamos que hayas disfrutado de este post. Y recuerda que si necesitas los servicios profesionales de SEO de una agencia especializada, estaremos encantados de atenderte.