CSS Tables

Welcome to The Coding College! Tables are essential for presenting data in a structured and readable format. With CSS, you can style HTML tables to match your website’s design while improving their usability and aesthetics.

In this guide, we’ll dive into styling tables using CSS, covering borders, spacing, alignment, hover effects, and responsive design.

Basic Structure of an HTML Table

An HTML table is created using <table>, <tr> (rows), <th> (headers), and <td> (cells).

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td>30</td>
        <td>Spain</td>
    </tr>
</table>

Default Appearance of HTML Tables

By default, tables are rendered with:

  • No borders (or basic ones, depending on the browser).
  • No padding or spacing inside cells.
  • Minimal styling for headers.

Let’s use CSS to transform them!

Styling Tables with CSS

1. Adding Borders

table, th, td {
    border: 1px solid black;
    border-collapse: collapse; /* Ensures borders don’t double up */
}

2. Adding Padding and Spacing

th, td {
    padding: 10px;
    text-align: left; /* Align text to the left */
}

3. Styling Table Headers

th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

4. Adding Hover Effects

Highlight rows on hover for better readability:

tr:hover {
    background-color: #f2f2f2;
}

5. Zebra-Striped Rows

Alternate row colors to improve readability:

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:nth-child(odd) {
    background-color: #ffffff;
}

6. Full Table Example

<table class="styled-table">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td>30</td>
        <td>Spain</td>
    </tr>
</table>
.styled-table {
    width: 100%; /* Full width */
    border-collapse: collapse;
}

.styled-table th, .styled-table td {
    border: 1px solid #ddd;
    padding: 12px;
}

.styled-table th {
    background-color: #4CAF50;
    color: white;
    text-align: center;
}

.styled-table tr:hover {
    background-color: #f2f2f2;
}

.styled-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

Advanced Table Styling

1. Aligning Text

td {
    text-align: center; /* Center align text */
    vertical-align: middle; /* Align text vertically */
}

2. Adding Captions

Use <caption> to describe the table:

<table>
    <caption>Employee Data</caption>
    <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Salary</th>
    </tr>
</table>

Style the caption with CSS:

caption {
    caption-side: top; /* Place caption above table */
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

3. Creating a Responsive Table

Wrap tables in a scrollable container for mobile devices:

<div class="table-container">
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>USA</td>
        </tr>
    </table>
</div>
.table-container {
    overflow-x: auto;
    max-width: 100%;
}

Accessibility Tips for Tables

  • Use <thead>, <tbody>, and <tfoot>: Organize your table for better readability. 
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>USA</td>
        </tr>
    </tbody>
</table>
  • Add Scope Attributes: Improve screen reader accessibility.
<th scope="col">Name</th>
<th scope="row">Age</th>
  • Provide Summaries: Use the summary attribute to describe the table’s purpose for screen readers.

Browser Compatibility

CSS table properties, including border-collapse, nth-child, and caption-side, are widely supported in modern browsers. Test your table design across devices for consistent performance.

Conclusion

With CSS, you can transform plain HTML tables into visually appealing and functional components that enhance your website’s usability. Whether you’re styling for data-heavy dashboards or simple content layouts, these techniques will ensure your tables are both attractive and accessible.

For more web development tips and tricks, visit The Coding College.

Design smarter, code better!

Leave a Comment