22-Tablas en html

Temas tratados en esta entrada

• Introducción a las tablas
• Definición de una tabla HTML
• Celdas de tabla
• Filas de tabla
• Encabezados de tabla
• Cómo agregar un borde
• Evitar bordes dobles
• Colores de los bordes
• Color del fondo
• Bordes redondos
• Bordes punteados

---

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>
                        

---

Ir al índice