Skip to Main Content

Elements: Tables

Shows what elements look like within LibGuides and our current CSS. Intended audience: UofL Libraries web content providers.

Accessible Table

Shelly's Daughters (class="table")
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

HTML

<table class="table">
<caption>Shelly's Daughters (class="table")</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>
 

Accessible Table bordered

Shelley's Daughters (class="table table-bordered")
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

HTML

<table class="table table-bordered">
<caption>Shelley's Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>

Accessible Table striped

Shelley's Daughters (class="table table-striped")
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

HTML

<table class="table table-striped">
<caption>Shelley's Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>