css3.html

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task-8</title>
    <style>
        .main{
            border-style: solid;
            border-width: 1px;
            border: 0px 1px 0px 1px;
            border-bottom: 0px;
            border-color: gainsboro;
        }
        th{
            font-weight: bold;
            font-family: sans-serif;
            font-size: 12px;
            color: whitesmoke;
            padding-left: 6px;
        }
        td{
            font-family:cursive;
            padding-left: 6px;
            font-size: 12px;
            color: black;
        }
        .title-bar{
            background-color: rgb(18, 163, 107);
            height: 30px;
            text-align: left;
            width: 300px;
        }
        .odd-row{
            background-color: gainsboro;
            height: 28px;
        }
        .even-row{
            background-color: whitesmoke;
            height: 28px;
        }
    </style>
</head>
<body style="display: flex;align-items: center;justify-content: center;">
    <table class="main" border="0" cellspacing="0" width="800px">
        <tbody><tr class="title-bar">
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>

        <tr class="odd-row">
            <td>Alfreds Futterkiste</td>
            <td>Maria Andres</td>
            <td>Germany</td>
        </tr>

        <tr class="even-row">
            <td>Berglunds snabbkop</td>
            <td>Chirstina Berglund</td>
            <td>Swedoon</td>
        </tr>

        <tr class="odd-row">
            <td>Centro commercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>

        <tr class="even-row">
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>

        <tr class="odd-row">
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>UK</td>
        </tr>

        <tr class="even-row">
            <td>Koniglich Essen</td>
            <td>Philip Cramer</td>
            <td>Germany</td>
        </tr>

        <tr class="odd-row">
            <td>Laughing Bachhus Winecellars</td>
            <td>Yoshi Tannamuri</td>
            <td>Cannada</td>
        </tr>

        <tr class="even-row">
            <td>Magazzini Alimentari Riuniti</td>
            <td>Glovanni Rovelli</td>
            <td>Italy</td>
        </tr>
    </tbody></table>

</body></html>