<desk> is an HTML component that shows knowledge in tabular format. HTML tables use rows and columns to make knowledge and relationships straightforward to interpret.
You may use a <desk> component to show a timetable, or a product’s pricing construction. Tables show associated content material in a approach that’s accessible and simple to know at a fast look.
Instance
The HTML <desk> component works with some required and a few optionally available nested parts.
Syntax
1 |
<desk>
|
2 |
<thead>
|
3 |
<th>First title</th> |
4 |
<th>Final title</th> |
5 |
<th>Occupation</th> |
6 |
</thead>
|
7 |
<tbody>
|
8 |
<tr>
|
9 |
<td>John</td> |
10 |
<td>Doe</td> |
11 |
<td>Scientist</td> |
12 |
</tr>
|
13 |
<tr>
|
14 |
<td>Jane</td> |
15 |
<td>Doe</td> |
16 |
<td>Net Developer</td> |
17 |
</tr>
|
18 |
</tbody>
|
19 |
</desk>
|
End result
Browser help
The <desk> tag is supported in all trendy browsers in addition to many e-mail shoppers. Learn extra on caniuse.com.
Attributes
The <desk> tag helps World Attributes in HTML. World Attributes are widespread to all HTML parts and can be utilized on all of them (although they might not have a lot of an impact on a few of them).
Content material
Inside tables you should utilize quite a lot of extra HTML parts.
Add <caption> for Higher Accessibility
To extend accessibility, attempt including a <caption> component instantly after the opening <desk> tag, giving a transparent description of the desk’s objective.
The instance above makes use of the CSS caption-side property to place the caption. This could both be high or backside.
The <caption> will assist somebody perceive what content material is being introduced and if they need to spend time digesting it. Moreover, the <caption> component supplies cues to assistive applied sciences like display readers.
Styling HTML Tables
Tables are inflexible however may be styled to fulfill most wants. CSS properties that is likely to be helpful in styling a <desk> component embody width, border, border-style, border-color, border-width, border-collapse, border-spacing, margin, padding, text-align, and vertical-align.
Cell Gadget Concerns
Study Extra
<desk> was a relative latecomer to HTML, solely being launched to the spec in January 1997.After their introduction to the HTML spec, tables have been quickly getting used to create layouts for internet pages. This was a logical improvement as they permit for columns and nested content material.
Graphics packages corresponding to Adobe Photoshop jumped onboard, growing the slice device, which allowed designs to be “sliced” up and exported in items, able to be reassembled in desk cells.
While all this was incorrect use of the <desk> component, there have been no structure options on the time. These days, table-based layouts on the net aren’t wanted since CSS supplies higher options.
