22- 馃搳 Tablas en HTML: Crea Estructuras Eficientes

Jorge Catalao agosto 06, 2025
HTML


Introducci贸n a las tablas

Las tablas en HTML se utilizan para organizar y presentar datos de manera estructurada. Permiten alinear informaci贸n en filas y columnas, lo que facilita la comprensi贸n y el an谩lisis de los datos. Este es un componente esencial en la creaci贸n de p谩ginas web, especialmente cuando se trata de mostrar informaci贸n como listas de precios, estad铆sticas o cualquier conjunto de datos que requiera una presentaci贸n clara.

En HTML, una tabla se define con la etiqueta <table>, y dentro de esta se utilizan las etiquetas <th> para las celdas de encabezado, <tr> para las filas y <td> para las celdas de datos. Esto proporciona una estructura l贸gica que ayuda tanto a los desarrolladores como a los usuarios a interpretar la informaci贸n de manera efectiva.



Definici贸n de una tabla HTML

Una tabla en HTML es un elemento utilizado para organizar datos en filas y columnas. Su definici贸n comienza con la etiqueta <table>, y dentro de ella se estructuran los datos utilizando otras etiquetas espec铆ficas.

El encabezado de la tabla se define utilizando la etiqueta <th> (table header) para marcar las celdas que contienen los t铆tulos o encabezados de cada columna. Las filas se organizan con la etiqueta <tr> (table row), y cada celda de datos dentro de una fila se representa con la etiqueta <td> (table data).


Ejemplo

Company Contact Country Phone Email
Alfreds Futterkiste Maria Anders Germany 030-0074321 maria.anders@example.com
Centro comercial Moctezuma Francisco Chang Mexico 55-1234-5678 francisco.chang@example.com
Ernst Handel Roland Mendel Austria 01-2345678 roland.mendel@example.com
Island Trading Helen Bennett UK 020-7946-0958 helen.bennett@example.com
Laughing Bacchus Winecellars Yoshi Tannamuri Canada 604-555-0132 yoshi.tannamuri@example.com
Magazzini Alimentari Riuniti Giovanni Rovelli Italy 06-12345678 giovanni.rovelli@example.com

C贸digo del ejemplo 

 <table border="1" style="border-collapse: collapse; width: 100%;">
 <tr>
     <th style="border: 1px solid black;">Company</th>
     <th style="border: 1px solid black;">Contact</th>
     <th style="border: 1px solid black;">Country</th>
     <th style="border: 1px solid black;">Phone</th>
     <th style="border: 1px solid black;">Email</th>
 </tr>
 <tr>
     <td style="border: 1px solid black;">Alfreds Futterkiste</td>
     <td style="border: 1px solid black;">Maria Anders</td>
     <td style="border: 1px solid black;">Germany</td>
     <td style="border: 1px solid black;">030-0074321</td>
     <td style="border: 1px solid black;">maria.anders@example.com</td>
 </tr>
 <tr>
     <td style="border: 1px solid black;">Centro comercial Moctezuma</td>
     <td style="border: 1px solid black;">Francisco Chang</td>
     <td style="border: 1px solid black;">Mexico</td>
     <td style="border: 1px solid black;">55-1234-5678</td>
     <td style="border: 1px solid black;">francisco.chang@example.com</td>
 </tr>
 <tr>
     <td style="border: 1px solid black;">Ernst Handel</td>
     <td style="border: 1px solid black;">Roland Mendel</td>
     <td style="border: 1px solid black;">Austria</td>
     <td style="border: 1px solid black;">01-2345678</td>
     <td style="border: 1px solid black;">roland.mendel@example.com</td>
 </tr>
 <tr>
     <td style="border: 1px solid black;">Island Trading</td>
     <td style="border: 1px solid black;">Helen Bennett</td>
     <td style="border: 1px solid black;">UK</td>
     <td style="border: 1px solid black;">020-7946-0958</td>
     <td style="border: 1px solid black;">helen.bennett@example.com</td>
 </tr>
 <tr>
     <td style="border: 1px solid black;">Laughing Bacchus Winecellars</td>
     <td style="border: 1px solid black;">Yoshi Tannamuri</td>
     <td style="border: 1px solid black;">Canada</td>
     <td style="border: 1px solid black;">604-555-0132</td>
     <td style="border: 1px solid black;">yoshi.tannamuri@example.com</td>
 </tr>
 <tr>
     <td style="border: 1px solid black;">Magazzini Alimentari Riuniti</td>
     <td style="border: 1px solid black;">Giovanni Rovelli</td>
     <td style="border: 1px solid black;">Italy</td>
     <td style="border: 1px solid black;">06-12345678</td>
     <td style="border: 1px solid black;">giovanni.rovelli@example.com</td>
 </tr>
 </table>


