Editing Help/Tables (section)

== HTML attributes == <!--T:140-->
</translate>
<translate><!--T:141--> You can add '''HTML attributes''' to tables.</translate>
<translate><!--T:142--> For the authoritative source on HTML attributes, see [<tvar name=url>https://www.w3.org/TR/html401/struct/tables.html</tvar> the W3C's HTML Specification page on tables].</translate>

<translate>
=== Attributes on tables === <!--T:143-->

<!--T:144-->
Placing attributes after the table start tag (<tvar name="1"><code>{|</code></tvar>) applies attributes to the entire table.</translate>

{| style="width:100%"
!style="width:50%"| <translate><!--T:145--> You type</translate>
!style="width:50%"| <translate><!--T:146--> You get</translate>
|-
| style="padding: 5px;"|
<pre>
{| class="wikitable" style="text-align: center; color: green;"
| <translate nowrap><!--T:147--> Orange</translate>
| <translate nowrap><!--T:148--> Apple</translate>
|12,333.00
|-
| <translate nowrap><!--T:149--> Bread</translate>
| <translate nowrap><!--T:150--> Pie</translate>
|500.00
|-
| <translate nowrap><!--T:151--> Butter</translate>
| <translate nowrap><!--T:152--> Ice cream</translate>
|1.00
|}
</pre>
| style="padding: 5px;"|
{| class="wikitable" style="text-align: center; color: green;"
| <translate><!--T:153--> Orange</translate>
| <translate><!--T:154--> Apple</translate>
|12,333.00
|-
| <translate><!--T:155--> Bread</translate>
| <translate><!--T:156--> Pie</translate>
|500.00
|-
| <translate><!--T:157--> Butter</translate>
| <translate><!--T:158--> Ice cream</translate>
|1.00
|}
|}

<translate>
=== Attributes on cells === <!--T:159-->
</translate>
<translate><!--T:160--> You can put attributes on individual '''cells'''.</translate>
<translate><!--T:161--> For example, numbers may look better aligned right.</translate>

{| style="width:100%"
! style="width: 50%;"| <translate><!--T:162--> You type</translate>
! style="width: 50%;"| <translate><!--T:163--> You get</translate>
|-
| style="padding: 5px;"|
<pre>
{| class="wikitable"
| <translate nowrap><!--T:164--> Orange</translate>
| <translate nowrap><!--T:165--> Apple</translate>
| style="text-align:right;" | 12,333.00
|-
| <translate nowrap><!--T:166--> Bread</translate>
| <translate nowrap><!--T:167--> Pie</translate>
| style="text-align:right;" | 500.00
|-
| <translate nowrap><!--T:168--> Butter</translate>
| <translate nowrap><!--T:169--> Ice cream</translate>
| style="text-align:right;" | 1.00
|}
</pre>
| style="padding: 5px;"|
{| class="wikitable"
| <translate><!--T:170--> Orange</translate>
| <translate><!--T:171--> Apple</translate>
| style="text-align:right;" | 12,333.00
|-
| <translate><!--T:172--> Bread</translate>
| <translate><!--T:173--> Pie</translate>
| style="text-align:right;" | 500.00
|-
| <translate><!--T:174--> Butter</translate>
| <translate><!--T:175--> Ice cream</translate>
| style="text-align:right;" | 1.00
|}
|}

<translate><!--T:176--> You can also use '''cell''' attributes when you are listing multiple '''cells''' on a single line.</translate>
<translate><!--T:177--> Note that the '''cells''' are separated by <tvar name="1"><code>||</code></tvar>, and within each '''cell''' the attribute(s) and value are separated by <tvar name="2"><code>|</code></tvar>.</translate>

{| style="width:100%"
! style="width: 50%;"| <translate><!--T:178--> You type</translate>
! style="width: 50%;"| <translate><!--T:179--> You get</translate>
|-
| style="padding: 5px;"|
<pre>
{| class="wikitable"
| <translate nowrap><!--T:180--> Orange</translate> || <translate nowrap><!--T:373--> Apple</translate>     || style="text-align:right;" | 12,333.00
|-
| <translate nowrap><!--T:181--> Bread</translate> || <translate nowrap><!--T:374--> Pie</translate>       || style="text-align:right;" | 500.00
|-
| <translate nowrap><!--T:182--> Butter</translate> || <translate nowrap><!--T:375--> Ice cream</translate> || style="text-align:right;" | 1.00
|}
</pre>
| style="padding: 5px;"|
{| class="wikitable"
| <translate><!--T:183--> Orange</translate> || <translate><!--T:376--> Apple</translate>     || style="text-align:right;" | 12,333.00
|-
| <translate><!--T:184--> Bread</translate> || <translate><!--T:377--> Pie</translate>       || style="text-align:right;" | 500.00
|-
| <translate><!--T:185--> Butter</translate> || <translate><!--T:378--> Ice cream</translate> || style="text-align:right;" | 1.00
|}
|}

<translate>
===Attributes on rows=== <!--T:186-->

<!--T:187-->
You can put attributes on individual '''rows''', too.
</translate>

{| style="width:100%"
! style="width: 50%;"|<translate><!--T:188--> You type</translate>
! style="width: 50%;"|<translate><!--T:189--> You get</translate>
|-
| style="padding: 5px;"|
<pre>
{| class="wikitable"
| <translate nowrap><!--T:190--> Orange</translate>
| <translate nowrap><!--T:191--> Apple</translate>
| style="text-align:right;"| 12,333.00
|-
| <translate nowrap><!--T:192--> Bread</translate>
| <translate nowrap><!--T:193--> Pie</translate>
| style="text-align:right;"| 500.00
|- style="font-style: italic; color: green;"
| <translate nowrap><!--T:194--> Butter</translate>
| <translate nowrap><!--T:195--> Ice cream</translate>
| style="text-align:right;"| 1.00
|}
</pre>
| style="padding: 5px;"|
{| class="wikitable"
| <translate><!--T:196--> Orange</translate>
| <translate><!--T:197--> Apple</translate>
| style="text-align:right;"| 12,333.00
|-
| <translate><!--T:198--> Bread</translate>
| <translate><!--T:199--> Pie</translate>
| style="text-align:right;"| 500.00
|- style="font-style: italic; color: green;"
| <translate><!--T:200--> Butter</translate>
| <translate><!--T:201--> Ice cream</translate>
| style="text-align:right;"| 1.00
|}
|}

<translate>
===Attributes on caption and headers=== <!--T:249-->

<!--T:250-->
Attributes can be added to the caption and headers as follows.
</translate>

{| style="width:100%"
! style="width: 50%;"|<translate><!--T:251--> You type</translate>
! style="width: 50%;"|<translate><!--T:252--> You get</translate>
|-
| style="padding: 5px;"|
<pre>
{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|<translate nowrap><!--T:253--> ''Food complements''</translate>
|-
!style="color:green"| <translate nowrap><!--T:445--> Fruits</translate>
!style="color:red"| <translate nowrap><!--T:446--> Fats</translate>
|-
| <translate nowrap><!--T:254--> Orange</translate>
| <translate nowrap><!--T:258--> Butter</translate>
|-
| <translate nowrap><!--T:256--> Pear</translate>
| <translate nowrap><!--T:257--> Pie</translate>
|-
| <translate nowrap><!--T:255--> Apple</translate>
| <translate nowrap><!--T:259--> Ice cream</translate>
|}
</pre>
|style="padding:5px"|
{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|<translate><!--T:260--> ''Food complements''</translate>
|-
!style="color:green"| <translate><!--T:447--> Fruits</translate>
!style="color:red"| <translate><!--T:448--> Fats</translate>
|-
| <translate><!--T:261--> Orange</translate>
| <translate><!--T:265--> Butter</translate>
|-
| <translate><!--T:263--> Pear</translate>
| <translate><!--T:264--> Pie</translate>
|-
| <translate><!--T:262--> Apple</translate>
| <translate><!--T:266--> Ice cream</translate>
|}
|}

<translate>
===Border width=== <!--T:214-->

<!--T:215-->
If "border-width:" has only one number, it is for all four border sides:
</translate>

{| style="width:100%"
|-
! style="width:50%" | <translate><!--T:216--> You type</translate>
! style="width:50%" | <translate><!--T:217--> You get</translate>
|-
| style="padding: 5px;" |
<pre>
{|style="border-style: solid; border-width: 20px"
|
<translate nowrap><!--T:218--> Hello</translate>
|}
</pre>
| style="padding: 20px;"|
{|style="border-style: solid; border-width: 20px"
|
<translate><!--T:219--> Hello</translate>
|}
|}

<translate>
<!--T:220-->
If "border-width:" has more than one number, the four numbers are for '''top, right, bottom, left (REMEMBER clockwise order <tvar name=clockwise>&uarr;&rarr;&darr;&larr;</tvar>)''':
</translate>

{| style="width:100%"
|-
! style="width:50%" | <translate><!--T:221--> You type</translate>
! style="width:50%" | <translate><!--T:222--> You get</translate>
|-
| style="padding: 5px;" |
<pre>
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
<translate nowrap><!--T:223--> Hello</translate>
|}
</pre>
| style="padding: 20px;"|
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
<translate><!--T:224--> Hello</translate>
|}
|}

