How to Create a Table

 HTML/CSS Website

Table1

 <html>


<body>


<head>


<style>


body {


  background-image: url("siddikur1.jpeg");


  background-color:;


  font-family: courier, serif;


  font-size: 20px;


  }




.str-table{


border-collapse: collapse;


  margin: 25px 0;


  font-size: 0.9em;


  min-width: 400px;


  border-radius: 10px 10px 0 0;


  overflow: hidden;


  box-shadow: 0 0 20px rgba(0, 0, 0, 5);


}




.str-table thead tr {


background-color: #009879;


  color: #ffffff;


  text-align: left;


  font-weight: bold;

}


.str-table thead tr:hover.siddikurbhola{background-color:#990066;


color:orange}




.str-table th,


.str-table td{ 


padding: 12px 15px;


}




.str-table tbody tr{


border-bottom: 1px solid #dddddd;}




.str-table tbody tr:nth-of-type(even) {


  background-color: #D6EEEE;


}




.str-table tbody tr:last-of-type {


hover-bottom:2 px solid #009879;


border-bottom: 2px solid #009879;


}


.str-table tbody tr.rayhan-row {


 font-weight: bold;


 color: #009879;}


 


tr:hover{


 background-color:#ffff99;


 color:purple;


 }


th, td {


  border-style:solid;


  border-color: #96D4D4;


}


</style>


</head>



<div style="overflow-x: auto;">

<table class="str-table" border ="1" cellspacing="15">


<thead>


      <tr class="siddikurbhola">


         <th>Rank</th>


         <th>Name</th>


         <th>Points</th>


         <th>Team</th>


      </tr>


   </thead>


   <tbody>


      <tr>


         <td>01</td>


         <td>Siddikur Rahman</td>


         <td>2022</td>


         <td>🇧🇩Bangladesh</td>


      </tr>


      <tr>


         <td>02</td>


         <td>Tamim</td>


         <td>2008</td>


         <td>🇦🇿 Azerbaijan</td>


      </tr>


      <tr class="rayhan-row">


         <td>03</td>


         <td>Rafik</td>


         <td>2006</td>


         <td>🇵🇰 Pakistan</td>


      </tr>


      <tr>


      <td>04</td>


      <td>Naim</td>


      <td>1800</td>


      <td>🇮🇷 Iran</td>


      </tr>


      


      <tr>


      <td>05</td>


      <td>Abdur Rahman</td>


      <td>1750</td>


      <td>🇹🇷 Turkey </td>


      </tr>


      


      <tr>


      <td>06</td>


      <td>Shamim</td>


      <td>1700</td>


      <td>Country Name</td>


      </tr>


      


      <tr>


      <td>07</td>


      <td>Shamim</td>


      <td>1750</td>


      <td>🇹🇷 Turkey </td>


      </tr>


      


      <tr>


      <td>08</td>


      <td>Shamim</td>


      <td>1750</td>


      <td>🇹🇷 Turkey </td>


      </tr>


      


      <tr>


      <td>09</td>


      <td>Shamim</td>


      <td>1750</td>


      <td>🇹🇷 Turkey </td>


      </tr>


      


      <tr>


      <td>10</td>


      <td>Shamim</td>


      <td>1750</td>


      <td>🇹🇷 Turkey </td>


      </tr>


      <tr class="rayhan-row">


     <b><td  align="center" colspan="4" >Players from countries that have been eliminated


     </td>


     </b>


     </tr>


     <tr>


     <td>11</td>


     <td></td>


     <td></td>


     <td></td>


     </tr>


     <tr>


     <td>12</td>


     <td></td>


     <td> </td>


     <td></td>


     </tr>


     <tr>


     <td>13</td>


     <td></td>


     <td> </td>


     <td></td>


     </tr>


     <tr>


     <td>14</td>


     <td></td>


     <td> </td>


     <td></td>


     </tr>


     <tr>


     <td>15</td>


     <td></td>


     <td> </td>


     <td></td>


     </tr>


   </tbody>




</table>


</div>


<h1><marquee behavior="scroll" direction="left" onmousehover="this.stop();" onmouseover="this.stop();" onmouseout="this.start();">This Table Was made By <a href="https://facebook.com/str.bhola"> 'Siddikur Rahman Rayhan'</a> </marquee></h1>


</body>


</html>


Preview HTML/CSS Website Table1
Rank Name Points Team
01 Siddikur Rahman 2022 🇧🇩Bangladesh
02 Tamim 2008 🇦🇿 Azerbaijan
03 Rafik 2006 🇵🇰 Pakistan
04 Naim 1800 🇮🇷 Iran
05 Abdur Rahman 1750 🇹🇷 Turkey
06 Shamim 1700 Country Name
07 Shamim 1750 🇹🇷 Turkey
08 Shamim 1750 🇹🇷 Turkey
09 Shamim 1750 🇹🇷 Turkey
10 Shamim 1750 🇹🇷 Turkey
Players from countries that have been eliminated
11
12
13
14
15





This Table Was made By 'Siddikur Rahman Rayhan'

Post a Comment (0)
Previous Post Next Post