User HTML Table Styling :

Styling HTML tables can be achieved using CSS (Cascading Style Sheets). Here are some common CSS properties and techniques for styling tables:

Basic Table Styling:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 20px 0;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }
</style>

<table>
    <!-- table content goes here -->
</table>

Explanation:

• border-collapse: collapse;  : This property ensures that adjacent table borders are collapsed into a single border, creating a cleaner look.
• border: 1px solid #ddd; : Sets a 1-pixel solid border around each table cell (`<th>` and `<td>`).
• padding: 8px; : Adds padding inside each cell for better spacing.
• text-align: left; : Aligns text to the left within cells.
• background-color: #f2f2f2; : Adds a background color to header cells for better differentiation.

 Alternating Row Colors:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 20px 0;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>

<table>
    <!-- table content goes here -->
</table>

The tr:nth-child(even) selector targets every even row and applies a background color to create alternating row colors.

Hover Effect:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 20px 0;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

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

<table>
    <!-- table content goes here -->
</table>

The tr:hover selector adds a background color when a user hovers over a table row.

Responsive Table:

For smaller screens, consider making the table responsive:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 20px 0;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    @media (max-width: 600px) {
        th, td {
            display: block;
            width: 100%;
        }
    }
</style>

<table>
    <!-- table content goes here -->
</table>

In this example, on screens with a width of 600 pixels or less, the table cells will be displayed as block elements, making the table more suitable for smaller screens.