Tablas HTML, 'table', 'tr' y 'td'

Una tabla es un conjunto de filas y columnas para representar datos, que pueden ser de cualquier tipo: texto, imágenes, listas, otras tablas, etc. La forma de crear una tabla en un documento HTML:

• <table> y </table> son las etiquetas de apertura y cierre de la tabla.
  Un atributo muy interesante para <table> es "summary", se usa para introducir una descripción del contenido de la tabla:

  <table summary="descripción de lo que representa el contenido de la tabla">
  ...aquí irán las filas y columnas con los datos de la tabla...
  </table>

  El atributo summary no será mostrado por el navegador web, pero se debe incluir siempre por motivos de accesibilidad y posicionamiento para algunos buscadores.
• <tr> y </tr> definen cada una de las filas de la tabla (tr viene de table row).
• <td> y </td> contendrán entre ellas el contenido (o datos) de cada una de las celdas de la tabla, ordenadas dentro de cada fila <tr> ... ... </tr> (td viene de table data).
• <th> y </th> es para definir "cabeceras" de columnas o filas de dentro de la tabla (th viene de table head). Estas etiquetas sustituirán a las celdas de datos <td> en el lugar en que las queramos posicionar, por lo tanto también van dentro de las filas de la tabla en su lugar correspondiente.
  La etiqueta <th> debe tener el atributo scope para indicar si esta celda "cabecera" define el contenido de una columna o de una fila con los valores ="col" o ="row" respectivamente:

  • <th scope="col">... identifica a una "columna"
  • <th scope="row">... identifica a una "fila"

  El valor de scope no será mostrado por el navegador web, pero como antes, es muy conveniente incluirlo siempre por motivos de accesibilidad y posicionamiento.
• <caption> descripción de la tabla </caption> es para indicar una descripción del contenido de la tabla, y está sí será mostrada por el navegador web, va justo después de la etiqueta <table>:
  <table summary="descripción de la tabla">
  <caption>descripción de la tabla</caption>
  
  <tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>
  
  <tr> <th scope="row"> cabecera 2,1 </th> <td> celda 2,2 </td> <td> celda 2,3 </td> <td> celda 2,4 </td> </tr>
  
  <tr> <th scope="row"> cabecera 3,1 </th> <td> celda 3,2 </td> <td> celda 3,3 </td> <td> celda 3,4 </td> </tr>
  
  </table>

  El código anterior mostrará la siguiente tabla:

  descripción de la tabla

  celda 1,1	celda 1,2	celda 1,3	celda 1,4
  cabecera 2,1	celda 2,2	celda 2,3	celda 2,4
  cabecera 3,1	celda 3,2	celda 3,3	celda 3,4

  El contenido de la etiqueta <caption> se muestra con ese fondo amarillento por que tenemos una regla CSS definida para esta etiqueta:

  caption{
  background-color: #F3F38E;
  }

  El resto del contenido de la tabla se muestra tal y como lo muestra por defecto el navegador que estés utilizando, pues no todos los navegadores web muestran las tablas html del mismo modo:

  Resulta muy interesante crear reglas de estilo CSS para cada uno de los elementos de nuestras tablas, y evitar así sorpresas inesperadas... bordes de celdas, espacio entre celdas, fuente de texto, tamaño de texto, color de texto, estilo, colores de fondo, etc.

---

Ejemplos de reglas o clases CSS para tablas

Además de la regla para <caption> mostrada antes, hay definida en este blog una clase de estilo CSS con el nombre ".tabla" (para algunas tablas del blos) con estas reglas:

/* fondo de la etiqueta "CAPTION" */
caption{
background-color: #F3F38E;
}

/* margen interno para todas las celdas TD de tablas */
td{
padding: 4px;
}

/* celdas TD de la clase ".tabla": color fondo, color texto */
.tabla td{
background-color: orange;
color: black;
}

/* celdas TH de la clase ".tabla": color fondo, color texto */
.tabla th{
background-color: blue;
color: white;
}

Para aplicar estas reglas de estilo a una tabla, se debe especificar en la etiqueta <table> así:

<table class="tabla" summary="descripción de la tabla" ... >

Y la tabla del ejemplo anterior se mostrará así:

descripción de la tabla

celda 1,1	celda 1,2	celda 1,3	celda 1,4
cabecera 2,1	celda 2,2	celda 2,3	celda 2,4
cabecera 3,1	celda 3,2	celda 3,3	celda 3,4

Otro ejemplo tabla con bordes, primero el código CSS, cuyas reglas se aplicarán también a las etiquetas td que estén dentro de nuestra clase tabla_bordes:

.tabla_bordes td {
border-spacing: 15px;
border-width: 3px;
border-style: solid;
border-color: #99CCCC;
border-collapse: collapse; /* une borde celdas con el borde de tabla */
padding: 10px;
text-align: center;
}

Y la tabla de nuestro ejemplo anterior se mostrará así:

descripción de la tabla

celda 1,1	celda 1,2	celda 1,3	celda 1,4
cabecera 2,1	celda 2,2	celda 2,3	celda 2,4
cabecera 3,1	celda 3,2	celda 3,3	celda 3,4

Como a la etiqueta de cabecera th no se le aplica ninguna regla, las celdas cabecera de la tabla se visualizan según las muestra el navegador web que estemos usando.