HTML/CSS code to create table with 5 rows and 3 columns. Even no. of rows display in green color and odd no. of rows display in blue color

HTML/CSS code to create table with 5 rows and 3 columns. Even no. of rows display in green color and odd no. of rows display in blue color

21:24
Practical : 6
Subject : Web Technology
Aim : Write HTML/CSS code to create table with 5 rows and 3 columns. Even no. of rows display in green color and odd no. of rows display in blue color.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style type="text/css">
table,tr,td,th {border: 1px solid black;text-align: center;}
tr.blue {background: blue;}
tr.green {background: green;}
</style>
</head>
<body>
<table>

 <tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
</tr>

 <tr class="blue">
<td>Fred</td>
<td>fred@megacorp.com</td>
<td>123456</td>
</tr>

 <tr class="green">
<td>Jon</td>
<td>jon@megacorp.com</td>
<td>234567</td>
</tr>

 <tr class="blue">
<td>Bill</td>
<td>bill@megacorp.com</td>
<td>345678</td>
</tr>

 <tr class="green">
<td>Jane</td>
<td>jane@megacorp.com</td>
<td>777444</td>
</tr>

 <tr class="blue">
<td>Alison</td>
<td>alison@megacorp.com</td>
<td>888652</td>
</tr>
</table>
</body>
</html>


Output:

Next
« Prev Post
Previous
Next Post »

1 comments:

Write comments
Subscribe to: Post Comments (Atom)

Ads