<table>

This translation is incomplete. Please help translate this article from English.

L'Element HTML Taula (<table>) representa dades tabulars, és a dir, informació expressada a través d'una taula de dades bidimensionals.

Nota: Abans de la creació de CSS, els elements HTML <table> s'utilitzaven sovint com un mètode per al disseny de pàgines. Aquest ús ha estat descoratjat des de HTML 4. No obstant això, els correus electrònics HTML són una excepció on les taules estan sent utilitzats amb fins de disseny. La raó d'això és el poc suport de CSS en clients de correu electrònic populars.

Context d'ùs

Categories de contingut Contingut dinàmic
Contingut permès
En aquest ordre:
  1. un element opcional <caption>,
  2. zero o més elements <colgroup>,
  3. un element opcional <thead>,
  4. un element opcional <tfoot>, ja sigui abans o després d'un de les següents:
Omissió de l'etiqueta Cap, tant l'etiqueta d'inici com final són obligatories
Elements pares permesos Qualsevol element que accepti contingut dinàmic
Normativa del document HTML5, secció 4.9.1 (HTML4.01, secció 11.2.1)

Atributs

Aquest element inclou atributs globals. Els següents atributs mostrats en aquesta pàgina ara están desaprovats.

align
Aquest atribut enumerat indica com ha d'alinear-se la taula dins del document que ho conté. Pot tenir els següents valors:
  • left: la taula es mostra a la part esquerra del document;
  • center: la taula es mostra al centre del document;
  • right: la taula es mostra a la part dreta del document.
Nota d'ùs
  • No utilitzeu aquest atribut, ja que ha estat desaprovat. L'element <table> se li ha de donar estil amb CSS. Establir margin-left i margin-right a auto o margin a 0 auto per aconseguir el efecte similar a l'atribut align.
  • Abans del Firefox 4, Firefox també donava suport els valors middle, absmiddle, and abscenter com a sinònims de center, d'una manera peculiar.
bgcolor
Aquest atribut defineix el color de fons d'una taula. Consisteix en un codi hexadecimal de 6 dígits com es defineix en sRGB i està prefixat per "#". Aquest atribut es pot utilitzar amb una de les setze cadenes de color predefinits:
  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"
Nota d'ùs: No utilitzeu aquest atribut, ja que està desaprovat. L'element <table> se li ha de donar estil amb CSS. Utilitzar la propietat CSS background-color per crear un efecte similar a l'atribut bgcolor.
border
Aquest atribut enter defineix, en píxels, la mida del marc que envolta la taula. Si s'estableix a 0, l'atribut frame es posa a void.
Nota d'ùs: No utilitzeu aquest atribut, ja que ha està desaprovat. L'element <table> se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut border, podeu utlitzar les propietats CSS border, border-color, border-width i border-style.
cellpadding
Aquest atribut defineix l'espai entre el contingut d'una cel·la i la seva vora, que es mostra o no. Si la longitud de la cellpadding es defineix en píxels, aquest espai de mida de píxel s'aplicarà als quatre costats del contingut de la cel·la. Si la longitud es defineix amb un valor percentual, el contingut se centra i l'espai vertical total (superior i inferior) representarà aquest valor. El mateix succeeix amb l'espai horitzontal total (esquerra i dreta).
Nota d'ùs: No utilitzeu aquest atribut, ja que està desaprovat. L'element <table> se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut cellpadding, aplicar la propietat border-collapse a l'element <table>, amb el seu valor establert a collapse, i la propietat padding a l'element <td>.
cellspacing
Aquest atribut defineix la mida de l'espai entre dues cel·les en un valor de percentatge o píxels. L'atribut s'aplica tant horitzontal com verticalment, a l'espai entre la part superior de la taula i les cel·les de la primera fila, l'esquerra de la taula i la primera columna, a la dreta de la taula i l'última columna i la part inferior de la taula i l'última fila.
Nota d'ùs: No utilitzeu aquest atribut, ja que està desaprovat. L'element <table> se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut cellspacing, aplicar la propietat border-spacing a l'element <table>. Border-spacing no té cap efecte si border-collapse s'estableix a collapse.
frame
Aquest atribut enumerat defineix quin costat del marc que envolta la taula ha de mostrar-se. Pot tenir els següents valors:
  above   below
  hsides   vsides
  lhs   rhs
  border   box
  void
Nota d'ùs: No utilitzeu aquest atribut, ja que està desaprovat. L'element <table> se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut frame, aplicar les propietats border-style i border-width.
rules
Aquest atribut enumerat defineix on han d'aparèixer les regles, és a dir línies, en una taula. Pot tenir els següents valors:
  • cap, indica que no es mostraran les regles; que és el valor per defecte;
  • grups, farà que les regles es mostrin entre grups de files (definit per els elements <thead>, <tbody> i <tfoot>) i entre els grups de columnes (definits per els elements <col> i <colgroup>);
  • files, farà que les regles es mostrin entre les files;
  • columnes, farà que les regles es mostrin entre les columnes;
  • tot, farà que les regles es mostrin entre les files and columnes.
Nota:
  • L'estil de les regles depenen del navegador i no pot ser modificat.
  • No utilitzeu aquest atribut, ja que està desaprovat. Les regles han de ser definides i se'ls dóna estil usant CSS. Aplicar la propietat  border adequadament els elements <thead>, <tbody>, <tfoot>, <col> o <colgroup>.
summary
Aquest atribut defineix un text alternatiu que resumeix el contingut de la taula. En general, permet els discapacitats visuals que estan navegant per la web amb una pantalla Braille, adquirir informació sobre la taula. Si la informació afegida per aquest atribut també és útil per a persones que no tenen problemes visuals, considereu l'ús de <caption> al seu lloc. L'atribut summary no és obligatori i pot ser omès quan un element <caption>  compleix la seva funció.
Nota d'ùs: No utilitzeu aquest atribut, ja que està desaprovat. En el seu lloc, triar un d'aquests mètodes per afegir una descripció d'una taula:
  • Utilitzeu la prosa al voltant de la taula (aquest mètode és menys semàntic).
  • Afegir una descripció a la taula amb l'element  <caption>.
  • Afegir una descripció en un element <details>, a l'interior de la taula de l'element <caption>.
  • Incloure en un element <table> un element <figure> i afegir la descripció en prosa al seu costat.
  • Incloure en un element <table> un element <figure> i afegir la descripció en prosa dins d'un element <figcaption>.
  • Configurar la taula de manera que no sigui necessària una descripció (per exemple, amb l'ús dels elements <th> i <thead>).
width
Aquest atribut defineix l'amplada de la taula. L'amplada es pot definir per píxels o un valor de percentatge. Un valor percentual serà definit per l'amplada del contenidor en el qual es col·loca la taula.
Nota d'ùs: No utilitzeu aquest atribut, ja que està desaprovat. Les regles han de ser definides i se'ls dóna estil usant CSS. Utilitzar la propietat width en el seu lloc.

Interfície DOM

Aquest element implementa la interfície HTMLTableElement.

Exemples

Taula senzilla

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Més Exemples

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 1.0 (1.7 or earlier) 4.0[1] 7.0 1.0
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.0 1.0 (1) 6.0[1] 6.0 1.0

[1] Hi ha un error de representació en Internet Explorer 9 que implica <table> i :hover; vegeu la secció "Compatibilitat del navegador" del article :hover per a més detalls.

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,