Outside border on my schedule & other needed touches

Dev Shed Forums Sponsor:

November 29th, 2012, 08:57 PM

xod_s

Registered User

Join Date: Oct 2012

Posts: 6

Time spent in forums: 1 h 13 m 19 sec
Reputation Power: 0

Outside border on my schedule & other needed touches

I am nearly done this schedule I've been told to make except for a few things that are off from how it's suppose to look like.The words Saturday and Sunday should be at the top along with it still requiring closer padding,thicker outside borders and for some reason the top didn't change green like the rest.

I think I've followed what I was said to do like...
-having an outside border of 2px, #305704
-having an inside borders of 1px, #305704
-Set an appropriate padding dimension so the table looks similar to the image above
-Collapse the borders (is the problem stemming from here `~` ? )
-Use the <th> element for the headings
-To center the table horizontally, set the table width, plus appropriate left and right margins. (text-align: center will not work with tables)

I don't think I properly set the appropriate aligment so the days of the week are at the top of the cell by having CSS class,apply it to the appropriate cells to do this b/c that isn't the effect so my guess is the in file style is sort of off.

This is what I got so far

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN>
<!"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
   <script src = "modernizr-1.5.js"></script>
  
</head>
<style>
table {border: 2px #305704; }
td{border:1 px solid #305704;padding 0 1% 1% 5%;}
 
</style>
 
<p><center><strong><font size="5">Family Reunion Schedule</font></strong><center></p>
 
<body>
<div id="schedule">
 
<table border="1" cellpadding="15">
 
<tr>
 
<th>Day</th>
<th>Time</th>
<th>Activity</th>
</tr>
 
<tr>
<td rowspan="7">Saturday</td>
</tr>
 
<tr>
<td>8am-9am</td>
 
<td>Welcome breakfast</td>
</tr>
 
<tr>
<td>9am-11am</td>
 
<td>Games for kids</td>
</tr>
 
<tr>
<td>11am-1pm</td>
 
<td>Lunch</td>
</tr>
 
<tr>
<td>1pm-5pm</td>
 
<td>Craft Table and Video</td>
</tr>
 
<tr>
<td>5pm-7pm</td>
 
<td>Dinner</td>
</tr>
 
<tr>
<td>7pm-9pm</td>
 
<td>Video viewing</td>
</tr>
 
 
<tr>
<td rowspan="5">Sunday</td>
</tr>
 
<tr>
<td>8am-9am</td>
 
<td>Breakfast</td>
 
</tr>
 
<tr>
<td>9am-11am</td>
 
<td>Story telling</td>
</tr>
 
<tr>
<td>11am-1pm</td>
 
 
<td>Lunch</td>
 
</tr>
 
<tr>
<td>1pm-5pm</td>
 
<td>Craft Table and Family history research</td>
 
</tr>
 
<tr>
<td colspan="7"><center>Group Photos</center></td>
</tr>
 
 
</table>
 
</div>
 
<div id="contactform">
<form> </form>
 
<tr>
<td>
 
</td>
</tr>
 
</div>
 
</body>
 
</html>

November 30th, 2012, 09:31 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 52 m 24 sec
Reputation Power: 7

I cleaned up your code and validated it.

Try this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

h1 
{
	width: 30%;
	border: 1px solid black;
	text-align: center;
	margin: 10px auto;
}
	
table
{
	width: 70%;
	border: 2px solid #305704;
	padding: 2%;
	margin: auto;
}

th 
{
	padding: 1%;
}

td
{
	border: 1px solid #305704;
	padding: 1%;
}

.day 
{
	
}
 
	  
</style>

<script type="text/javascript" src="jquery-1.8.3.js"></script>

</head>

<body>

<h1>Family Reunion Schedule</h1>

<div id="schedule">
 
<table border="1">
<tr>
	<th>Day</th>
	<th>Time</th>
	<th>Activity</th>
</tr>
 
<tr class="day">
	<td rowspan="7">Saturday</td>
</tr>
	<tr>
		<td>8am-9am</td>
		<td>Welcome breakfast</td>
	</tr>
	
	<tr>
		<td>9am-11am</td>
		<td>Games for kids</td>
	</tr>
	
	<tr>
		<td>11am-1pm</td>
		<td>Lunch</td>
	</tr>
	
	<tr>
		<td>1pm-5pm</td>
		<td>Craft Table and Video</td>
	</tr>
	
	<tr>
		<td>5pm-7pm</td>
		<td>Dinner</td>
	</tr>
	
	<tr>
		<td>7pm-9pm</td>
		<td>Video viewing</td>
	</tr>

<tr>
	<td rowspan="5" class="day">Sunday</td>
</tr>
 
	<tr>
		<td>8am-9am</td> 
		<td>Breakfast</td>
	</tr>
 
	<tr>
		<td>9am-11am</td>
		<td>Story telling</td>
	</tr>
 
	<tr>
		<td>11am-1pm</td>
		<td>Lunch</td>
	</tr>
 
	<tr>
		<td>1pm-5pm</td>
		<td>Craft Table and Family history research</td>
	</tr>
 
	<tr>
		<td colspan="7">Group Photos</td>
	</tr>
</table>
 
</div>
 
<div id="contactform">

	<form action=""> 
	
	</form>

	<table>
		<tr>
			<td></td>
		</tr>
	</table>
	
</div>

</body>
</html>

PS - Can't get the weekday to display at the top of the cell.

Hope this helps.

Regards,

NM.

Outside border on my schedule & other needed touches

Developer Shed Advertisers and Affiliates