Alternative Colored table using HTML and CSS only.

-

HTML for Table




 <!DOCTYPE html>

 <html>

   <head>

     <title>Colored Table | HTML</title>

    <link rel="stylesheet"  type =" text/css" href="style.css">

   </head>

   <body>

     <table id="a">

       <tr>

         <th>id</th>

         <th>Name</th>

         <th>roll</th>

         <th>class</th>

       </tr>

       <tr>

         <td>1</td>

         <td>ram</td>

         <td>3</td>

         <td>six</td>

       </tr>

       <tr>

         <td>1</td>

         <td>ram</td>

         <td>3</td>

         <td>six</td>

       <tr>

         <td>1</td>

         <td>ram</td>

         <td>3</td>

         <td>six</td>

       </tr>

       <tr>

         <td>1</td>

         <td>ram</td>

         <td>3</td>

         <td>six</td>

       </tr>

     </table>

     

     <br>

    </p>

     <!--copyright sign  css entity-->

     <h2>copyright2019</h2>

     

   </body>

 </html>


Style File for colors


<!------style.css file------>

   #a {

     width: 100%;

     padding: 300px;

     border: 5px solid gray;

     table-layout:

   }


   table:hover {}


   th,

   td {

     border: 1px solid black;

     text-align: center;

     height: 60px;

   }


   tr:nth-child(2n) {

     background-color: pink;

   }


   tr:nth-child(2n+1) {

     background-color: coral;

   }


   #a th {

     background-color: green;

   }


   #a tr:nth-child(5) {

     background-color: purple;

   }


 


Feel free to comment if any queries. Don't hesitate. It might be late later.

 


Comments

Post a Comment

Popular posts from this blog

Basic Calculator with HTML and JS

-
Image
HTML for Basic Calculator <!DOCTYPE html> < html > < head > < title > </ title > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" type = "text/css" href = " style.css" >        < link r el = "stylesheet" ref = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < h2 > Basic Cal...
Read more

Percentage Calculator using html and Javascript

-
Percentage Calculator <!DOCTYPE html> < html > < head > < title > js form </ title > < link rel = "stylesheet" type = "text/css" href = "new\html\jstry.css" > </ head > < body > < form form name = "form" id = "aa" > < div > < label > Name </ label > </ div > < input type = "text" name = "name" id = "name" > < div > < label > Class </ label > </ div > < input type = "number" name = "" id = "Class" > < div > < label > Roll no. </ label > </ div > < input type = "text" name = "" id = "roll" > < div > < la...
Read more
-
Image
Creating a table using HTML (using Rowspan and Colspan)                                       Expected Output Table <!DOCTYPE html> < html > < head > < title > Table </ title > </ head > < body > < div > < table width = "1000px" cellpadding = "10" cellspacing = "0" border = "2" > < tr > < th colspan = "5" > SURKHET MODEL COLLEGE </ th > </ tr > < tr > < th colspan = "5" > Faculty of Management </ th > </ tr > < tr > < td rowspan = "4" > Detail of student </ td > < td > S.N </ td > < td >N ame </ td > < td > Roll no. ...
Read more