Celdas de tabla en HTML

Las celdas de una tabla en HTML se definen utilizando la etiqueta 'td', que significa "table data". Cada celda contiene un valor o contenido que se presenta en una intersecci贸n de filas y columnas.

Adem谩s de las celdas de datos, las tablas tambi茅n pueden tener celdas de encabezado, que se definen con la etiqueta 'th' (table header). Estas celdas suelen aparecer en la parte superior de la tabla o al principio de cada fila, y por defecto, el texto dentro de ellas se muestra en negrita y centrado.

El contenido de las celdas puede ser texto, im谩genes, enlaces u otros elementos HTML, lo que permite una presentaci贸n flexible de la informaci贸n en tablas.



Filas de tabla en HTML

Las filas de una tabla en HTML se definen mediante la etiqueta 'tr', que significa "table row". Cada fila agrupa un conjunto de celdas (definidas con 'td' o 'th') y organiza el contenido en la tabla de forma horizontal.

Las filas suelen contener tanto celdas de encabezado ('th') como celdas de datos ('td'), permitiendo crear una estructura clara y ordenada dentro de la tabla.

La etiqueta 'tr' se utiliza para crear cada fila, y puede estar dentro de las etiquetas 'thead', 'tbody' o 'tfoot', dependiendo de si la fila pertenece al encabezado, cuerpo o pie de la tabla, respectivamente.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

 <table border="1" style="border-collapse: collapse; width: 100%;">
 <thead>
     <tr>
         <th style="border: 1px solid black;">Company</th>
         <th style="border: 1px solid black;">Contact</th>
         <th style="border: 1px solid black;">Country</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td style="border: 1px solid black;">Alfreds Futterkiste</td>
         <td style="border: 1px solid black;">Maria Anders</td>
         <td style="border: 1px solid black;">Germany</td>
     </tr>
     <tr>
         <td style="border: 1px solid black;">Centro comercial Moctezuma</td>
         <td style="border: 1px solid black;">Francisco Chang</td>
         <td style="border: 1px solid black;">Mexico</td>
     </tr>
     <tr>
         <td style="border: 1px solid black;">Ernst Handel</td>
         <td style="border: 1px solid black;">Roland Mendel</td>
         <td style="border: 1px solid black;">Austria</td>
     </tr>
 </tbody>
</table>


Encabezados de tabla en HTML

Los encabezados de una tabla en HTML se definen utilizando la etiqueta 'th', que significa "table header". Esta etiqueta se utiliza para representar las celdas de t铆tulo en una fila o columna, brindando contexto y descripci贸n para los datos que contiene la tabla.

Por defecto, el contenido de las celdas de encabezado 'th' aparece en negrita y centrado, lo que las distingue de las celdas de datos regulares ('td'). Los encabezados pueden estar en la parte superior de la tabla (encabezado de columna) o al inicio de una fila (encabezado de fila).

Los encabezados suelen ubicarse dentro de la secci贸n 'thead' de una tabla, ayudando a estructurar los t铆tulos en una tabla y mejorar la accesibilidad y legibilidad de los datos.



C贸mo agregar un borde a una tabla en HTML

Para agregar un borde a una tabla en HTML, se utiliza el atributo 'border' dentro de la etiqueta 'table'. Este atributo define el grosor del borde en p铆xeles, lo que permite darle un contorno visible a la tabla.

Otra manera m谩s flexible de agregar bordes es mediante el uso de CSS. Con la propiedad 'border' en CSS, puedes controlar no solo el grosor, sino tambi茅n el estilo (s贸lido, punteado, etc.) y el color del borde. Esto se puede aplicar tanto a la tabla completa como a las celdas individuales ('th' y 'td').

