W3.CSS — Tables

Basic Table

<table class="w3-table w3-striped w3-bordered">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
        <td>London</td>
    </tr>
</table>

Table Styles

<!-- Striped rows -->
<table class="w3-table w3-striped">
    <tr><th>Header</th></tr>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
</table>

<!-- Bordered table -->
<table class="w3-table w3-bordered">
    <tr><th>Header</th></tr>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
</table>

<!-- Hover effect -->
<table class="w3-table w3-hoverable">
    <tr><th>Header</th></tr>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
</table>

Table Colors

<table class="w3-table w3-striped">
    <tr class="w3-blue">
        <th>Blue Header</th>
    </tr>
    <tr>
        <td>Row 1</td>
    </tr>
    <tr class="w3-light-green">
        <td>Green Row</td>
    </tr>
</table>

Responsive Table

<div style="overflow-x:auto;">
    <table class="w3-table w3-striped w3-bordered">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
            <th>Country</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
            <td>USA</td>
            <td>john@example.com</td>
        </tr>
    </table>
</div>

Table Examples

<!-- Data table -->
<table class="w3-table w3-striped w3-bordered w3-hoverable">
    <tr class="w3-dark-grey">
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>$999</td>
        <td><span class="w3-tag w3-green">In Stock</span></td>
    </tr>
    <tr>
        <td>Phone</td>
        <td>$699</td>
        <td><span class="w3-tag w3-red">Out of Stock</span></td>
    </tr>
</table>

Mini Practice

Create HTML code that:

1. Creates a basic table
2. Adds striped rows
3. Creates a table with hover effect
4. Uses table with different colors

Up Next

Next: Learn about W3.CSS Lists.