Tablas avanzadas

Además de las etiquetas necesarias para crear tablas: table , tr y td, hay otras etiquetas y atributos que podemos utilizar al crear tablas en HTML:

th : Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla

caption : Se emplea para definir la leyenda o título de una tabla

Y entre los atributos más comunes tenemos:

colspan = "numero"  que es el número de columnas que ocupa esta celda

rowspan = "numero"  que es el número de filas que ocupa esta celda

Ejemplo de tabla avanzada:

  <table>
    <caption>Resultados Globales</caption>
    <tr>
      <th colspan="4">Curso 2019/2010</th>
    </tr>
    <tr>
      <th colspan="2">1º ESO - A</th>
      <th colspan="2">1º ESO - A</th>
    </tr>
    <tr>
      <td>Aprobados</td>
      <td>Suspensos</td>
      <td>Aprobados</td>
      <td>Suspensos</td>
    </tr>
    <tr>
      <td>68%</td>
      <td>57%</td>
      <td>32%</td>
      <td>43%</td>
    </tr>
  </table>

Que en un navegador se ve así:

Como he dicho anteriormente las tablas, por defecto, no muestran las líneas que dan forma a la tabla. Aquí estas líneas grises se han creados con esta regla .css:

td,th {
  padding: 0.5em;
  border: 1px solid rgba(0,0,0,0.2);
}

• Anterior