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.

Terms Disclaimer About Us Contact Us