Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Compare Revisions

<table>

Change Revisions

Revision 292769:

Revision 292769 by teoli on

Revision 298308:

Revision 298308 by golfth36 on

Title:
table
table
Slug:
HTML/Element/table
HTML/Element/table
Tags:
HTML, HTML:Element, HTML:Element Reference, Tables
"HTML:Element Reference", "HTML:Element", "HTML", "Tables"
Content:

Revision 292769
Revision 298308
n109            <span style="">left</span>, meaning that the table isn109            <span>left</span>, meaning that the table is to be di
> to be displayed to the left of the document;>splayed to the left of the document;
n112            <span style="">center</span>, meaning that the table n112            <span>center</span>, meaning that the table is to be 
>is to be displayed centered in the document;>displayed centered in the document;
n115            <span style="">right</span>, meaning that the table in115            <span>right</span>, meaning that the table is to be d
>s to be displayed to the right of the document.>isplayed to the right of the document.
n122              <strong>Do not use this attribute</strong>, as it hn122              <strong>Do not use this attribute</strong>, as it h
>as been deprecated: the {{ HTMLElement("table") }} element should>as been deprecated: the {{ HTMLElement("table") }} element should
> be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To giv> be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To giv
>e a similar effect than the <span style="">align</span> attribute>e a similar effect than the <span>align</span> attribute, the <a 
>, the <a href="/en/CSS" title="en/CSS">CSS</a> properties {{ cssx>href="/en/CSS" title="en/CSS">CSS</a> properties {{ cssxref("text
>ref("text-align") }} and {{ cssxref("vertical-align") }} should b>-align") }} and {{ cssxref("vertical-align") }} should be used.
>e used. 
n139              <td style="background-color: black; width: 24px;">n139              <td style="width: 24px; background-color: black;">
n141              </td>n
142              <td>141              </td>
143                <span style="">black</span> = "#000000"
144              </td>142              <td>
145              <td style="background-color: green; width: 24px;">143                <span>black</span> = "#000000"
146                &nbsp;
147              </td>
148              <td>144              </td>
149                <span style="">green</span> = "#008000"145              <td style="width: 24px; background-color: green;">
150              </td>
151            </tr>
152            <tr>
153              <td style="background-color: silver; width: 24px;">
n155              </td>n
156              <td>147              </td>
157                <span style="">silver</span> = "#C0C0C0"
158              </td>148              <td>
159              <td style="background-color: lime; width: 24px;">149                <span>green</span> = "#008000"
160                &nbsp;
161              </td>
162              <td>150              </td>
163                <span style="">lime</span> = "#00FF00"
164              </td>
165            </tr>
166            <tr>151            </tr>
167              <td style="background-color: gray; width: 24px;">
168                &nbsp;
169              </td>152            <tr>
153              <td style="width: 24px; background-color: silver;">
154                &nbsp;
170              <td>155              </td>
171                <span style="">gray</span> = "#808080"
172              </td>156              <td>
173              <td style="background-color: olive; width: 24px;">157                <span>silver</span> = "#C0C0C0"
174                &nbsp;
175              </td>
176              <td>158              </td>
177                <span style="">olive</span> = "#808000"
178              </td>
179            </tr>
180            <tr>
181              <td style="background-color: white; width: 24px;">159              <td style="width: 24px; background-color: lime;">
n183              </td>n
184              <td>161              </td>
185                <span style="">white</span> = "#FFFFFF"
186              </td>162              <td>
187              <td style="background-color: yellow; width: 24px;">163                <span>lime</span> = "#00FF00"
188                &nbsp;
189              </td>
190              <td>164              </td>
191                <span style="">yellow</span> = "#FFFF00"
192              </td>
193            </tr>
194            <tr>165            </tr>
195              <td style="background-color: maroon; width: 24px;">
196                &nbsp;
197              </td>166            <tr>
167              <td style="width: 24px; background-color: gray;">
168                &nbsp;
198              <td>169              </td>
199                <span style="">maroon</span> = "#800000"
200              </td>170              <td>
201              <td style="background-color: navy; width: 24px;">171                <span>gray</span> = "#808080"
202                &nbsp;
203              </td>
204              <td>172              </td>
205                <span style="">navy</span> = "#000080"173              <td style="width: 24px; background-color: olive;">
206              </td>
207            </tr>
208            <tr>
209              <td style="background-color: red; width: 24px;">
n211              </td>n
212              <td>175              </td>
213                <span style="">red</span> = "#FF0000"
214              </td>176              <td>
215              <td style="background-color: blue; width: 24px;">177                <span>olive</span> = "#808000"
216                &nbsp;
217              </td>
218              <td>178              </td>
219                <span style="">blue</span> = "#0000FF"
220              </td>
221            </tr>
222            <tr>179            </tr>
223              <td style="background-color: purple; width: 24px;">
224                &nbsp;
225              </td>180            <tr>
181              <td style="width: 24px; background-color: white;">
182                &nbsp;
226              <td>183              </td>
227                <span style="">purple</span> = "#800080"
228              </td>184              <td>
229              <td style="background-color: teal; width: 24px;">185                <span>white</span> = "#FFFFFF"
230                &nbsp;
231              </td>
232              <td>186              </td>
233                <span style="">teal</span> = "#008080"187              <td style="width: 24px; background-color: yellow;">
234              </td>
235            </tr>
236            <tr>
237              <td style="background-color: fuchsia; width: 24px;"
>> 
n239              </td>n
240              <td>189              </td>
241                <span style="">fuchsia</span> = "#FF00FF"
242              </td>190              <td>
243              <td style="background-color: aqua; width: 24px;">191                <span>yellow</span> = "#FFFF00"
244                &nbsp;
245              </td>
246              <td>192              </td>
193            </tr>
194            <tr>
195              <td style="width: 24px; background-color: maroon;">
196                &nbsp;
197              </td>
198              <td>
199                <span>maroon</span> = "#800000"
200              </td>
201              <td style="width: 24px; background-color: navy;">
202                &nbsp;
203              </td>
204              <td>
205                <span>navy</span> = "#000080"
206              </td>
207            </tr>
208            <tr>
209              <td style="width: 24px; background-color: red;">
210                &nbsp;
211              </td>
212              <td>
213                <span>red</span> = "#FF0000"
214              </td>
215              <td style="width: 24px; background-color: blue;">
216                &nbsp;
217              </td>
218              <td>
219                <span>blue</span> = "#0000FF"
220              </td>
221            </tr>
222            <tr>
223              <td style="width: 24px; background-color: purple;">
224                &nbsp;
225              </td>
226              <td>
227                <span>purple</span> = "#800080"
228              </td>
229              <td style="width: 24px; background-color: teal;">
230                &nbsp;
231              </td>
232              <td>
233                <span>teal</span> = "#008080"
234              </td>
235            </tr>
236            <tr>
237              <td style="width: 24px; background-color: fuchsia;"
 >>
238                &nbsp;
239              </td>
240              <td>
241                <span>fuchsia</span> = "#FF00FF"
242              </td>
243              <td style="width: 24px; background-color: aqua;">
244                &nbsp;
245              </td>
246              <td>
247                <span style="">aqua</span> = "#00FFFF"247                <span>aqua</span> = "#00FFFF"
n253          <strong>Usage note:&nbsp;</strong>Do not use this attrin253          <strong>Usage note:&nbsp;</strong>Do not use this attri
>bute, as it has been deprecated: the {{ HTMLElement("table") }} e>bute, as it has been deprecated: the {{ HTMLElement("table") }} e
>lement should be styled using <a href="/en/CSS" title="en/CSS">CS>lement should be styled using <a href="/en/CSS" title="en/CSS">CS
>S</a>. To give a similar effect than the <span style="">bgcolor</>S</a>. To give a similar effect than the <span>bgcolor</span> att
>span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> pro>ribute, the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ 
>perty {{ cssxref("background-color") }} should be used.>cssxref("background-color") }} should be used.
n262        This integer attribute defines, in pixels, the size of thn262        This integer attribute defines, in pixels, the size of th
>e frame surrounding the table. If set to <span style="">0</span>,>e frame surrounding the table. If set to <span>0</span>, it impli
> it implies that the {{ htmlattrxref("frame", "table") }} attribu>es that the {{ htmlattrxref("frame", "table") }} attribute is set
>te is set to <span style="">void</span>.> to <span>void</span>.
n264          <strong>Usage note:&nbsp;</strong>Do not use this attrin264          <strong>Usage note:&nbsp;</strong>Do not use this attri
>bute, as it has been deprecated: the {{ HTMLElement("table") }} e>bute, as it has been deprecated: the {{ HTMLElement("table") }} e
>lement should be styled using <a href="/en/CSS" title="en/CSS">CS>lement should be styled using <a href="/en/CSS" title="en/CSS">CS
>S</a>. To give a similar effect than the <span style="">border</s>S</a>. To give a similar effect than the <span>border</span> attr
>pan> attributethe <a href="/en/CSS" title="en/CSS">CSS</a> prop>ibute, the <a href="/en/CSS" title="en/CSS">CSS</a> properties {{
>erties {{ cssxref("border") }}, {{ cssxref("border-color") }}, {{> cssxref("border") }}{{ cssxref("border-color") }}, {{ cssxref(
> cssxref("border-width") }} and {{ cssxref("border-style") }} sho>"border-width") }} and {{ cssxref("border-style") }} should be us
>uld be used.>ed.
n275          <strong>Usage note:&nbsp;</strong>Do not use this attrin275          <strong>Usage note:&nbsp;</strong>Do not use this attri
>bute, as it has been deprecated: the {{ HTMLElement("table") }} e>bute, as it has been deprecated: the {{ HTMLElement("table") }} e
>lement should be styled using <a href="/en/CSS" title="en/CSS">CS>lement should be styled using <a href="/en/CSS" title="en/CSS">CS
>S</a>. To give a similar effect than the <span style="">border</s>S</a>. To give a similar effect than the <span>border</span> attr
>pan> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> >ibute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property 
>property {{ cssxref("border-collapse") }} with the value collapse>{{ cssxref("border-collapse") }} with the value collapse on the&n
> on the&nbsp; {{ HTMLElement("table") }} element itself, and the >bsp; {{ HTMLElement("table") }} element itself, and the property 
>property {{ cssxref("padding") }} on the {{ HTMLElement("td") }}.>{{ cssxref("padding") }} on the {{ HTMLElement("td") }}.
n286          <strong>Usage note:&nbsp;</strong>Do not use this attrin286          <strong>Usage note:&nbsp;</strong>Do not use this attri
>bute, as it has been deprecated: the {{ HTMLElement("table") }} e>bute, as it has been deprecated: the {{ HTMLElement("table") }} e
>lement should be styled using <a href="/en/CSS" title="en/CSS">CS>lement should be styled using <a href="/en/CSS" title="en/CSS">CS
>S</a>. To give a similar effect than the <span style="">border</s>S</a>. To give a similar effect than the <span>border</span> attr
>pan> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> >ibute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property 
>property {{ cssxref("border-collapse") }} with the value collapse>{{ cssxref("border-collapse") }} with the value collapse on the&n
> on the&nbsp; {{ HTMLElement("table") }} element itself, and the >bsp; {{ HTMLElement("table") }} element itself, and the property 
>property {{ cssxref("margin") }} on the {{ HTMLElement("td") }} e>{{ cssxref("margin") }} on the {{ HTMLElement("td") }} element.
>lement. 
n299              <td style="background-color: #E0E0E0; width: 24px;"n299              <td style="width: 24px; background-color: rgb(224, 
>>>224, 224);">
n301              </td>n
302              <td>301              </td>
303                <span style="">above</span>
304              </td>302              <td>
305              <td style="background-color: #E0E0E0; width: 24px;"303                <span>above</span>
>> 
306                &nbsp;
307              </td>
308              <td>304              </td>
309                <span style="">below</span>305              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
310              </td>
311            </tr>
312            <tr>
313              <td style="background-color: #E0E0E0; width: 24px;"
>> 
n315              </td>n
316              <td>307              </td>
317                <span style="">hsides</span>
318              </td>308              <td>
319              <td style="background-color: #E0E0E0; width: 24px;"309                <span>below</span>
>> 
320                &nbsp;
321              </td>
322              <td>310              </td>
323                <span style="">vsides</span>
324              </td>
325            </tr>
326            <tr>311            </tr>
327              <td style="background-color: #E0E0E0; width: 24px;"
>> 
328                &nbsp;
329              </td>312            <tr>
313              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
314                &nbsp;
330              <td>315              </td>
331                <span style="">lhs</span>
332              </td>316              <td>
333              <td style="background-color: #E0E0E0; width: 24px;"317                <span>hsides</span>
>> 
334                &nbsp;
335              </td>
336              <td>318              </td>
337                <span style="">rhs</span>319              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
338              </td>
339            </tr>
340            <tr>
341              <td style="background-color: #E0E0E0; width: 24px;"
>> 
n343              </td>n
344              <td>321              </td>
345                <span style="">border</span>
346              </td>322              <td>
347              <td style="background-color: #E0E0E0; width: 24px;"323                <span>vsides</span>
>> 
348                &nbsp;
349              </td>
350              <td>324              </td>
351                <span style="">box</span>
352              </td>
353            </tr>
354            <tr>325            </tr>
355              <td style="background-color: #E0E0E0; width: 24px;"
>> 
356                &nbsp;
357              </td>326            <tr>
327              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
328                &nbsp;
358              <td>329              </td>
330              <td>
331                <span>lhs</span>
332              </td>
333              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
334                &nbsp;
335              </td>
336              <td>
337                <span>rhs</span>
338              </td>
339            </tr>
340            <tr>
341              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
342                &nbsp;
343              </td>
344              <td>
345                <span>border</span>
346              </td>
347              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
348                &nbsp;
349              </td>
350              <td>
351                <span>box</span>
352              </td>
353            </tr>
354            <tr>
355              <td style="width: 24px; background-color: rgb(224, 
 >224, 224);">