<translate>
<!--T:225-->
:When there are fewer than 4 values :
</translate>
:* <translate><!--T:439--> three values i.e. <tvar name=3val><code>top</code>, <code>right</code>, <code>bottom</code></tvar>: then the default value for <tvar name=left><code>left</code></tvar> is the one of <tvar name=right><code>right</code></tvar> (second value). Width is then the same on left and right side.</translate>
:* <translate><!--T:440--> two values i.e. <tvar name=2val><code>top</code>, <code>right</code></tvar>: then the default value for <tvar name=bottom><code>bottom</code></tvar> is the one of <tvar name=top><code>top</code></tvar> (first value), and <tvar name=left><code>left</code></tvar> by default is assigned the value of <tvar name=right><code>right</code></tvar> (second value). Width on top is then the same as on bottom; width on left is the same as on right.</translate>
:* <translate><!--T:441--> one value i.e. <tvar name=1val><code>top</code></tvar>: then the default value for <tvar name=right><code>right</code></tvar> is the one of <tvar name=top><code>top</code></tvar> and it is the same for <tvar name=bottom><code>bottom</code></tvar> and <tvar name=left><code>left</code></tvar>. The fourth width are the same and build a regular border. This is a writing shortcut.</translate>

<translate>
<!--T:226-->
Another method to define the widths of the four sides of a cell is to use ''"border-left", "border-right", "border-top" and "border-bottom"'':
</translate>
<div style="width: 100%; overflow:auto;">
{| style="width:100%"
|-
! style="width:50%" | <translate><!--T:227--> You type</translate>
! style="width:50%" | <translate><!--T:228--> You get</translate>
|-
| style="padding: 5px;" |
<pre>
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black; margin:auto"
|
<translate nowrap><!--T:229--> Hello</translate>
|}
</pre>
| style="padding: 20px;"|
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black; margin:auto"
|
<translate><!--T:230--> Hello</translate>
|}
|}
</div>

