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 | |
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. Establirmargin-left
imargin-right
aauto
omargin
a0 auto
per aconseguir el efecte similar a l'atribut align. - Abans del Firefox 4, Firefox també donava suport els valors
middle
,absmiddle
, andabscenter
com a sinònims decenter
, 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 CSSbackground-color
per crear un efecte similar a l'atributbgcolor
.
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'atributborder
, podeu utlitzar les propietats CSSborder
,border-color
,border-width
iborder-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'atributcellpadding
, aplicar la propietatborder-collapse
a l'element<table>
, amb el seu valor establert a collapse, i la propietatpadding
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'atributcellspacing
, aplicar la propietatborder-spacing
a l'element<table>
. Border-spacing no té cap efecte siborder-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'atributframe
, aplicar les propietatsborder-style
iborder-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.
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'atributsummary
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.
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>
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
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
- 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
andpadding
donar-li estil al contingut de la cel·la individual;text-align
andvertical-align
per definir l'alineació de text i el contingut cel·la.