Tables

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
}