How to Style a Table with CSS

Author:

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

Tables are an essential part of web design for displaying data in a structured format. By styling a table using CSS, you can make it visually appealing, easier to read, and more interactive. In this tutorial, you’ll learn how to style a basic HTML table using CSS.

Development Steps

  1. Create Basic HTML Table Structure: Set up a basic table with headings and data.
  2. Style the Table with CSS: Use CSS to enhance the appearance of the table by adding borders, background colors, padding, and hover effects.
  3. Add Advanced Styling: Make the table more interactive by adding features like zebra stripes, hover effects, and responsive styles.

Step 1: Create a Basic HTML Table Structure

We’ll begin by creating a simple HTML table structure. The table will have a header with columns for Name, Age, and Email, and a few rows of data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Table</title>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="styled-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>ananya@example.com</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>rohan@example.com</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>meera@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Explanation:

  • The table has a thead for table headers (Name, Age, Email) and a tbody for rows of data.
  • We will now use CSS to style this table and make it visually appealing.

Step 2: Style the Table with CSS

Now, we’ll use CSS to style the table by adding borders, padding, background colors, and other properties to improve its appearance.

<head>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Step 2: Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #3498db;
            color: white;
        }

        td {
            border-bottom: 1px solid #ddd;
        }

        /* Add zebra stripes */
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Add hover effect */
        tbody tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>

Explanation:

  • Table Layout: The table element is styled to take up 100% of the container width. The border-collapse: collapse property removes the space between the table cells.
  • Padding: th and td have padding to make the content easier to read.
  • Header Styling: th is styled with a blue background and white text.
  • Borders and Zebra Stripes: Each row has a bottom border, and zebra stripes are added using nth-child(even) to alternate row background colors.
  • Hover Effect: A hover effect is applied to table rows for better interactivity.

Step 3: Add Advanced Styling

Now we’ll enhance the table with a few more features, such as rounded corners, responsive styles, and more polished hover effects.

<head>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #3498db;
            color: white;
        }

        td {
            border-bottom: 1px solid #ddd;
        }

        /* Zebra stripes for table rows */
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Hover effect for table rows */
        tbody tr:hover {
            background-color: #f1f1f1;
        }

        /* Responsive table styles */
        @media (max-width: 768px) {
            .table-container {
                width: 100%;
                margin: 0;
                box-shadow: none;
            }

            th, td {
                padding: 10px;
                font-size: 14px;
            }
        }
    </style>
</head>

Explanation:

  • Responsive Styles: The @media query ensures that the table adapts to smaller screen sizes by reducing padding and font size.
  • Rounded Corners: The table-container div has border-radius: 8px to give the table rounded corners, making it visually softer.
  • Shadow and Overflow: A shadow is added to the table-container for a floating effect, and overflow: hidden ensures that the shadow and borders remain clean.

Complete Example

Here is the full HTML and CSS code for a responsive and styled 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</title>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #3498db;
            color: white;
        }

        td {
            border-bottom: 1px solid #ddd;
        }

        /* Zebra stripes for table rows */
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Hover effect for table rows */
        tbody tr:hover {
            background-color: #f1f1f1;
        }

        /* Responsive table styles */
        @media (max-width: 768px) {
            .table-container {
                width: 100%;
                margin: 0;
                box-shadow: none;
            }

            th, td {
                padding: 10px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="styled-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>ananya@example.com</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>rohan@example.com</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>meera@example.com</td>
                </tr>
            </tbody>
        </

table>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this guide, you learned how to style a table using CSS. You applied borders, background colors, zebra stripes, and hover effects to create an attractive, readable table. You also added responsive styles to ensure that the table adapts to smaller screen sizes. This type of table can be used for displaying any structured data, such as user information or product listings.

Comments

Post a Comment

Leave Comment

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel

Subscribe to my YouTube Channel (165K+ subscribers):
Java Guides Channel

Top 10 My Udemy Courses with Huge Discount:
Udemy Courses - Ramesh Fadatare