Proper table formating with <thead> and <tbody> (#21605)
* Proper table formating with <thead> and <tbody> * Edit table headers and fix indentation
This commit is contained in:
committed by
Huyen Nguyen
parent
b92b49efb6
commit
f48810ca93
@ -8,27 +8,59 @@ The `<table>` tag allows you to display a table on your webpage.
|
||||
### Example
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Row 1, Cell 1</td>
|
||||
<td>Row 1, Cell 2</td>
|
||||
<th>Full Name</th>
|
||||
<th>Job Role</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sherlock Holmes</td>
|
||||
<td>Detective</td>
|
||||
<td>London</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Row 2, Cell 1</td>
|
||||
<td>Row 2, Cell 2</td>
|
||||
<td>Harry Potter</td>
|
||||
<td>Wizard</td>
|
||||
<td>Godric's Hollow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Winnie the Pooh</td>
|
||||
<td>Honey Taster</td>
|
||||
<td>Five Hundred Acre Wood</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
This code block would produce the following output:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Row 1, Cell 1</td>
|
||||
<td>Row 1, Cell 2</td>
|
||||
<th>Full Name</th>
|
||||
<th>Job Role</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sherlock Holmes</td>
|
||||
<td>Detective</td>
|
||||
<td>London</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Row 2, Cell 1</td>
|
||||
<td>Row 2, Cell 2</td>
|
||||
<td>Harry Potter</td>
|
||||
<td>Wizard</td>
|
||||
<td>Godric's Hollow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Winnie the Pooh</td>
|
||||
<td>Honey Taster</td>
|
||||
<td>Five Hundred Acre Wood</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user