Tables show tabular data in columns and rows. They should never be used for layout.
Here are two basic tables you may use.
Bordered Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | mdo |
2 | Jacob | Thornton | thr |
3 | Larry | Byrd | brd |
Borderless Table
Title | Description | Year |
---|---|---|
Declaration of Independence | Statement adopted by the Continental Congress declaring independence from the British Empire. | 1776 |
Bill of Rights | The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. | 1791 |
Declaration of Sentiments | A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. | 1848 |
Emancipation Proclamation | An executive order granting freedom to slaves in designated southern states. | 1863 |
Resources
Code
<table class="table-bordered">
<thead class="thead-default">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>thr</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>Byrd</td>
<td>brd</td>
</tr>
</tbody>
</table>
<h6>Borderless Table</h6>
<table>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Declaration of Independence</th>
<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
<td>1776</td>
</tr>
<tr>
<th scope="row">Bill of Rights</th>
<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
<td>1791</td>
</tr>
<tr>
<th scope="row">Declaration of Sentiments</th>
<td>A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
<td>1848</td>
</tr>
<tr>
<th scope="row">Emancipation Proclamation</th>
<td>An executive order granting freedom to slaves in designated southern states.</td>
<td>1863</td>
</tr>
</tbody>
</table>
CSS
.table-striped > tbody > tr:nth-child(2n + 1) > td,
.table-striped > tbody > tr:nth-child(2n + 1) > th {
background-color: #fff;
}
.table-striped > tbody > tr:nth-child(2n) > td,
.table-striped > tbody > tr:nth-child(2n) > th {
background-color: #f1f1f1;
}
.table-bordered {
border: 1px solid #ddd
}