{{Note|1=<nowiki/>
<translate><!--T:231--> The HTML attributes (such as "width=", "border=", "cellspacing=", "cellpadding=") do not need any length unit (the pixel unit is assumed).</translate>
<translate><!--T:414--> They are also invalid in HTML 5.</translate>

<translate><!--T:438--> "Cellpadding" is for setting the space between the cell wall and the cell content.</translate><ref>
[https://developer.mozilla.org/Web/HTML/Reference/Elements/table#cellpadding HTML table cellpadding Attribute]
</ref>

<translate>
<!--T:232-->
The CSS style properties (which override the HTML attributes) require an explicit length unit (if the value is not 0) such as "px" for the pixel.</translate>
}}

<translate>
===With HTML attributes and CSS styles=== <!--T:233-->

<!--T:234-->
<tvar name="1"></tvar> style attributes can be added with or without other HTML attributes.
</translate>

{| style="width:100%"
!style="width:50%"| <translate><!--T:235--> You type</translate>
!style="width:50%"| <translate><!--T:236--> You get</translate>
|-
|style="padding:5px"|
<pre>
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
| <translate nowrap><!--T:237--> Orange</translate>
| <translate nowrap><!--T:238--> Apple</translate>
|-
| <translate nowrap><!--T:239--> Bread</translate>
| <translate nowrap><!--T:240--> Pie</translate>
|-
| <translate nowrap><!--T:241--> Butter</translate>
| <translate nowrap><!--T:242--> Ice cream</translate>
|}
</pre>
|style="padding:5px"|
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
| <translate><!--T:243--> Orange</translate>
| <translate><!--T:244--> Apple</translate>
|-
| <translate><!--T:245--> Bread</translate>
| <translate><!--T:246--> Pie</translate>
|-
| <translate><!--T:247--> Butter</translate>
| <translate><!--T:248--> Ice cream</translate>
|}
|}

