Escriu per cercar…

Taula

Una taula HTML és un conjunt de files, i cada fila té tantes cel·les com vulguis.

WebCodi
S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments estàticsDAW-BIO

Introducció

Una taula HTML:

  • És un conjunt de files, i només files.
  • No hi ha columnes, encara que visualment sembli que la taula és una quadrícula amb files i columnes.

Una fila es marca amb <tr> (“table row”) i pot tenir tantes cel·les com tu vulguis.

Cada cel·la es marca amb <td> (“table data”).

html
Animals
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Animals</title>
</head>
<body class="prose p-5">
  <table>
    <tr>
      <td class="border">Gos</td>
      <td class="border">Gat</td>
    </tr>
    <tr>
      <td class="border">Tortuga</td>
    </tr>
    <tr>
      <td class="border">Llúdriga</td>
      <td class="border">Dofí</td>
      <td class="border">Sardina</td>
    </tr>
  </table>
</body>
</html>

Si totes les files tenen el mateix nombre de cel·les, es veu una quadrícula.

Però si no tenen el mateix nombre de cel·les, com en aquest exemple, no sembla una taula.

Encapçalaments

L’element <th> (“table heading”) s’utilitza igual que l’element <td>, però representa l’encapçalament d’una columna o d’una fila.

html
Entrades
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Entrades</title>
</head>
<body class="prose p-5">
  <table>
    <tr>
      <th></th>
      <th scope="col">Dissabte</th>
      <th scope="col">Diumenge</th>
    </tr>
    <tr>
      <th scope="row">Entrades venudes:</th>
      <td>120</td>
      <td>135</td>
    </tr>
    <tr>
      <th scope="row">Vendes totals:</th>
      <td>600 €</td>
      <td>675 €</td>
    </tr>
  </table>
</body>
</html>

Els navegadors mostren el contingut de l’element <th> en negreta.

L’atribut scope indica si és l’encapçalament d’una fila (row) o d’una columna (col).

Fer servir <th> ajuda les persones que utilitzen lectors de pantalla, millora la indexació dels motors de cerca, i et permet controlar millor l’aparença de la taula quan comencis a utilitzar CSS.

Fins i tot si una cel·la no té contingut, has d’escriure un element <td> o <th> buit perquè la taula es representi correctament.

(La primera cel·la de la primera fila d’aquest exemple és una cel·la buida.)

Cims
Mostra la solució
html
Cims
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Cims</title>
</head>
<body class="prose p-5">
  <table>
    <tr>
      <th scope="col">Cim</th>
      <th scope="col">Altitud</th>
      <th scope="col">Comarca</th>
    </tr>
    <tr>
      <th scope="row">Pica d'Estats</th>
      <td>3.143 m</td>
      <td>Pallars Sobirà</td>
    </tr>
    <tr>
      <th scope="row">Puigmal</th>
      <td>2.910 m</td>
      <td>Ripollès</td>
    </tr>
    <tr>
      <th scope="row">Pedraforca</th>
      <td>2.506 m</td>
      <td>Berguedà</td>
    </tr>
  </table>
</body>
</html>

Estàs llegint una vista prèvia.

Inicia sessió amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Encara no has enllaçat el compte? Entra un cop a l'Escola amb el Moodle del centre.