Por ejemplo, para agregar un borde s贸lido de 1 p铆xel a toda la tabla y a sus celdas, puedes usar el siguiente estilo CSS: table, th, td { border: 1px solid black; }.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

 <table style="border: 5px double black; border-collapse: collapse; width: 100%;">
 <thead>
     <tr style="border: 5px double black;">
         <th style="border: 5px double black;">Company</th>
         <th style="border: 5px double black;">Contact</th>
         <th style="border: 5px double black;">Country</th>
     </tr>
 </thead>
 <tbody>
     <tr style="border: 5px double black;">
         <td style="border: 5px double black;">Alfreds Futterkiste</td>
         <td style="border: 5px double black;">Maria Anders</td>
         <td style="border: 5px double black;">Germany</td>
     </tr>
     <tr style="border: 5px double black;">
         <td style="border: 5px double black;">Centro comercial Moctezuma</td>
         <td style="border: 5px double black;">Francisco Chang</td>
         <td style="border: 5px double black;">Mexico</td>
     </tr>
     <tr style="border: 5px double black;">
         <td style="border: 5px double black;">Ernst Handel</td>
         <td style="border: 5px double black;">Roland Mendel</td>
         <td style="border: 5px double black;">Austria</td>
     </tr>
 </tbody>
 </table>


Evitar bordes dobles en una tabla HTML

En las tablas HTML, es com煤n que al aplicar bordes tanto a la tabla como a las celdas se produzca un efecto de "bordes dobles". Para evitar este efecto, se utiliza la propiedad CSS 'border-collapse'.

La propiedad 'border-collapse' se encarga de unir los bordes de la tabla y sus celdas en un solo borde, eliminando as铆 la apariencia de duplicaci贸n. Para lograr este efecto, se puede aplicar el siguiente c贸digo CSS: table { border-collapse: collapse; }.

Al aplicar esta propiedad, todos los bordes se colapsan en uno solo, mejorando la apariencia de la tabla y haci茅ndola m谩s limpia y ordenada.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

 <table style="border: 1px solid black; border-collapse: collapse; width: 100%;">
 <thead>
     <tr>
         <th style="border: 1px solid black;">Company</th>
         <th style="border: 1px solid black;">Contact</th>
         <th style="border: 1px solid black;">Country</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td style="border: 1px solid black;">Alfreds Futterkiste</td>
         <td style="border: 1px solid black;">Maria Anders</td>
         <td style="border: 1px solid black;">Germany</td>
     </tr>
     <tr>
         <td style="border: 1px solid black;">Centro comercial Moctezuma</td>
         <td style="border: 1px solid black;">Francisco Chang</td>
         <td style="border: 1px solid black;">Mexico</td>
     </tr>
     <tr>
         <td style="border: 1px solid black;">Ernst Handel</td>
         <td style="border: 1px solid black;">Roland Mendel</td>
         <td style="border: 1px solid black;">Austria</td>
     </tr>
 </tbody>
</table>


Colores de los bordes en tablas HTML

Los colores de los bordes en tablas HTML se pueden personalizar utilizando CSS. Puedes definir el color de los bordes tanto para la tabla como para las celdas individuales ('th' y 'td') mediante la propiedad 'border-color'.

Para aplicar un color a los bordes, se puede utilizar la siguiente sintaxis en CSS: table, th, td { border: 1px solid red; }. En este caso, todos los bordes de la tabla y las celdas ser谩n de color rojo.

Adem谩s, se pueden utilizar nombres de colores, valores hexadecimales o valores RGB para personalizar a煤n m谩s la apariencia de los bordes, ofreciendo flexibilidad en el dise帽o de la tabla.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

 <table style="border: 2px solid red; border-collapse: collapse; width: 100%;">
 <thead>
     <tr>
         <th style="border: 2px solid blue;">Company</th>
         <th style="border: 2px solid blue;">Contact</th>
         <th style="border: 2px solid blue;">Country</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td style="border: 2px solid green;">Alfreds Futterkiste</td>
         <td style="border: 2px solid green;">Maria Anders</td>
         <td style="border: 2px solid green;">Germany</td>
     </tr>
     <tr>
         <td style="border: 2px solid green;">Centro comercial Moctezuma</td>
         <td style="border: 2px solid green;">Francisco Chang</td>
         <td style="border: 2px solid green;">Mexico</td>
     </tr>
     <tr>
         <td style="border: 2px solid green;">Ernst Handel</td>
         <td style="border: 2px solid green;">Roland Mendel</td>
         <td style="border: 2px solid green;">Austria</td>
     </tr>
 </tbody>
 </table>


