--- title: slug: Web/HTML/Element/table tags: - CSS Elemen - Element - HTML - HTML tabular data - Reference - Tables - Web translation_of: Web/HTML/Element/table ---
{{HTMLRef}}

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 {{HTMLElement("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 {{HTMLElement("caption")}},
  2. zero o més elements {{HTMLElement("colgroup")}},
  3. un element opcional {{HTMLElement("thead")}},
  4. un element opcional {{HTMLElement("tfoot")}}, ja sigui abans o després d'un de les següents:
    • zero o més elements {{HTMLElement("tbody")}}
    • un o més elements {{HTMLElement("tr")}}
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.

{{htmlattrdef("align")}} {{Deprecated_inline}}
Aquest atribut enumerat indica com ha d'alinear-se la taula dins del document que ho conté. Pot tenir els següents valors:
Nota d'ùs
  • No utilitzeu aquest atribut, ja que ha estat desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb CSS. Establir {{cssxref("margin-left")}} i {{cssxref("margin-right")}} a auto o {{cssxref("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.
{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}
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 {{HTMLElement("table")}} se li ha de donar estil amb CSS. Utilitzar la propietat CSS {{cssxref("background-color")}} per crear un efecte similar a l'atribut bgcolor.
{{htmlattrdef("border")}} {{Deprecated_inline}}
Aquest atribut enter defineix, en píxels, la mida del marc que envolta la taula. Si s'estableix a 0, l'atribut {{htmlattrxref("frame", "table")}} es posa a void.
Nota d'ùs: No utilitzeu aquest atribut, ja que ha està desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut border, podeu utlitzar les propietats CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} i {{cssxref("border-style")}}.
{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}
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 {{HTMLElement("table")}} se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut cellpadding, aplicar la propietat {{cssxref("border-collapse")}} a l'element {{HTMLElement("table")}}, amb el seu valor establert a collapse, i la propietat {{cssxref("padding")}} a l'element {{HTMLElement("td")}}.
{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}
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 {{HTMLElement("table")}} se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut cellspacing, aplicar la propietat {{cssxref("border-spacing")}} a l'element {{HTMLElement("table")}}. Border-spacing no té cap efecte si {{cssxref ("border-collapse")}} s'estableix a collapse.
{{htmlattrdef("frame")}} {{Deprecated_inline}}
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 {{HTMLElement("table")}} se li ha de donar estil amb CSS. Per crear un efecte similar a l'atribut frame, aplicar les propietats {{cssxref("border-style")}} i {{cssxref("border-width")}}.
{{htmlattrdef("rules")}} {{Deprecated_inline}}
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:
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  {{cssxref("border")}} adequadament els elements {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.
{{htmlattrdef("summary")}} {{Deprecated_inline}}
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 {{HTMLElement("caption")}} al seu lloc. L'atribut summary no és obligatori i pot ser omès quan un element {{HTMLElement("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  {{HTMLElement("caption")}}.
  • Afegir una descripció en un element {{HTMLElement("details")}}, a l'interior de la taula de l'element {{HTMLElement("caption")}}.
  • Incloure en un element {{HTMLElement("table")}} un element {{HTMLElement("figure")}} i afegir la descripció en prosa al seu costat.
  • Incloure en un element {{HTMLElement("table")}} un element {{HTMLElement("figure")}} i afegir la descripció en prosa dins d'un element {{HTMLElement("figcaption")}}.
  • Configurar la taula de manera que no sigui necessària una descripció (per exemple, amb l'ús dels elements {{HTMLElement("th")}} i {{HTMLElement("thead")}}).
{{htmlattrdef("width")}} {{Deprecated_inline}}
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 {{cssxref("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>

{{EmbedLiveSample('Simple_Table', '100%', '100', '', 'Web/HTML/Element/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>

{{EmbedLiveSample('More_Examples', '100%', '700', '', 'Web/HTML/Element/table')}}

{{CompatibilityTable}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 {{CompatGeckoDesktop("1")}} 4.0[1] 7.0 1.0
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.0 {{CompatGeckoMobile("1")}} 6.0[1] 6.0 1.0

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

Veure