CSS Tables

CSS provides various properties to style HTML tables, making them more attractive and readable.

1. Basic Table Styling

You can use basic CSS properties to style tables, such as border, padding, and background-color.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>

<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    border: 1px solid #ddd;
}
th {
    background-color: #f2f2f2;
}
</style>

2. Zebra Striped Table

Adding alternating row colors, known as “zebra striping,” improves readability.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>

<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    border: 1px solid #ddd;
}
th {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
</style>

3. Hoverable Table

You can add a hover effect to rows for better interactivity.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>

<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    border: 1px solid #ddd;
}
th {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #f1f1f1;
}
</style>

4. Responsive Table

Making tables responsive involves adding a container with overflow properties to allow horizontal scrolling on small screens.

<div style="overflow-x:auto;">
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Occupation</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>30</td>
            <td>Engineer</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>25</td>
            <td>Designer</td>
        </tr>
    </table>
</div>

<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    border: 1px solid #ddd;
}
th {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #f1f1f1;
}
</style>

Conclusion

Using CSS, you can enhance the appearance and usability of HTML tables. By applying different styles, you can make tables more readable and interactive.