Las tablas son la forma más simple en la creación de contenidos para mostrar información de manera ordenada y atractiva para la vista de los lectores. Son comúnmente adornadas con CSS, pero como ya saben más adelante hablare sobre eso y las opciones que existen para darle más estilos, por ahora solo me centrare en escribirlas con HTML.
Etiquetas para crear tablas en HTML
Comenzaremos analizando la forma más sencilla de crear un tabla hasta las opciones más avanzadas y te enseñare los atributos más utilizados.| # | Etiquetas | Descripción |
|---|---|---|
| 1 | <table> | Etiqueta que define a la tabla, donde se agregan las etiquetas de a continuación |
| 2 | <th> | Abreviación de Table Header que contiene la cabecera de la tabla |
| 3 | <tr> | Abreviación de Table Row que define las filas de la tabla |
| 4 | <td> | Abreviación de Table Data que define las celdas de la tabla |
| 5 | <caption> | Titulo de la tabla |
Estas son las etiquetas básicas para crear un tabla, por ejemplo, si deseamos hacer una tabla de 3×3 incluyendo la cabecera lo escribiríamos de la siguiente manera:
<table>
<caption>Titulo de la tabla</caption>
<!-- Cabecera -->
<tr>
<th>Título columna 1</th> <!-- Celda de cabecera de la columna 1 -->
<th>Título columna 2</th> <!-- Celda de cabecera de la columna 2 -->
<th>Título columna 3</th> <!-- Celda de cabecera de la columna 3 -->
</tr>
<!-- Primera fila -->
<tr>
<td>Contenido Celda 1</td> <!-- Primera celda de la primera fila -->
<td>Contenido Celda 2</td> <!-- Segunda celda de la primera fila -->
<td>Contenido Celda 3</td> <!-- Tercera celda de la primera fila -->
</tr>
<!-- Segunda fila -->
<tr>
<td>ContenidoCelda 1.2</td> <!-- Primera celda de la segunda fila -->
<td>Contenido Celda 2.2</td> <!-- Segunda celda de la segunda fila -->
<td>Contenido Celda 3.2</td> <!-- Tercera celda de la segunda fila -->
</tr>
</table>
Atributos para personalizar las tablas
Los atributos son las características que agregaremos a las tablas para personalizarlas. Si no sabes como agregar un atributo en HTML te recomiendo leas este articulo: Introducción al lenguaje HTML.
| Atributo | Valor | Descripción |
|---|---|---|
| border | Número | Agrega los bordes a tu tabla |
| bordercolor | color | Cambia de color el borde |
| bgcolor | color | Cambia el color de fondo |
| cellpadding | número | Tamaño de las celdas |
| cellspacing | número | Agregar o quitar espacio entre celdas |
| style=”width:” | porcentaje, numero | Ancho de la tabla |
<table border="1" bordercolor="yellow" bgcolor="green" cellpadding="30" cellspacing="0" style="width: 100%;">
| Título columna 1 | Título columna 2 | Título columna 3 |
|---|---|---|
| Contenido Celda 1 | Contenido Celda 2 | Contenido Celda 3 |
| ContenidoCelda 1.2 | Contenido Celda 2.2 | Contenido Celda 3.2 |
Estos atributos también los podemos agregar solamente a la cabecera, a una fila completa en especifico o incluso una celda en particular de la siguiente manera:
<table border="1" bordercolor="#000" cellpadding="20" cellspacing="0" style="width: 100%;">
<!-- Cabecera -->
<tr bgcolor="green">
<th>Título columna 1</th>
<th >Título columna 2</th>
<th >Título columna 3</th>
</tr>
<!-- Primera fila -->
<tr>
<td>Contenido cela 1</td>
<td>Contenido cela 2</td>
<td bgcolor="#D4AC43">Celda de color unico</td> <!--Celda con color unico -->
</tr>
<!-- Segunda fila -->
<tr bgcolor="#E5E6E4"> <!-- Fila con color unico -->
<td>Contenido cela 1.2</td>
<td>Contenido cela 2.2</td>
<td>Contenido cela 3.2</td>
</tr>
</table>
| Título columna 1 | Título columna 2 | Título columna 3 |
|---|---|---|
| Contenido cela 1 | Contenido cela 2 | Celda de color unico |
| Contenido cela 1.2 | Contenido cela 2.2 | Contenido cela 3.2 |
Etiquetas para organizar Tablas
La forma en que los navegadores leerán la tabla anterior sera como la escribimos en HTML, es decir, cuando el navegador detecte la etiqueta <table> se dará cuenta que el siguiente contenido es lo que esta dentro de ella y primero leera <th> que son los titulos y luego <tr> que son las filas, pero podemos utilizar etiquetas para que los navegadores puedan identificar donde esta el contenido de nuestra tabla aunque este desordenado. Esas etiquetas son las siguientes:| Etiqueta | Descripción |
|---|---|
| <thead> | Contiene la parte superior de la tabla |
| <tbody> | Contiene la parte central de la tabla |
| <tfoot>> | Contiene la parte inferior de la tabla |
Para utilizarlas como mencione anteriormente no es necesario que estén en orden, ya que la tabla se organizara de acuerdo a esas etiquetas. Te dejo un ejemplo al que también le agregare un titulo de tabla:
<table border="1" cellpadding="10" cellspacing="0" bordercolor="#000">
<!-- Table footer: pie de la tabla (tfoot) -->
<tfoot>
<tr>
<td>Pie de tabla 1</td>
<td>Pie de tabla 2</td>
</tr>
</tfoot>
<!-- Table header: cabecera de la tabla (thead) -->
<thead>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
</tr>
</thead>
<!-- Table body: cuerpo de la tabla (tbody) -->
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</tbody>
<!-- Leyenda o título de la tabla -->
<caption style="font-size: 30px;">Título de la tabla</caption>
</table>
| Pie de tabla 1 | Pie de tabla 2 |
| Cabecera 1 | Cabecera 2 |
|---|---|
| Celda 1 | Celda 2 |
Combinar las celdas en Tablas HTML
Las etiquetas <tr> y <td> poseen atributos particulares que nos permiten combinar las celdas ya sea en sentido horizontal o vertical, lo cual es muy útil a la hora de crear tablas avanzadas. Los atributos son los siguientes:| Atributo | Valor | Descripción |
|---|---|---|
| colspan | número | Número de columnas que la celda combinará. |
| rowspan | número | Número de filas que la celda combinará. |
Utilizando el atributo colspan
Si empleamos el ejemplo anterior de la organización para tablas, y deseamos combinar las celdas 1 y 2 en una sola, el código en <tbody> cambiaría de la siguiente manera:<!-- Table body: cuerpo de la tabla (tbody) -->
<tbody>
<tr>
<td colspan="2">Combinar filas</td> <!-- Abarca 2 celdas -->
</tr>
</tbody>
| Título columna 1 | Título columna 2 | Título columna 3 |
|---|---|---|
| Contenido cela 1 | Contenido cela 2 | Celda de color unico |
| Contenido cela 1.2 | Combinar filas | |
Utilizando el atributo rowspan
<table border="1" bordercolor="#000" cellpadding="10" cellspacing="0">
<!-- Table footer: pie de la tabla (tfoot) -->
<tfoot>
<tr>
<td>Pie de tabla 1</td>
<td>Pie de tabla 2</td>
</tr>
</tfoot>
<!-- Table header: cabecera de la tabla (thead) -->
<thead>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
</tr>
</thead>
<!-- Table body: cuerpo de la tabla (tbody) -->
<tbody>
<tr>
<td rowspan="2">Celda 1</td> <!-- Aquí esta el atributo -->
<td>Celda 2</td>
</tr>
<tr> <!-- agrego solo una celda para que no se des-configure -->
<td>Celda 1</td>
</tr>
</tbody>
<!-- Leyenda o título de la tabla -->
<caption style="font-size: 30px;">Combinando columnas</caption>
</table>
| Pie de tabla 1 | Pie de tabla 2 |
| Cabecera 1 | Cabecera 2 |
|---|---|
| Celda 1 | Celda 2 |
| Celda 1 |
Tips para el uso de tablas HTML
#1 Siempre con 100% : El ancho de tu tabla debe cubrir toda el área, para que se adapte a cualquier dispositivo.#2 Utiliza siempre las etiquetas de organizar: En el caso de que cambies plantilla, muevas algo que no sepas y se des-configuren, estas etiquetas mantienen siempre el orden.
#3 Agregalas a tu contenido web: solo si deseas organizar información y no por la fuerza.
#4 No utilices imágenes como fondo: Se ve bonito, pero afecta a la carga de tu sitio, sobre todo si agregas muchas tablas.
#5 Las debes personalizar con CSS: A pesar de que en esta entrada te enseñe como personalizar una tabla solo con HTML, lo que ahora predomina en el diseño WEB es el CSS para darle un formato estándar a cualquier tabla de tu WEB.
Más del Curso de HTML
- Introducción
- Enlaces
- Tablas (estás aquí)
- Listas
- Imágenes
- Formularios (solo la arquitectura con HTML)
- Layout
- Extra: Atributo HTML LazyLoading Nativo