Explore UAB

Colleges & Schools

Dragon Scale Design System Joomla 4 Version

Tables

Examples

Basic

FirstLastHandle
Mark Otto @mdo
Jacob Thornton @fare
Jacob Larry @twitter 

<table class="table">
<thead>
<tr><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fare</td>
</tr>
<tr>
<td>Jacob</td>
<td>Larry</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Primary

FirstLastHandle
Mark Otto @mdo
Jacob Thornton @fare
Otto Larry @twitter 

<table class="table table-primary">
<thead>
<tr><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fare</td>
</tr>
<tr>
<td>Otto</td>
<td>Larry</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Secondary

FirstLastHandle
Mark Otto @mdo
Jacob Thornton @fare
Otto Larry @twitter 

<table class="table table-secondary">
<thead>
<tr><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fare</td>
</tr>
<tr>
<td>Otto</td>
<td>Larry</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Striped

FirstLastHandle
Mark Otto @mdo
Jacob Thornton @fare
Otto Larry @twitter 

<table class="table table-striped">
<thead>
<tr><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fare</td>
</tr>
<tr>
<td>Otto</td>
<td>Larry</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Table with Column and Row Headings

#FirstLastHandle
1 Mark Otto @mdo
2 Jacob Thornton @fare
3 Larry @twitter 

<table class="table">
<thead>
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</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>@fare</td>
</tr>
<tr><th scope="row">3</th>
<td colspan="2">Larry</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Responsive Table - Horizontal Scroll

FirstLastHandleLastLastLastLastLastLast
Mark Otto @mdo Otto Otto Otto Otto Thornton Thornton
Jacob Thornton @fare Thornton Thornton Thornton Thornton Thornton Thornton
Jacob Thornton @fare Thornton Thornton Thornton Thornton Thornton Thornton 

<div class="table-responsive">
<table class="table">
<thead>
<tr><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th><th scope="col">Last</th><th scope="col">Last</th><th scope="col">Last</th><th scope="col">Last</th><th scope="col">Last</th><th scope="col">Last</th></tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Otto</td>
<td>Otto</td>
<td>Otto</td>
<td>Otto</td>
<td>Thornton</td>
<td>Thornton</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fare</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fare</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
<td>Thornton</td>
</tr>
</tbody>
</table>
</div>