Color del fondo en tablas HTML

El color de fondo de una tabla HTML se puede personalizar utilizando CSS mediante la propiedad 'background-color'. Esta propiedad permite establecer un color espec铆fico para el fondo de la tabla, as铆 como para las celdas individuales ('th' y 'td').

Por ejemplo, para aplicar un color de fondo azul claro a toda la tabla, se puede utilizar el siguiente c贸digo CSS: table { background-color: lightblue; }. Esto har谩 que el fondo de la tabla sea de color azul claro.

Tambi茅n puedes usar diferentes colores para las celdas de encabezado y de datos, proporcionando un contraste visual que mejora la legibilidad. Por ejemplo: th { background-color: darkblue; color: white; } para celdas de encabezado y td { background-color: lightgray; } para celdas de datos.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

 <table style="border: 1px solid black; background-color: lightblue; width: 100%;">
 <thead>
     <tr>
         <th style="border: 1px solid black; background-color: darkblue; color: white;">Company
         </th>
         <th style="border: 1px solid black; background-color: darkblue; color: white;">Contact
         </th>
         <th style="border: 1px solid black; background-color: darkblue; color: white;">Country
         </th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td style="border: 1px solid black; background-color: lightgray;">Alfreds Futterkiste
         </td>
         <td style="border: 1px solid black; background-color: lightgray;">Maria Anders</td>
         <td style="border: 1px solid black; background-color: lightgray;">Germany</td>
     </tr>
     <tr>
         <td style="border: 1px solid black; background-color: lightgray;">Centro comercial
             Moctezuma</td>
         <td style="border: 1px solid black; background-color: lightgray;">Francisco Chang</td>
         <td style="border: 1px solid black; background-color: lightgray;">Mexico</td>
     </tr>
     <tr>
         <td style="border: 1px solid black; background-color: lightgray;">Ernst Handel</td>
         <td style="border: 1px solid black; background-color: lightgray;">Roland Mendel</td>
         <td style="border: 1px solid black; background-color: lightgray;">Austria</td>
     </tr>
 </tbody>
 </table>


Bordes redondos en tablas HTML

Los bordes redondos en tablas HTML se pueden lograr utilizando la propiedad CSS 'border-radius'. Esta propiedad permite aplicar esquinas redondeadas a la tabla y a las celdas individuales ('th' y 'td').

Para crear bordes redondos en toda la tabla, puedes usar el siguiente c贸digo CSS: table { border-radius: 10px; }. Esto har谩 que las esquinas de la tabla sean redondeadas.

Adem谩s, puedes aplicar 'border-radius' a las celdas para que tambi茅n tengan bordes redondos, lo que proporciona un aspecto m谩s suave y moderno. Por ejemplo: th, td { border-radius: 5px; }. Sin embargo, ten en cuenta que aplicar bordes redondos a las celdas puede generar un efecto visual diferente si se utilizan bordes colapsados.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

 <table
 style="border: 1px solid black; border-radius: 10px; width: 100%; border-collapse: separate; border-spacing: 0;">
 <thead>
     <tr>
         <th style="border: 1px solid black; border-radius: 5px; padding: 10px;">Company</th>
         <th style="border: 1px solid black; border-radius: 5px; padding: 10px;">Contact</th>
         <th style="border: 1px solid black; border-radius: 5px; padding: 10px;">Country</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Alfreds
             Futterkiste</td>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Maria Anders
         </td>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Germany</td>
     </tr>
     <tr>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Centro comercial
             Moctezuma</td>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Francisco Chang
         </td>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Mexico</td>
     </tr>
     <tr>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Ernst Handel
         </td>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Roland Mendel
         </td>
         <td style="border: 1px solid black; border-radius: 5px; padding: 10px;">Austria</td>
     </tr>
 </tbody>
 </table>


Colores de los bordes en tablas HTML

Los colores de los bordes en tablas HTML se pueden personalizar utilizando la propiedad CSS border-color. Esta propiedad permite establecer el color de los bordes con diferentes opciones. Puedes utilizar nombres de colores, valores hexadecimales o RGB.

  • red (rojo)
  • green (verde)
  • blue (azul)
  • #FF5733 (hexadecimal)
  • rgb(255, 0, 0) (RGB)
  • rgba(255, 0, 0, 0.5) (RGBA con transparencia)

