Question

How to set different colors to HTML table header and rows in CSS

Answer 1

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, th, td {
                border: 1px solid lightcoral;
                border-collapse: collapse;
                width: 20%;
            }
            #table_id tr:nth-child(even) {
                background-color: lightgray;
            }
            #table_id tr:nth-child(odd) {
                background-color: white;
            }
            #table_id th {
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>

        <table id="table_id">
            <tr>
                <th>Name</th>
                <th>Language</th>
            </tr>
            <tr>
                <td>Fox</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>Angelina</td>
                <td>JavaScript</td>
            </tr>
            <tr>
                <td>Borat</td>
                <td>HTML</td>
            </tr>
            <tr>
                <td>Mr. Bean</td>
                <td>CSS</td>
            </tr>
        </table>

    </body>
</html>

 

70+ SQL courses for beginners and professionals