Scroll to top

How to create stylist table in html and css?

Popular table design with hover effect

<html>
<head>
<style>
.container{
margin:auto;
width:80%;
}

.main-row{
width:20%;
float:left;
background-color:#f1f1f1;
text-align:center;
padding:10px 0px;;


}
.col-2{
width:20%;
float:left;
text-align:center;
padding:10px 0px;
border-bottom:1px solid #f1f1f1;

}

.row{

 width:100%;
 float:left;
  border-bottom:1px solid #f1f1f1;
}

.row:hover{

 width:100%;
 float:left;
 background-color:#f1f1f1;
}

a.link {
    color:black;
}

</style>
</head>
<body>
<div class=”container”>
<div class=”main”>

<div class=”main-row”>Name</a></div>

<div class=”main-row”>City</div>

<div class=”main-row”>Class</div>

<div class=”main-row “>Roll no.</div>

<div class=”main-row “>Friend</div>

</div>


<div class=”row”>
<a   href=”#” class=”link”>

<div class=”col-2″>Jaspreet singh</div>

<div class=”col-2″>Sangrur</div>

<div class=”col-2″>+2</div>

<div class=”col-2 “>20</div>

<div class=”col-2 “>harpreet</div>


</a>
</div>
<div class=”row”>
<a   href=”#” class=”link”>

<div class=”col-2″>Jaspreet singh</div>

<div class=”col-2″>Sangrur</div>

<div class=”col-2″>+2</div>

<div class=”col-2 “>20</div>

<div class=”col-2 “>harpreet</div>


</a>
</div>
<div class=”row”>
<a   href=”#” class=”link”>

<div class=”col-2″>Jaspreet singh</div>

<div class=”col-2″>Sangrur</div>

<div class=”col-2″>+2</div>

<div class=”col-2 “>20</div>

<div class=”col-2 “>harpreet</div>


</a>
</div>
<div class=”row”>
<a   href=”#” class=”link”>

<div class=”col-2″>Jaspreet singh</div>

<div class=”col-2″>Sangrur</div>

<div class=”col-2″>+2</div>

<div class=”col-2 “>20</div>

<div class=”col-2 “>harpreet</div>


</a>
</div>

</div>

</html>

Leave a Reply

Your email address will not be published.