CSS Table Style

Welcome to The Coding College! Tables play an essential role in web design, allowing you to present data in an organized and visually appealing way. By leveraging CSS, you can style your tables to enhance readability and align them with the overall aesthetic of your website.

In this guide, we’ll explore how to style tables using CSS properties such as borders, background colors, hover effects, and more.

Basic Table Styling

To start, use the border-collapse property to ensure your table cells share a common border for a cleaner look:

table {
    border-collapse: collapse; /* Combine adjacent borders */
    width: 100%;               /* Full-width table */
}
th, td {
    border: 1px solid #ddd;    /* Light gray border */
    padding: 10px;             /* Add space inside cells */
    text-align: left;          /* Left-align content */
}

Adding a Header Background

Highlight the header row for better differentiation:

th {
    background-color: #4CAF50; /* Green background */
    color: white;              /* White text */
    font-weight: bold;         /* Make the text bold */
}

Adding Row Stripes

Use alternating row colors for a striped effect to improve readability:

tr:nth-child(even) {
    background-color: #f9f9f9; /* Light gray for even rows */
}
tr:nth-child(odd) {
    background-color: #fff; /* White for odd rows */
}

Table Borders

1. Simple Borders

Add a border to all table elements:

table, th, td {
    border: 1px solid #ddd; /* Add light gray borders */
}

2. Styled Borders

Add thicker or customized borders:

table {
    border: 2px solid #333; /* Add a bold, dark border */
    border-radius: 8px;     /* Round the table corners */
}

Hover Effects

Make your tables interactive with hover effects:

tr:hover {
    background-color: #f1f1f1; /* Highlight the row on hover */
    cursor: pointer;           /* Change cursor to pointer */
}

Adding Table Captions

Use the <caption> element to add a title to your table, then style it:

<table>
    <caption>Monthly Sales Data</caption>
    <tr>
        <th>Month</th>
        <th>Sales</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$10,000</td>
    </tr>
</table>

caption {
    caption-side: top;       /* Position above the table */
    font-size: 1.2em;        /* Slightly larger font */
    font-weight: bold;       /* Bold text */
    margin-bottom: 10px;     /* Space between caption and table */
}

Responsive Table Styling

1. Make Tables Scrollable

For smaller screens, allow horizontal scrolling:

<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 {
    max-width: 100%;
    overflow-x: auto; /* Allow horizontal scrolling */
}

2. Adjust Font Size with Media Queries

Optimize table font size for smaller screens:

@media (max-width: 600px) {
    table {
        font-size: 14px; /* Reduce font size */
    }
}

Example: Fully Styled Table

<table class="styled-table">
    <caption>Employee Performance Report</caption>
    <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Performance</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>Sales</td>
        <td>Excellent</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>Marketing</td>
        <td>Good</td>
    </tr>
    <tr>
        <td>Sam Wilson</td>
        <td>HR</td>
        <td>Average</td>
    </tr>
</table>
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 18px;
    width: 80%;
    border: 2px solid #4CAF50; /* Bold green border */
}

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

.styled-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

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

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

Accessibility Tips

  1. Add Scope Attributes: Use scope="col" or scope="row" in <th> elements for accessibility.
  2. Responsive Adjustments: Ensure tables remain usable on all devices.
  3. Clear Table Headings: Include meaningful <th> labels to help users understand data.

Conclusion

By applying CSS styles, you can transform plain HTML tables into visually appealing and user-friendly elements on your website. From hover effects to responsive designs, CSS makes it easy to customize every aspect of your table.

Explore more CSS tutorials and design tips at The Coding College.

Stylize your tables and enhance user experience!

Leave a Comment