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:
Tansica Sun
2018-11-18 14:15:12 -08:00
committed by Huyen Nguyen
parent b92b49efb6
commit f48810ca93

View File

@ -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>