<translate>
===Padding=== <!--T:442-->
</translate>
<translate><!--T:461--> It represents the internal margin between the contents and the border of the cell.</translate>
{| style="width:100%;"
! style="width: 50%;"| <translate><!--T:443--> You type</translate>
! style="width: 50%;"| <translate><!--T:444--> You get</translate>
|-style="vertical-align:top"
| style="padding:10px" |
<pre>
{|class=wikitable
| style="padding: 10px" | <translate nowrap><!--T:428--> Example of <tvar name=1>style="padding:10px"</tvar></translate>
|-
| style="padding: 50px" | <translate nowrap><!--T:429--> Example of <tvar name=1>style="padding:50px"</tvar></translate><br/><br/><translate nowrap><!--T:430--> Specify the padding on '''EACH CELL'''</translate>
|-
| style="padding:100px" | <translate nowrap><!--T:431--> Example of <tvar name=1>style="padding:100px"</tvar></translate>
|}
</pre>
|
{|class=wikitable
| style="padding: 10px" | <translate><!--T:432--> Example of <tvar name=1>style="padding:10px"</tvar></translate>
|-
| style="padding: 50px" | <translate><!--T:433--> Example of <tvar name=1>style="padding:50px"</tvar></translate><br/><br/><translate><!--T:434--> Specify the padding on '''EACH CELL'''</translate>
|-
| style="padding:100px" | <translate><!--T:435--> Example of <tvar name=1>style="padding:100px"</tvar></translate>
|}
|}

<translate>
===Column width=== <!--T:267-->

<!--T:268-->
'''Column width''' can be added as follows.

<!--T:269-->
You type:
</translate>

<pre>
{| class="wikitable" style="width: 85%;"
| colspan="2" | <translate nowrap><!--T:270--> This column width is 85% of the screen width</translate>
|-
| style="width: 30%"| <translate nowrap><!--T:271--> '''This column is 30% counted from 85% of the screen width'''</translate>
| style="width: 70%"| <translate nowrap><!--T:272--> '''This column is 70% counted from 85% of the screen width'''</translate>
|}
</pre>

<translate>
<!--T:273-->
You get:</translate>
{| class="wikitable" style="width: 85%;"
| colspan="2" | <translate><!--T:274--> This column width is 85% of the screen width</translate>
|-
| style="width: 30%"| <translate><!--T:275--> '''This column is 30% counted from 85% of the screen width'''</translate>
| style="width: 70%"| <translate><!--T:276--> '''This column is 70% counted from 85% of the screen width'''</translate>
|}

<translate>
===Accessibility of table header cells=== <!--T:277-->
</translate>
<translate><!--T:278--> Table header cells do not explicitly specify which table data cells they apply to (those on their right on the same row, or those below them on the same column).</translate>
<translate><!--T:279--> When the table is rendered in a visual 2D environment, this is usually easy to infer.</translate>

<translate><!--T:280--> However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells.</translate>
<translate><!--T:281--> In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:</translate>

{| style="width:100%"
! style="width: 50%;"|<translate><!--T:282--> You type</translate>
! style="width: 50%;"|<translate><!--T:283--> You get</translate>
|-
| style="padding: 5px;"|
<pre>
{| class="wikitable"
|-
! scope="col"| <translate nowrap><!--T:284--> Item</translate>
! scope="col"| <translate nowrap><!--T:285--> Quantity</translate>
! scope="col"| <translate nowrap><!--T:286--> Price</translate>
|-
! scope="row"| <translate nowrap><!--T:287--> Bread</translate>
| 0.3 kg
| $0.65
|-
! scope="row"| <translate nowrap><!--T:288--> Butter</translate>
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| <translate nowrap><!--T:289--> Total</translate>
| $1.90
|}
</pre>
| style="padding: 5px;"|
{| class="wikitable"
|-
! scope="col"| <translate><!--T:290--> Item</translate>
! scope="col"| <translate><!--T:291--> Quantity</translate>
! scope="col"| <translate><!--T:292--> Price</translate>
|-
! scope="row"| <translate><!--T:293--> Bread</translate>
| 0.3 kg
| $0.65
|-
! scope="row"| <translate><!--T:294--> Butter</translate>
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| <translate><!--T:295--> Total</translate>
| $1.90
|}
|}

<translate>