HTML5 Basics–Practice 13

This practice in continuation to the practices HTML5 Basics–Practice 11 and HTML5 Basics–Practice 12. We can add style in one more way to our tables. We can give an id to each table and define different properties for those tables. The id should not be only numeric.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Ninth Page</title>
<style>
table, th, td
{
border: 1px solid green;
border-collapse: collapse;
}
th, td
{
padding: 15 px;
text-align: center;
}

table#t1 th
{
background-color: blue;
}

table#t2 th
{
color: red;
}

table#t2 tr:nth-child(even)
{
background-color: #f8c471;
}

table#t2 tr:nth-child(odd)
{
background-color: #abebc6 ;
}
</style>
</head>
<body>
<table id=”t1″>
<tr>
<th>S.No.
<th>Name
</tr>
<tr>
<td>1.
<td>Spriha
</tr>
<tr>
<td>2.
<td>Ankush
</tr>
<tr>
<td>3.
<td>Ritika
</tr>
<tr>
<td>4.
<td>Mohit
</tr>
</table>
<br>
<table id=”t2″>
<tr>
<th>S.No.
<th>Name
</tr>
<tr>
<td>1.
<td>Spriha
</tr>
<tr>
<td>2.
<td>Ankush
</tr>
<tr>
<td>3.
<td>Ritika
</tr>
<tr>
<td>4.
<td>Mohit
</tr>
</table>
</body>
</html>

Output:

Capture21

In the following part of the code, we have defined common properties for all the tables:

table, th, td
{
border: 1px solid green;
border-collapse: collapse;
}
th, td
{
padding: 15 px;
text-align: center;
}

We created two tables with ids t1 and t2. To give a background color to the header of t1, we added the following in the style statement:

table#t1 th
{
background-color: blue;
}

In t2, we have set font color of the header as red using the following code:

table#t2 th
{
color: red;
}

Also, we have set the background color of odd rows as #abebc6 and even rows as #f8c471 using the following code:

table#t2 tr:nth-child(even)
{
background-color: #f8c471;
}

table#t2 tr:nth-child(odd)
{
background-color: #abebc6 ;
}

Try using different permutations and combinations and check if we can have multiple headers in a table.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s