Tables
Apply simple and clean styles to tables by using the pam-Table
attribute.
There are a number of basic modifiers that can be used such as striped
, bordered
and fluid
.
Default styling
# | Title | Rating | Year |
---|---|---|---|
1 | Swordfish | 10 | 2001 |
2 | WarGames | 9.0 | 1983 |
3 | Sneakers | 8.9 | 1992 |
horizontal
Creates a row focused table.
# | Title | Rating | Year |
---|---|---|---|
1 | Swordfish | 10 | 2001 |
2 | WarGames | 9.0 | 1983 |
3 | Sneakers | 8.9 | 1992 |
bordered
Applies inner borders to table.
# | Title | Rating | Year |
---|---|---|---|
1 | Swordfish | 10 | 2001 |
2 | WarGames | 9.0 | 1983 |
3 | Sneakers | 8.9 | 1992 |
striped
Exactly as it sounds, a striped table.
# | Title | Rating | Year |
---|---|---|---|
1 | Swordfish | 10 | 2001 |
2 | WarGames | 9.0 | 1983 |
3 | Sneakers | 8.9 | 1992 |
borderless
Remove all borders.
# | Title | Rating | Year |
---|---|---|---|
1 | Swordfish | 10 | 2001 |
2 | WarGames | 9.0 | 1983 |
3 | Sneakers | 8.9 | 1992 |
center
Horizontally center all cells.
# | Title | Rating | Year |
---|---|---|---|
1 | Swordfish | 10 | 2001 |
2 | WarGames | 9.0 | 1983 |
3 | Sneakers | 8.9 | 1992 |
fluid
Adjusts width relative to parent element.
# | Title | Rating | Year |
---|---|---|---|
1 | Swordfish | 10 | 2001 |
2 | WarGames | 9.0 | 1983 |
3 | Sneakers | 8.9 | 1992 |
Markup
<table pam-Table="[modifier]">
<caption>Hello, I'm caption</caption>
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Rating</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Swordfish</td>
<td>10</td>
<td>2001</td>
</tr>
<tr>
<td>2</td>
<td>WarGames</td>
<td>9.0</td>
<td>1983</td>
</tr>
<tr>
<td>3</td>
<td>Sneakers</td>
<td>8.9</td>
<td>1992</td>
</tr>
</tbody>
</table>