CSS Tables

Tables are a powerful tool for presenting data in a structured format on web pages. With CSS (Cascading Style Sheets), you can style tables to improve their readability, appearance, and responsiveness. In this guide, we’ll explore how to style tables using CSS, covering table borders, table size, table alignment, table style, and table responsiveness.

Table Borders:

Table borders help distinguish the cells and structure of a table. You can customize the borders of the entire table, rows, and cells using CSS.

Basic Table with Borders:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Header 1	Header 2
Data 1	Data 2

CSS for Table Borders:

table {
    border-collapse: collapse; /* Collapse adjacent borders */
    width: 100%; /* Full-width table */
}

th, td {
    border: 1px solid black; /* Solid black border */
    padding: 8px; /* Padding inside cells */
}

Table Size:

You can control the size of tables to fit the content or the layout of your web page.

CSS for Table Size:

table {
    width: 100%; /* Full-width table */
    max-width: 600px; /* Maximum width */
}

th, td {
    width: 50%; /* Equal column width */
}

Table Alignment:

Aligning the table and its contents can enhance readability and aesthetics. You can align the table itself and the text within cells.

CSS for Table Alignment:

/* Center-align the table */
table {
    margin-left: auto;
    margin-right: auto;
}

/* Center-align text within cells */
th, td {
    text-align: center;
    vertical-align: middle; /* Vertical center alignment */
}

Table Style:

Styling tables involves adding background colors, hover effects, and other design elements to make them visually appealing.

CSS for Table Style:

/* Add background color to table headers */
th {
    background-color: #f2f2f2;
}

/* Add hover effect for table rows */
tr:hover {
    background-color: #f5f5f5;
}

/* Add alternating row colors */
tr:nth-child(even) {
    background-color: #f9f9f9;
}

Table Responsive:

Making tables responsive ensures they look good on all devices, from desktops to smartphones. This often involves using CSS to adjust the layout and possibly hiding less critical columns on smaller screens.

Responsive Table Example:

<div class="table-responsive">
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
    </table>
</div>

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3

CSS for Responsive Table:

/* Ensure the table container allows horizontal scrolling */
.table-responsive {
    overflow-x: auto;
}

/* Basic table styling */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block; /* Make table elements block-level */
    }

    th {
        display: none; /* Hide table headers */
    }

    td {
        position: relative;
        padding-left: 50%;
    }

    td::before {
        content: attr(data-label); /* Add data-label attribute to each td */
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 10px;
        font-weight: bold;
    }
}

Example of Adding data-label Attribute:

<tr>
    <td data-label="Header 1">Data 1</td>
    <td data-label="Header 2">Data 2</td>
    <td data-label="Header 3">Data 3</td>
</tr>

Conclusion:

Styling tables with CSS enhances the presentation and usability of tabular data on your website. By understanding and applying various CSS properties for table borders, size, alignment, style, and responsiveness, you can create tables that are both functional and visually appealing. Experiment with different styles and techniques to make your tables stand out and improve the overall user experience.