<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 would possibly use a <desk> component to show a timetable, or a product’s pricing construction. Tables show associated content material in a method that’s accessible and simple to grasp at a fast look.
Instance
The HTML <desk> component works with some required and a few elective nested components.
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>
|
Consequence
Browser help
The <desk> tag is supported in all fashionable browsers in addition to many electronic mail shoppers. Learn extra on caniuse.com.
Attributes
The <desk> tag helps World Attributes in HTML. World Attributes are frequent to all HTML components 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 use a wide range of extra HTML components.
Add <caption> for Higher Accessibility
To extend accessibility, strive including a <caption> component instantly after the opening <desk> tag, giving a transparent description of the desk’s function.
The instance above makes use of the CSS caption-side property to place the caption. This may both be high or backside.
The <caption> will assist somebody perceive what content material is being offered and if they need to spend time digesting it. Moreover, the <caption> component offers cues to assistive applied sciences like display readers.
Styling HTML Tables
Tables are inflexible however might be styled to satisfy 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 System Issues
Be taught 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 had been quickly getting used to create layouts for net pages. This was a logical improvement as they permit for columns and nested content material.
Graphics packages equivalent to Adobe Photoshop jumped onboard, growing the slice software, 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 internet aren’t wanted since CSS offers higher options.
