Table Styling

Styling HTML tables involves using CSS to enhance their appearance. Here’s a guide to basic table styling with examples:

HTML Structure

First, let’s start with a simple HTML table:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Table Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td>Row 1, Cell 3</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
                <td>Row 2, Cell 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Basic CSS Styling

Add these styles to a styles.css file:

/* General table styling */
table {
    width: 100%;
    border-collapse: collapse; /* Ensures borders are merged */
}

/* Table header styling */
th {
    background-color: #f4f4f4;
    color: #333;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

/* Table data cell styling */
td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Table row styling */
tr:nth-child(even) {
    background-color: #f9f9f9;
}

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

Explanation of CSS Rules

border-collapse: collapse;: Merges table borders into a single border, removing double borders.
background-color: Adds background color to table headers and rows. Alternating row colors improve readability.
padding: Adds space inside table cells for better readability.
border-bottom: Adds a border under table header cells and data cells to separate them visually.
tr:nth-child(even): Applies a background color to even-numbered rows to create a striped effect.
tr:hover: Changes the background color of a row when hovered over to improve user interaction.

Advanced Styling

For more advanced styling, you can use additional CSS properties:

Table borders: Style the borders of the entire table or individual cells.
Text alignment: Align text inside cells (text-align: center;, text-align: right;).
Fonts: Change font properties (e.g., font-family, font-size).
Cell spacing: Adjust space between cells using border-spacing.

Example:

/* Border styling */
table, th, td {
    border: 1px solid #ccc;
}

/* Font styling */
th, td {
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* Cell spacing */
table {
    border-spacing: 5px;
}

With these styles, your HTML table should look polished and visually appealing. Feel free to tweak the styles according to your design preferences!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us