The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Styling Tables

Next ►
►

In this lesson, we will explore how to style HTML tables to make them more visually appealing and easier to read. Styling tables involves using CSS (Cascading Style Sheets) to apply various styles to the table elements. We will cover the following topics:

  1. Basic Table Styling
  2. Styling Table Borders
  3. Styling Table Headers and Footers
  4. Styling Table Rows and Columns
  5. Adding Hover Effects

  1. Basic Table Styling

To style a table, you can use CSS to apply styles to the <table>, <tr>, <th>, and <td> elements. Here is an example of basic table styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Table Styling</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Los Angeles</td>
        </tr>
    </table>
</body>
</html>

Explanation:

  • table { width: 100%; border-collapse: collapse; }: Sets the table width to 100% and collapses the borders.
  • th, td { padding: 10px; text-align: left; }: Adds padding to table cells and aligns text to the left.
  • th { background-color: #f2f2f2; }: Sets a background color for table headers.

  1. Styling Table Borders

You can add borders to your table to make it more structured. Here is an example:

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

Explanation:

  • table, th, td { border: 1px solid black; }: Adds a solid black border to the table, headers, and cells.

  1. Styling Table Headers and Footers

You can style the table headers and footers separately to differentiate them from the rest of the table:

<style>
    thead {
        background-color: #4CAF50;
        color: white;
    }
    tfoot {
        background-color: #f2f2f2;
        font-weight: bold;
    }
</style>

Explanation:

  • thead { background-color: #4CAF50; color: white; }: Sets a green background and white text color for the table header.
  • tfoot { background-color: #f2f2f2; font-weight: bold; }: Sets a light gray background and bold text for the table footer.

  1. Styling Table Rows and Columns

You can apply styles to specific rows and columns to highlight them:

<style>
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    td:nth-child(2) {
        text-align: center;
    }
</style>

Explanation:

  • tr:nth-child(even) { background-color: #f2f2f2; }: Applies a light gray background to even rows.
  • td:nth-child(2) { text-align: center; }: Centers the text in the second column.

  1. Adding Hover Effects

Adding hover effects can enhance the user experience by highlighting rows when the mouse hovers over them:

<style>
    tr:hover {
        background-color: #ddd;
    }
</style>

Explanation:

  • tr:hover { background-color: #ddd; }: Changes the background color of a row to light gray when the mouse hovers over it.

Practical Exercise

Exercise: Create a styled table with the following specifications:

  • The table should have a width of 80%.
  • Add borders to the table, headers, and cells.
  • Apply padding of 15px to the cells.
  • Set the header background color to blue and text color to white.
  • Alternate row colors between white and light gray.
  • Center the text in the second column.
  • Add a hover effect to change the row background color to light blue.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Table Exercise</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 15px;
        }
        th {
            background-color: blue;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        td:nth-child(2) {
            text-align: center;
        }
        tr:hover {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Sam Johnson</td>
                <td>40</td>
                <td>Chicago</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Conclusion

In this lesson, we learned how to style HTML tables using CSS. We covered basic table styling, adding borders, styling headers and footers, styling rows and columns, and adding hover effects. By applying these techniques, you can create visually appealing and easy-to-read tables for your web pages.

Next, we will move on to Module 5: HTML Forms, where we will learn how to create and style forms in HTML.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved