#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    6
    Rep 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>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    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.

IMN logo majestic logo threadwatch logo seochat tools logo