Skip to main content

Llistes i Taules

En aquest capítol veurem com estructurar informació mitjançant llistes ordenades i no ordenades, i com crear taules per representar dades estructurades.

Llistes no ordenades – <ul>​

S’utilitzen per mostrar elements sense ordre específic.

<ul>
  <li>Patates</li>
  <li>Llet</li>
</ul>

Atribut type en <ul>​

Permet canviar la icona del bullet:

  • disc (per defecte)
  • circle
  • square
<ul type="square">
  <li>Patates</li>
  <li>Llet</li>
</ul>

Llistes ordenades – <ol>​

S’utilitzen per mostrar passos o informació amb ordre seqüencial.

<ol>
  <li>Patates</li>
  <li>Llet</li>
</ol>

Atributs en <ol>​

  • type: 1 | a | A | i | I
  • start: número d’inici
<ol type="A" start="3">
  <li>Patates</li>
  <li>Llet</li>
</ol>

Llistes i <li>​

L’etiqueta <li> representa cada element de la llista, tant en <ul> com en <ol>.

Atributs útils:​

  • type: per canviar el símbol individual
  • value: reiniciar la numeració en una llista ordenada
<ol>
  <li type="a">Dilluns</li>
  <li value="5">Dimarts</li>
</ol>

Taules en HTML – <table>​

Permeten mostrar dades estructurades en format de files i columnes.

<table border="1">
  <tr>
    <th>Nom</th>
    <th>Edat</th>
  </tr>
  <tr>
    <td>Joan</td>
    <td>25</td>
  </tr>
</table>

Estructura bàsica​

  • <table>: conté tota la taula
  • <tr>: fila
  • <th>: capçalera
  • <td>: cel·la de dades

Atributs útils a <table>​

  • border: amplada del contorn
  • cellpadding: espai entre contingut i vora de la cel·la
  • cellspacing: espai entre cel·les
  • width: amplada de la taula
  • align: posició (left | center | right)
  • bgcolor: color de fons
<table
  border="1"
  cellpadding="5"
  cellspacing="3"
  width="100%"
  align="center"
  bgcolor="#f0f0f0"
></table>

Elements opcionals​

  • <thead>: capçalera
  • <tbody>: cos principal
  • <tfoot>: peu de taula
<table border="1">
  <thead>
    <tr>
      <th>Nom</th>
      <th>Edat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Joan</td>
      <td>29</td>
    </tr>
  </tbody>
</table>

Atributs de cel·les​

  • rowspan: ocupa múltiples files
  • colspan: ocupa múltiples columnes

Caption​

L’etiqueta <caption> s’utilitza per descriure la taula i ha de ser el primer element dins <table>.

<table border="1">
  <caption>
    Estudiants
  </caption>
  <tr>
    <th>Nom</th>
    <th>Edat</th>
  </tr>
</table>

Aquest mòdul t’ajuda a millorar la presentació d’informació amb estructures clares com llistes i taules. Són fonamentals per fer webs llegibles i estructurades.