Subscribe

Making table by using html and css

Making table by using html and css

Anil Shrestha's photo
Anil Shrestha
Feb 16, 2025·

1 min read

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        table,th,td{
            border:2px solid black;
            border-collapse:collapse;
            padding:8px;
            text-align:center;
            margin:auto;
            font-family:cursive;
        }
        th{
            font-family:arial;
            background:green;
        }
        tr:nth-child(even){
            background-color:rgb(182, 222 ,289);
            color:blue;
            font-weight:800px;
        }
        tr:nth-child(odd):hover{
            background-color:rgb(182, 222 ,289);
            color:red;
            font-weight:800px;
        }
        </style>
<table>
    <tr>
        <th>Head</th>
        <th>Head</th>
        <th>Head</th>
        <th>Head</th>
        <th>Head</th>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>s
</table>


 </table>
</body>
</html>