Create Table Using HTML with CSS styles
output :
This table created by using HTML with CSS styles. This
table contains students records and background color with blue. If we put the cursor on table row, that row color
automatically changes to “yellow “.
Here we have 7 rows in this table. I kept the cursor on 4 row, that 4th
row changed to “yellow” color. This
table is easy to understand and with simple code.
code :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/*this is for when you click on that row that will be changes*/
tbody tr:hover{
color: dodgerblue;
background-color: yellow;
}
h2{
color: fuchsia;
font-family:fantasy;
}
thead{
color:white;
background-color: orchid;
}
tbody{
background-color: lightblue;
}
</style>
</head>
<body>
<center>
<h2>Students Record</h2>
<table border="1">
<thead>
<tr>
<th>S.No</th>
<th>Student Name</th>
<th>Roll Number</th>
<th>Branch</th>
<th>Gender</th>
<th>Phone Number</th>
<th>Tuition Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Narendar</td>
<td>08UR1A1214</td>
<td>IT</td>
<td>Male</td>
<td>8008569767</td>
<td>30,000</td>
</tr>
<tr>
<td>2</td>
<td>Pradeep</td>
<td>08UR1A1242</td>
<td>IT</td>
<td>Male</td>
<td>8008569767</td>
<td>30,000</td>
</tr>
<tr>
<td>3</td>
<td>Harideep</td>
<td>08UR1A1235</td>
<td>CSE</td>
<td>Male</td>
<td>8008569767</td>
<td>35,000</td>
</tr>
<tr>
<td>4</td>
<td>Archana</td>
<td>08UR1A1235</td>
<td>IT</td>
<td>Female</td>
<td>8008569767</td>
<td>30,000</td>
</tr>
<tr>
<td>5</td>
<td>Rachana</td>
<td>08UR1A1235</td>
<td>CSE</td>
<td>Female</td>
<td>8008569767</td>
<td>35,000</td>
</tr>
<tr>
<td>6</td>
<td>Upendar</td>
<td>08UR1A1201</td>
<td>EEE</td>
<td>Male</td>
<td>8008569767</td>
<td>40,000</td>
</tr>
<tr>
<td>7</td>
<td>Joythi</td>
<td>08UR1A1235</td>
<td>ECE</td>
<td>Female</td>
<td>8008569767</td>
<td>35,000</td>
</tr>
</tbody>
</table>
<h2>Thank you For Visit </h2>
</center>
</body>
</html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/*this is for when you click on that row that will be changes*/
tbody tr:hover{
color: dodgerblue;
background-color: yellow;
}
h2{
color: fuchsia;
font-family:fantasy;
}
thead{
color:white;
background-color: orchid;
}
tbody{
background-color: lightblue;
}
</style>
</head>
<body>
<center>
<h2>Students Record</h2>
<table border="1">
<thead>
<tr>
<th>S.No</th>
<th>Student Name</th>
<th>Roll Number</th>
<th>Branch</th>
<th>Gender</th>
<th>Phone Number</th>
<th>Tuition Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Narendar</td>
<td>08UR1A1214</td>
<td>IT</td>
<td>Male</td>
<td>8008569767</td>
<td>30,000</td>
</tr>
<tr>
<td>2</td>
<td>Pradeep</td>
<td>08UR1A1242</td>
<td>IT</td>
<td>Male</td>
<td>8008569767</td>
<td>30,000</td>
</tr>
<tr>
<td>3</td>
<td>Harideep</td>
<td>08UR1A1235</td>
<td>CSE</td>
<td>Male</td>
<td>8008569767</td>
<td>35,000</td>
</tr>
<tr>
<td>4</td>
<td>Archana</td>
<td>08UR1A1235</td>
<td>IT</td>
<td>Female</td>
<td>8008569767</td>
<td>30,000</td>
</tr>
<tr>
<td>5</td>
<td>Rachana</td>
<td>08UR1A1235</td>
<td>CSE</td>
<td>Female</td>
<td>8008569767</td>
<td>35,000</td>
</tr>
<tr>
<td>6</td>
<td>Upendar</td>
<td>08UR1A1201</td>
<td>EEE</td>
<td>Male</td>
<td>8008569767</td>
<td>40,000</td>
</tr>
<tr>
<td>7</td>
<td>Joythi</td>
<td>08UR1A1235</td>
<td>ECE</td>
<td>Female</td>
<td>8008569767</td>
<td>35,000</td>
</tr>
</tbody>
</table>
<h2>Thank you For Visit </h2>
</center>
</body>
</html>
output :
No comments:
Post a Comment