aboutsummaryrefslogtreecommitdiff
path: root/files/ca/web/html/element/td/index.html
blob: f95750d2c8d360739be36d35bee4f94eebffe83f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
---
title: <td>
slug: Web/HTML/Element/td
tags:
  - Element
  - HTML
  - HTML tabular data
  - Reference
  - Tables
  - Web
translation_of: Web/HTML/Element/td
---
<h2 id="Sumari">Sumari</h2>

<p>L'element <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> <em>cel·la de Taula</em> (<strong><code>&lt;td&gt;</code></strong>) defineix una cel·la d'una taula que conté dades. Participa en el <em>model de taula</em>.</p>

<h2 id="Context_d'ùs">Context d'ùs</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td>Cap.</td>
  </tr>
  <tr>
   <th>Contingut permès</th>
   <td>Contingut dinàmic.</td>
  </tr>
  <tr>
   <th>Omissió de l'etiqueta</th>
   <td>L'etiqueta d'inici és obligatòria. L'etiqueta final es pot ometre, si és seguit immediatament per un element {{HTMLElement("th")}} o {{HTMLElement("td")}} o si no hi ha més dades en el seu element pare.</td>
  </tr>
  <tr>
   <th>Elements pares permesos</th>
   <td>Un element {{HTMLElement("tr")}}.</td>
  </tr>
  <tr>
   <th>Normativa del document</th>
   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element" rel="external">HTML5, secció 4.9.9</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, secció 11.2.6</a>)</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("abbr")}} {{obsoleteGeneric('inline','HTML5')}}</dt>
 <dd>Aquest atribut conté una breu descripció del contingut de la cel·la. Alguns agents d'usuari, com ara lectors de parla, poden presentar aquesta descripció abans que el propi contingut.
 <div class="note"><strong>Nota: </strong>No utilitzeu aquest atribut, ja que és obsolet en l'últim estàndard: en lloc d'un altre, considereu iniciar el contingut de la cel·la per un contingut abreujat independent en si o utilitzar el contingut abreujat com el contingut de la cel·la i utilitzar el contingut llarg com la descripció de la cel·la posant-ho en l'atribut <strong>title</strong>.</div>
 </dd>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd>Aquest atribut enumerat especifica com s'aplicarà l'alineació horitzontal del contingut de cada cel·la. Els valors possibles són:
 <ul>
  <li><code>left</code>, alinea el contingut a l'esquerra de la cel·la</li>
  <li><code>center</code>, centra el contingut de la cel·la</li>
  <li><code>right</code>, alinea el contingut a la dreta de la cel·la</li>
  <li><code>justify</code>, inserta espais en el contingut textual de manera que el contingut es justifica en la cel·la</li>
  <li><code>char</code>, alinea el contingut textual en un caràcter especial amb una desplaçament mínim definit per els atributs {{htmlattrxref("char", "td")}} i {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li>
 </ul>

 <p>Si aquest atribut no està establert, el valor assumit és <code>left</code>.</p>

 <div class="note"><strong>Nota: </strong> No utilitzeu aquest atribut, ja que és obsolet (no suportat) en l'últim estàndard.

 <ul>
  <li>Per aconseguir el mateix efecte que els valors <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> utilitzeu la propietat CSS {{cssxref("text-align")}}.</li>
  <li>Per aconseguir el mateix efecte que el valor <code>char</code>, en CSS3, podeu utilitzar el valor de {{htmlattrxref("char", "td")}} com el valor de la propietat {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd>Aquest atribut conté una llista de cadenes separades per espais. Cada cadena és l'ID d'un grup de cel·les a les que s'aplica aquesta capçalera.
 <div class="note"><strong>Nota: </strong>No utilitzeu aquest atribut, ja que és obsolet en l'últim estàndard: en el seu lloc utilitzar l'atribut {{htmlattrxref("scope", "td")}}.</div>
 </dd>
 <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
 <dd>Aquest atribut defineix el color de fons de cada cel·la de la columna. És un codi hexadecimal de 6 dígits com es defineix en <a class="external external-icon" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixat per un '#'. Podeu utilitzar una de les setze cadenes de color predefinits:
 <table style="width: 80%;">
  <tbody>
   <tr>
    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>black</code> = "#000000"</td>
    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>green</code> = "#008000"</td>
   </tr>
   <tr>
    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>silver</code> = "#C0C0C0"</td>
    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>lime</code> = "#00FF00"</td>
   </tr>
   <tr>
    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>gray</code> = "#808080"</td>
    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>olive</code> = "#808000"</td>
   </tr>
   <tr>
    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>white</code> = "#FFFFFF"</td>
    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>yellow</code> = "#FFFF00"</td>
   </tr>
   <tr>
    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>maroon</code> = "#800000"</td>
    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>navy</code> = "#000080"</td>
   </tr>
   <tr>
    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>red</code> = "#FF0000"</td>
    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>blue</code> = "#0000FF"</td>
   </tr>
   <tr>
    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>purple</code> = "#800080"</td>
    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>teal</code> = "#008080"</td>
   </tr>
   <tr>
    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>fuchsia</code> = "#FF00FF"</td>
    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>aqua</code> = "#00FFFF"</td>
   </tr>
  </tbody>
 </table>

 <div class="note"><strong>Nota d'ùs:</strong> <strong> </strong>No utilitzeu aquest atribut, ja que no és estàndard i només s'implementa en algunes versions de Microsoft Internet Explorer : l'element {{HTMLElement("td")}} se li ha de donar estil amb <a href="https://developer.mozilla.org/en/CSS" title="en/CSS">CSS</a>. Per donar un efecte similar a l'atribut <strong>bgcolor</strong>, utilitzeu la propietat <a href="https://developer.mozilla.org/en/CSS" title="en/CSS">CSS</a> {{cssxref("background-color")}}.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd>Aquest atribut s'utilitza per establir el caràcter per alinear les cel·les d'una columna. Els valors típics d'això inclouen un punt (.) en intentar alinear els números o valors monetaris. Si {{htmlattrxref("align", "td")}}  no està establert a <code>char</code>, aquest atribut s'ignora.
 <div class="note"><strong>Nota: </strong> <strong> </strong>No utilitzeu aquest atribut, ja que és obsolet (i no està suportat) en l'últim estàndard. Per aconseguir el mateix efecte que {{htmlattrxref("char", "thead")}}, en CSS3, podeu utilitzar el joc de caràcters utilitzant l'atribut {{htmlattrxref("char", "th")}} com el valor de la propietat {{cssxref("text-align")}} {{unimplemented_inline}}.</div>
 </dd>
 <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd>Aquest atribut s'utilitza per indicar el nombre de caràcters a desplaçar de les dades de la columna dels caràcters d'alineació especificats per l'atribut <code>char</code>.
 <div class="note"><strong>Nota: </strong>No utilitzeu aquest atribut, ja que és obsolet (i no està suportat) en l'últim estàndard.</div>
 </dd>
 <dt>{{htmlattrdef("colspan")}}</dt>
 <dd>Aquest atribut conté un valor enter no negatiu que indica el nombre de columnes que s'estén la cel·la. El seu valor per defecte és 1; si el seu valor s'estableix en 0, s'estén fins al final de {HTMLElement("colgroup")}}, fins i tot si es defineix implícitament que pertany a la cel·la. Els valors superiors a 1000 seran considerats incorrectes i s'estableixen en el valor predeterminat (1).
 <div class="note"><strong>Nota: </strong>En {{HTMLVersionInline (5)}} aquest atribut només accepta valors més gran que zero, ja que no ha de ser utilitzat per solapar cel·les. A més, Firefox és l'únic navegador compatible amb el valor 0 com es defineix a l'especificació {{HTMLVersionInline (4,01)}}.</div>
 </dd>
 <dt>{{htmlattrdef("headers")}}</dt>
 <dd><span id="result_box" lang="ca"><span class="alt-edited">Aquest atribut conté una llista de cadenes separades per espais, cadascun corresponent a l'atribut <strong>id</strong> del elements {{HTMLElement ("th")}} que s'apliquen a aquest element</span></span>.</dd>
 <dt>{{htmlattrdef("rowspan")}}</dt>
 <dd>Aquest atribut conté un valor enter no negatiu que indica a quantes files s'estén la cel·la. El seu valor per defecte és 1; si el seu valor s'estableix en 0, s'estén fins al final de la secció de la taula ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, fins i tot si es defineix implícitament que pertany a la cel·la. Els valors superiors a 65534 es retallen fins 65534.</dd>
 <dt>{{htmlattrdef("scope")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd> </dd>
 <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd>Aquest atribut especifica l'alineació vertical del text dins de cada fila de cel·les de la capçalera de la taula. Els valors possibles per aquest atribut són
 <ul>
  <li><code>baseline</code>, posarà el text tan a prop de la part inferior de la cel·la com sigui possible, però alineant-ho en la <a class="external external-icon" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29">línia de base (</a><a class="external external-icon" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline)</a> dels caràcters en lloc de la part inferior d'ells. Si els caràcters són tots de la mida, això té el mateix efecte que <span style="font-family: courier new;">bottom</span>.</li>
  <li><code>bottom</code>, posarà el text tan a prop de la part inferior de la cel·la com sigui possible;</li>
  <li><code>middle</code>, centra el text en la cel·la;</li>
  <li>i <code>top</code>, posarà el text tant a prop de la part superior de la cel·la com sigui possible.</li>
 </ul>

 <div class="note"><strong>Nota: </strong>No utilitzeu aquest atribut, ja que és obsolet (i no està suportat) en l'últim estàndard: en el seu lloc aplicar la propietat CSS {{cssxref ("vertical-align")}}.</div>
 </dd>
 <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd><span id="result_box" lang="ca"><span class="alt-edited">Aquest atribut s'utilitza per definir l'amplada de cel·la recomanada. Les propietats</span></span>  <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> <span id="result_box" lang="ca"><span class="alt-edited">poden afegir espai addicional, i l'element {{HTMLElement ("col")}} amplada, també pot tenir algun efecte. En general, si l'ample d'una columna és massa estreta per mostrar correctament una cel·la en particular, les mateixes cel·les s'eixamplaran perque es pogui mostrar</span></span>
 <div class="note"><strong>Note: </strong>No utilitzeu aquest atribut en l'últim estàndard: en el seu lloc aplicar la propietat CSS {{cssxref("width")}}.</div>
 </dd>
</dl>

<h2 id="Interfície_DOM">Interfície DOM</h2>

<p>Aquest element implementa la interfície {{domxref("HTMLTableDataCellElement")}}.</p>

<h2 id="Exemples">Exemples</h2>

<p>Si us plau, veure la pàgina {{HTMLElement("table")}} per exemples de <code>&lt;td&gt;</code>.</p>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>align/valign</code></td>
   <td>1.0</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>char/charoff</code></td>
   <td>1.0</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>bgcolor</code> {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>atribut <code>colspan</code> amb valor 0 (s'extén fins el final de colgroup)</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>align/valign</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>char/charoff</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>bgcolor</code> {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] <span id="result_box" lang="ca"><span>Això</span> <span>actualment</span> <span>no està</span> <span>implementat en</span> <span>Gecko</span><span>.</span> <span>veure</span></span> {{bug("915")}}.</p>

<p>[2] <span id="result_box" lang="ca"><span>Això</span> <span>actualment</span> <span>no està</span> <span>implementat en</span> <span>Gecko</span><span>.</span> <span>veure</span></span> {{bug("2212")}}.</p>

<h2 id="Veure">Veure</h2>

<ul>
 <li>Altres elements HTML relacionats amb taules : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
</ul>

<p>{{HTMLRef}}</p>