356                &nbsp;
357              </td>
358              <td>
359                <span style="">void</span>359                <span>void</span>
n365          <strong>Usage note:&nbsp;</strong>Do not use this attrin365          <strong>Usage note:&nbsp;</strong>Do not use this attri
>bute, as it has been deprecated: the {{ HTMLElement("table") }} e>bute, as it has been deprecated: the {{ HTMLElement("table") }} e
>lement should be styled using <a href="/en/CSS" title="en/CSS">CS>lement should be styled using <a href="/en/CSS" title="en/CSS">CS
>S</a>. To give a similar effect than the <span style="">frame</sp>S</a>. To give a similar effect than the <span>frame</span> attri
>an> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> p>bute, use the <a href="/en/CSS" title="en/CSS">CSS</a> properties
>roperties {{ cssxref("border-style") }} and {{ cssxref("border-wi> {{ cssxref("border-style") }} and {{ cssxref("border-width") }}.
>dth") }}. 
n377            <span style="">none</span>, which indicates the no run377            <span>none</span>, which indicates the no rules will 
>les will be displayed; it is the default value;>be displayed; it is the default value;
n380            <span style="">groups</span>, which will make the ruln380            <span>groups</span>, which will make the rules to be 
>es to be displayed between row groups (defined by the {{ HTMLElem>displayed between row groups (defined by the {{ HTMLElement("thea
>ent("thead") }}, {{ HTMLElement("tbody") }} and {{ HTMLElement("t>d") }}, {{ HTMLElement("tbody") }} and {{ HTMLElement("tfoot") }}
>foot") }} elements) and between column groups (defined by the {{ > elements) and between column groups (defined by the {{ HTMLEleme
>HTMLElement("col") }} and {{ HTMLElement("colgroup") }} elements)>nt("col") }} and {{ HTMLElement("colgroup") }} elements) only;
> only; 
n383            <span style="">rows</span>, which will make the rulesn383            <span>rows</span>, which will make the rules to be di
> to be displayed between rows;>splayed between rows;
n386            <span style="">columns</span>, which will make the run386            <span>columns</span>, which will make the rules to be
>les to be displayed between columns;> displayed between columns;
t389            <span style="">all</span>, which wil make the rules tt389            <span>all</span>, which wil make the rules to be disp
>o be displayed between rows and columns.>layed between rows and columns.

Back to History