17. Tablas

A principios de los 2000 las tablas se llegaron a utilizar como técnica para maquetar, como forma de distribuir las zonas de contenido. Hoy en día tenemos módulos como Flexbox o Grid CSS para ello, por lo que las tablas ya no se utilizan, tan sólo se utilizan para tabular datos, que siempre fue su cometido inicial.

Sintaxis

Una sintaxis típica de tabla es la siguiente.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tablas</title>
  </head>

  <body>
    <h1>Tablas</h1>

    <table>
      <thead>
        <tr>
          <th colspan="3">Datos personales</th>
        </tr>
        <tr>
          <th>Nombre</th>
          <th>Apellidos</th>
          <th>Edad</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">Francisco</td>
          <td>Paredes</td>
          <td>51</td>
        </tr>
        <tr>
          <!-- <td>Francisco</td> -->
          <td>Parrales</td>
          <td>52</td>
        </tr>
        <tr>
          <td>Inés</td>
          <td>Paredes</td>
          <td>48</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3">Datos personales</th>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
Scroll al inicio