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
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
horizontal
Creates a row focused table.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
bordered
Applies inner borders to table.
Hello, I'm caption
# 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.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
borderless
Remove all borders.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
center
Horizontally center all cells.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
fluid
Adjusts width relative to parent element.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
Markup

Toggle example guides Toggle HTML 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>