Table

An arrangement of data in rows and columns

Usage

Add table class to <table> tag.

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
<section>
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
        </tbody>
    </table>
</section>

Appearance

Sizes

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
<section>
    <table class="table width-1/1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
        </tbody>
    </table>
</section>
NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
<section>
    <table class="table table-larger width-1/1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
        </tbody>
    </table>
</section>

Alternate styles

Striped

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja DoeJa.doe@email.comTaiwan
<section>
    <table class="table table-striped width-1/1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>Ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
        </tbody>
    </table>
</section>

Divider

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
<section>
    <table class="table table-divider width-1/1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
        </tbody>
    </table>
</section>

Striped with divider

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
<section>
    <table class="table table-striped table-divider width-1/1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
        </tbody>
    </table>
</section>

Overflow

Horizontally

NameEmailPhone numberGenderBirthdayAddressCountry
John Doejohn.doe@email.com+1 393 342 563MaleDecember, 2 1978St. Malaka 46thSingapore
Jane Doejane.doe@email.com+1 485 384 349FemaleJune, 20 1988St. Jordan 6th, Small village 1stCanada
Jo Doejo.doe@email.com+1 888 736 029MaleAugust, 20 2000St. Ir. Soekarno, Menteng 2ndIndonesia
Ja Doeja.doe@email.com+1 456 039 923FemaleJanuary, 1 2021St. Shin shen, Dura apartment 2nd floorTaiwan
<section class="overflow-auto text-nowrap">
    <table class="table table-divider width-1/1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Gender</th>
                <th>Birthday</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Male</td>
                <td>December, 20 1981</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Female</td>
                <td>June, 20 1988</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Male</td>
                <td>August, 20 2000</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Female</td>
                <td>January, 1 2021</td>
                <td>Taiwan</td>
            </tr>
        </tbody>
    </table>
</section>

Vertically with head freezing

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
Jin Doejin.doe@email.comUnited States
Jun Doejun.doe@email.comMalaysia
Jean Doejean.doe@email.comGermany
<section class="overflow-auto height-small">
    <table class="table table-sticky-vertically width-1/1">
        <thead>
            <tr>
                <th class="background-color-background-light">Name</th>
                <th class="background-color-background-light">Email</th>
                <th class="background-color-background-light">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td>Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
            <tr>
                <td>Jin Doe</td>
                <td>jin.doe@email.com</td>
                <td>United States</td>
            </tr>
            <tr>
                <td>Jun Doe</td>
                <td>jun.doe@email.com</td>
                <td>Malaysia</td>
            </tr>
            <tr>
                <td>Jean Doe</td>
                <td>jean.doe@email.com</td>
                <td>Germany</td>
            </tr>
        </tbody>
    </table>
</section>

Horizontally with first column freezing

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
<section class="overflow-auto width-large">
    <table class="table table-sticky-horizontally width-xlarge">
        <thead>
            <tr>
                <th class="background-color-background-light">Name</th>
                <th class="background-color-background-light">Email</th>
                <th class="background-color-background-light">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="background-color-background-light">John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td class="background-color-background-light">Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
        </tbody>
    </table>
</section>

Vertically and horizontally with head and first column freezing

NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
Jin Doejin.doe@email.comUnited States
Jun Doejun.doe@email.comMalaysia
Jean Doejean.doe@email.comGermany
<section class="overflow-auto height-small width-large">
    <table class="table table-sticky-vertically table-sticky-horizontally width-xlarge">
        <thead>
            <tr>
                <th class="background-color-background-light">Name</th>
                <th class="background-color-background-light">Email</th>
                <th class="background-color-background-light">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="background-color-background-light">John Doe</td>
                <td>john.doe@email.com</td>
                <td>Singapore</td>
            </tr>
            <tr>
                <td class="background-color-background-light">Jane Doe</td>
                <td>jane.doe@email.com</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td class="background-color-background-light">Jo Doe</td>
                <td>jo.doe@email.com</td>
                <td>Indonesia</td>
            </tr>
            <tr>
                <td class="background-color-background-light">Ja Doe</td>
                <td>ja.doe@email.com</td>
                <td>Taiwan</td>
            </tr>
            <tr>
                <td class="background-color-background-light">Jin Doe</td>
                <td>jin.doe@email.com</td>
                <td>United States</td>
            </tr>
            <tr>
                <td class="background-color-background-light">Jun Doe</td>
                <td>jun.doe@email.com</td>
                <td>Malaysia</td>
            </tr>
            <tr>
                <td class="background-color-background-light">Jean Doe</td>
                <td>jean.doe@email.com</td>
                <td>Germany</td>
            </tr>
        </tbody>
    </table>
</section>

More examples

In figure

Figure 1. How to define persons for dummy purpose
NameEmailCountry
John Doejohn.doe@email.comSingapore
Jane Doejane.doe@email.comCanada
Jo Doejo.doe@email.comIndonesia
Ja Doeja.doe@email.comTaiwan
<section>
    <figure>
        <figcaption>Figure 1. How to define persons for dummy purpose</figcaption>
        <table class="table width-1/1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>john.doe@email.com</td>
                    <td>Singapore</td>
                </tr>
                <tr>
                    <td>Jane Doe</td>
                    <td>jane.doe@email.com</td>
                    <td>Canada</td>
                </tr>
                <tr>
                    <td>Jo Doe</td>
                    <td>jo.doe@email.com</td>
                    <td>Indonesia</td>
                </tr>
                <tr>
                    <td>Ja Doe</td>
                    <td>ja.doe@email.com</td>
                    <td>Taiwan</td>
                </tr>
            </tbody>
        </table>
    </figure>
</section>

Variables

Coming soon

Table of contents