Para aplicar un color espec铆fico a toda la tabla, puedes usar: table { border: 2px solid red; }. Tambi茅n puedes personalizar los colores de los bordes en diferentes celdas para crear un dise帽o m谩s atractivo.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

<table style="border: 2px solid black; width: 100%; border-collapse: collapse;">
<thead>
    <tr>
        <th style="border: 2px solid red; padding: 10px;">Company</th>
        <th style="border: 2px solid green; padding: 10px;">Contact</th>
        <th style="border: 2px solid blue; padding: 10px;">Country</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td style="border: 1px solid orange; padding: 10px;">Alfreds Futterkiste</td>
        <td style="border: 1px solid purple; padding: 10px;">Maria Anders</td>
        <td style="border: 1px solid teal; padding: 10px;">Germany</td>
    </tr>
    <tr>
        <td style="border: 1px solid pink; padding: 10px;">Centro comercial Moctezuma</td>
        <td style="border: 1px solid brown; padding: 10px;">Francisco Chang</td>
        <td style="border: 1px solid gold; padding: 10px;">Mexico</td>
    </tr>
    <tr>
        <td style="border: 1px solid gray; padding: 10px;">Ernst Handel</td>
        <td style="border: 1px solid lime; padding: 10px;">Roland Mendel</td>
        <td style="border: 1px solid darkblue; padding: 10px;">Austria</td>
    </tr>
</tbody>
</table>


Bordes punteados en tablas HTML

Los bordes en tablas HTML se pueden personalizar utilizando la propiedad CSS border-style. Esta propiedad permite establecer el estilo de los bordes, con varias opciones como:

  • dotted (punteado)
  • dashed (rayado)
  • solid (s贸lido)
  • double (doble)
  • groove (surco)
  • ridge (cresta)
  • inset (inserci贸n)
  • outset (saliente)
  • none (sin borde)
  • hidden (oculto)

Para aplicar bordes punteados a toda la tabla, puedes usar: table { border: 1px dotted black; }. Tambi茅n puedes combinar estilos de bordes en diferentes celdas para crear un dise帽o m谩s interesante.


Ejemplo

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

C贸digo del ejemplo 

 <table style="border: 2px solid black; width: 100%; border-collapse: collapse;">
 <thead>
     <tr>
         <th style="border: 2px dotted blue; padding: 10px;">Company</th>
         <th style="border: 2px dashed green; padding: 10px;">Contact</th>
         <th style="border: 2px solid red; padding: 10px;">Country</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td style="border: 1px dotted gray; padding: 10px;">Alfreds Futterkiste</td>
         <td style="border: 1px dashed gray; padding: 10px;">Maria Anders</td>
         <td style="border: 1px solid gray; padding: 10px;">Germany</td>
     </tr>
     <tr>
         <td style="border: 1px groove gray; padding: 10px;">Centro comercial Moctezuma</td>
         <td style="border: 1px ridge gray; padding: 10px;">Francisco Chang</td>
         <td style="border: 1px inset gray; padding: 10px;">Mexico</td>
     </tr>
     <tr>
         <td style="border: 1px outset gray; padding: 10px;">Ernst Handel</td>
         <td style="border: 1px double gray; padding: 10px;">Roland Mendel</td>
         <td style="border: 1px hidden gray; padding: 10px;">Austria</td>
     </tr>
 </tbody>
 </table>



Tags:
Jorge Catalao

Posted by: Jorge Catalao

Bienvenido a mi blog de cocina, un espacio donde comparto recetas sencillas que celebran tanto los sabores de hoy como los de ayer. Aqu铆 encontrar谩s platos f谩ciles de preparar, con ingredientes accesibles y explicaciones paso a paso, pensadas para quienes disfrutan cocinar sin complicarse. Me inspiro en la cocina tradicional, esos sabores que nos conectan con la infancia y la memoria, pero tambi茅n en recetas modernas, r谩pidas y pr谩cticas para el ritmo actual. Desde guisos caseros hasta ideas frescas para todos los d铆as, este blog es para quienes aman el sabor aut茅ntico, sin importar el nivel de experiencia en la cocina. ¡Cocinar puede ser simple, delicioso y hasta divertido! Gracias por estar ac谩 y compartir conmigo esta pasi贸n por la buena comida.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias