<table>

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

Context d'ùs

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>

table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}

Navegadors compatibles

[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

• Altres elements HTML relacionats amb taules: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;
• Propietats CSS que poden ser especialment útils per donat estil a l'element <table>:
  • width per controlar l'ample de la taula; ;
  • border, border-style, border-color, border-width, border-collapse, border-spacing per controlar l'aspecte de les vores, regles i marc de les cel.les;
  • margin and padding donar-li estil al contingut de la cel·la individual;
  • text-align and vertical-align per definir l'alineació de text i el contingut cel·la.