Tablas HTML ⇨ Etiquetas, atributos y tips para su uso


Aprende como utilizar las etiquetas y atributos a tu favor para aprovechar al máximo las características de las tablas escritas con HTML.

➕Tabla de contenidos

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
<table> Etiqueta que define a la tabla, donde se agregan las etiquetas de a continuación
<th> Abreviación de Table Header que contiene la cabecera de la tabla
<tr> Abreviación de Table Row que define las filas de la tabla
<td> Abreviación de Table Data que define las celdas de la tabla
<caption> Titulo de la tabla

Estas son las etiquetas básicas para crear un tabla, por ejemplo, si deseamos hacer una tabla de 3x3 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>
Ejemplo:

Titulo de la tabla
Título columna 1 Título columna 2 Título columna 3
Contenido cela 1 Contenido cela 2 Contenido cela 3
Contenido cela 1.2 Contenido cela 2.2 Contenido cela 3.2

Como puedes observar tendríamos un título para cada una de las tres columnas y dos filas para cada columna donde agregar contenido, pero solo se ordenara el contenido sin ningún estilo (style). A continuación te muestro los estilos más utilizados para la etiqueta 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

Para el ancho de tabla les recomiendo utilizar un porcentaje de 100% para que la tabla se adapte a cualquier dispositivo. Utilizando los atributos la tabla quedaría así:
<table border="1" bordercolor="yellow" bgcolor="green" cellpadding="30" cellspacing="0" style="width: 100%;">
Ejemplo:

Título columna 1 Título columna 2 Título columna 3
Contenido cela 1 Contenido cela 2 Contenido cela 3
Contenido cela 1.2 Contenido cela 2.2 Contenido cela 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>
Ejemplo:

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 esten 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>
En funcionamiento:

Pie de tabla 1 Pie de tabla 2
Cabecera 1 Cabecera 2
Celda 1 Celda 2
Título de la tabla

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>
Visualizando los cambios:

Pie de tabla 1 Pie de tabla 2
Cabecera 1 Cabecera 2
Combinar filas
Título de la tabla

Utilizando el atributo rowspan

Sobre el mismo ejemplo que el atributo anterior utilizare rowspan, aunque agregare una fila más para que se vea más bonito 😀.
<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>
Visualizando cambios:

Pie de tabla 1 Pie de tabla 2
Cabecera 1 Cabecera 2
Celda 1 Celda 2
Celda 1
Combinando columnas

Tips para el uso de tablas

#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 estandar a cualquier tabla de tu WEB.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.