Part 3 applying styles to tables The HTML for a table is pro

Part 3; applying styles to tables: The HTML for a table is provided below. Put this table on a web page named l3p3.html and create a link to it from your index page. Write a document level style sheet for the page that centers the table (left to right) on the page, uses Verdana, Geneva, Arial, or sans-serif for the font family (in that order), and colors and backgrounds as shown in the image. Note: you will not have to include CSS for borders; you will get white automatically in the cell margins.

Here is the HTML for the table. You will probably want to add class attributes to some of the elements.

I.T. News Disable UPnP g New, Bigger iPhone p Microsoft Office 2013p. 2 Encryption News

Solution

Below is the code for the table which has been listed above:-

The table will appear in the center of the page. While saving the file, name it as l3p3.html.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-color: white;
font-family: Verdana;
align: center;
}
th, td {
padding: 5px;
text-align: left;
}

.myTableStyle {
position:absolute;
top:50%;
left:50%;
}

.odd {
background-color:cyan;
}

.even {
background-color:lime;
}
</style>
</head>
<body>

<table class=\"myTableStyle\">
<tr style=\"color:white; background-color:green\"><th colspan=\"2\"><center>I.T. News</center></th></tr>
<tr class=\"odd\"><td>Disable UPnP</td><td>p. 7</td></tr>
<tr class=\"even\"><td>New, Bigger iPhone</td><td>p. 9</td></tr>
<tr class=\"odd\"><td>Microsoft Office 2013</td><td>p. 2</td></tr>
<tr class=\"even\"><td>Encryption News</td><td>p. 2</td></tr>
</table>

</body>
</html>

Part 3; applying styles to tables: The HTML for a table is provided below. Put this table on a web page named l3p3.html and create a link to it from your index

Get Help Now

Submit a Take Down Notice

Tutor
Tutor: Dr Jack
Most rated tutor on our site