Styling a Table - Exercise

Contact Us or call 1-877-932-8228
Styling a Table - Exercise

Styling a Table

Duration: 30 to 40 minutes.

In this exercise you will style an employee timecard. The HTML already exists and there are some CSS settings for the page, but you must write all the CSS for the table itself.

  1. Open StylingTables/Exercises/Timecard.html in your editor.
  2. Add CSS to make the table appear like the one below:
  3. The colors used are listed below:
    1. Darker orange (caption background and horizontal borders): #f79646
    2. Lighter orange (background of thead and tbody even rows): #fde9d9
    3. Darker gray (tfoot background): #687886
    4. Lighter gray (vertical borders): #ccc
    5. White (font color in caption and tfoot): #fff

Solution:

StylingTables/Solutions/Timecard.html

---- C O D E   O M I T T E D ----
<style type="text/css">
body {
	background-color: #f6f6ff;
	font-family: Calibri, Myriad;
}

#main {
	width: 780px;
	padding: 20px;
	margin: auto;
}

table.timecard {
	margin: auto;
	width: 600px;
	border-collapse: collapse;
	border: 1px solid #fff; /*for older IE*/
	border-style: hidden;
}

table.timecard caption {
	background-color: #f79646;
	color: #fff;
	font-size: x-large;
	font-weight: bold;
	letter-spacing: .3em;
}

table.timecard thead th {
	padding: 8px;
	background-color: #fde9d9;
	font-size: large;
}

table.timecard thead th#thDay {
	width: 40%;	
}

table.timecard thead th#thRegular, table.timecard thead th#thOvertime, table.timecard thead th#thTotal {
	width: 20%;
}

table.timecard th, table.timecard td {
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #f79646 #ccc;
}

table.timecard td {
	text-align: right;
}

table.timecard tbody th {
	text-align: left;
	font-weight: normal;
}

table.timecard tfoot {
	font-weight: bold;
	font-size: large;
	background-color: #687886;
	color: #fff;
}

table.timecard tr.even {
	background-color: #fde9d9;
}
</style>
---- C O D E   O M I T T E D ----

Next