table HTML problem

Discussion in 'Web Design & Programming' started by blade, Oct 9, 2006.

  1. blade

    blade GEEK 2.0

    Likes Received:
    0
    Trophy Points:
    0
    I have two tables created on one page.
    The problem is that the 2nd table keeps going to the right of the 1st table, instead of going below it. I'm not sure what the problem is, hope someone can help out, here is the html code...

    HTML:
    <html>
    <head>
    <title>School Schedule</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
    <!--
    body {
    	background-image: url(images/scarface.jpg);
    }
    .style2 {color: #FF0000}
    .style5 {color: #FFFFFF}
    .style9 {color: #FFFFFF; font-weight: bold; }
    .style10 {
    	color: #000000;
    	font-weight: bold;
    }
    .style11 {color: #000000}
    .style12 {color: #FF0000; font-weight: bold; }
    -->
    </style></head>
    <body>
    <h1 align="left" class="style2"><a name="top"><font face="Verdana, Arial, Sans-serif"><strong>School Schedule</strong></font></a></h1>
    <h2 align="left" class="style12"><font face="Verdana, Arial, Sans-serif">Fall 2006</font></a></h2>
    <table width="500" align="left" cellpadding="4" border="1">
    	<tbody>
    	<tr>
    		<td>&nbsp;</td>
    		<td colspan="5"><span class="style9">Weekday Schedule</span></td>
    		<td colspan="2"><span class="style5"><strong>Weekend</strong></span></td>
    	</tr>
    	<tr bgcolor="white">
    		<td><span class="style10">Time</span></td>
    		<td><span class="style11"><strong>Monday</strong></span></td>
    		<td><span class="style11"><strong>Tuesday</strong></span></td>
    		<td><span class="style11"><strong>Wednesday</strong></span></td>
    		<td><span class="style11"><strong>Thursday</strong></span></td>
    		<td><span class="style11"><strong>Friday</strong></span></td>
    		<td bgcolor="white"><span class="style11"><strong>Saturday</strong></span></td>
    		<td bgcolor="white"><span class="style11"><strong>Sunday</strong></span></td>
    	</tr>
    	<tr>
    		<td><span class="style9">A.M</span></td>
    		<td><span class="style5">Proect Managment<br />
    	    9:30-11:00 </span>
    	  <hr />
    	  <span class="style5">Web Design<br />
    	  11:00-12:30</span></td>
    		<td><span class="style5">E-Sales<br />
    	    8:00-9:30 </span>
    	    <hr />
    	    <span class="style5">Operations<br />
    	    11:00-12:30</span></td>
    		<td><span class="style5">Operations<br />
    	    8:00-9:30 </span>
    	    <hr />
    	    <span class="style5">Web Design<br />
    	    9:30-11:00</span></td>
    		<td><span class="style5">E-Commerce<br />
    	    11:00-12:30</span></td>
    		<td rowspan="2"><span class="style5">No Classes</span></td>
    		<td rowspan="2"><span class="style5">No Classes</span></td>
    		<td rowspan="2"><span class="style5">N<span class="style11">o</span> Cl<span class="style11">asses</span></span></td>
    	</tr>
    <tr>
    		<td><span class="style5"><strong>P.M</strong></span></td>
    		<td>&nbsp;</td>
    		<td><span class="style5">E-Commerce<br>
    	    1:00-2:30 </span>
    	    <hr>
    	    <span class="style5">Information Systems<br>
    	    3:00-4:30</span></td>
    		<td>&nbsp;</td>
    		<td><span class="style5">Project Management<br>
    	    1:30-3:00 </span>
    	    <hr>
    	    <span class="style5">Information Systems<br>
    	    3:00-4:30 </span>
    	    <hr> <span class="style5">E-Sales<br>
    	    4:30-6:00</span></td>
    	  </tr>
    	  </tbody>
    </table>
    
    <table width="560" border="6" align="left" cellpadding="6" cellspacing="10" bordercolor="#CCCCCC"`>
    <tbody>
    <tr align="center">
    <td bgcolor="#FFFFFF"><strong><a href="index.html"><span class="style2">About</span></a></td>
    <td bgcolor="#FFFFFF"><strong><a href="sports.html"><span class="style2">My Favourite Hobby</span></a></td>
    <td bgcolor="#FFFFFF"><strong><a href="#top"><span class="style2">My School Schedule</span></a></td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>
     
  2. thoonie

    thoonie hmmm....

    Likes Received:
    0
    Trophy Points:
    16
    Code:
    <html>
    <head>
    <title>School Schedule</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
    <!--
    body {
    background-image: url(images/scarface.jpg);
    }
    .style2 {color: #FF0000}
    .style5 {color: #FFFFFF}
    .style9 {color: #FFFFFF; font-weight: bold; }
    .style10 {
    color: #000000;
    font-weight: bold;
    }
    .style11 {color: #000000}
    .style12 {color: #FF0000; font-weight: bold; }
    -->
    </style></head>
    <body>
    <table width="589" align="center" cellpadding="4" border="0">
    <tr>
    <td>
    <h1 align="left" class="style2"><a name="top"><font face="Verdana, Arial, Sans-serif"><strong>School Schedule</strong></font></a></h1>
    <h2 align="left" class="style12"><font face="Verdana, Arial, Sans-serif">Fall 2006</font></a></h2>
    </td>
    </tr>
    </table>
    
    <table width="500" align="center" cellpadding="4" border="1">
    <tbody>
    <tr>
    <td>&nbsp;</td>
    <td colspan="5"><span class="style9">Weekday Schedule</span></td>
    <td colspan="2"><span class="style5"><strong>Weekend</strong></span></td>
    </tr>
    <tr bgcolor="white">
    <td><span class="style10">Time</span></td>
    <td><span class="style11"><strong>Monday</strong></span></td>
    <td><span class="style11"><strong>Tuesday</strong></span></td>
    <td><span class="style11"><strong>Wednesday</strong></span></td>
    <td><span class="style11"><strong>Thursday</strong></span></td>
    <td><span class="style11"><strong>Friday</strong></span></td>
    <td bgcolor="white"><span class="style11"><strong>Saturday</strong></span></td>
    <td bgcolor="white"><span class="style11"><strong>Sunday</strong></span></td>
    </tr>
    <tr>
    <td><span class="style9">A.M</span></td>
    <td><span class="style5">Proect Managment<br />
    9:30-11:00 </span>
    <hr />
    <span class="style5">Web Design<br />
    11:00-12:30</span></td>
    <td><span class="style5">E-Sales<br />
    8:00-9:30 </span>
    <hr />
    <span class="style5">Operations<br />
    11:00-12:30</span></td>
    <td><span class="style5">Operations<br />
    8:00-9:30 </span>
    <hr />
    <span class="style5">Web Design<br />
    9:30-11:00</span></td>
    <td><span class="style5">E-Commerce<br />
    11:00-12:30</span></td>
    <td rowspan="2"><span class="style5">No Classes</span></td>
    <td rowspan="2"><span class="style5">No Classes</span></td>
    <td rowspan="2"><span class="style5">N<span class="style11">o</span> Cl<span class="style11">asses</span></span></td>
    </tr>
    <tr>
    <td><span class="style5"><strong>P.M</strong></span></td>
    <td>&nbsp;</td>
    <td><span class="style5">E-Commerce<br>
    1:00-2:30 </span>
    <hr>
    <span class="style5">Information Systems<br>
    3:00-4:30</span></td>
    <td>&nbsp;</td>
    <td><span class="style5">Project Management<br>
    1:30-3:00 </span>
    <hr>
    <span class="style5">Information Systems<br>
    3:00-4:30 </span>
    <hr> <span class="style5">E-Sales<br>
    4:30-6:00</span></td>
    </tr>
    </tbody>
    </table>
    <table width="589" border="6" align="center" cellpadding="6" cellspacing="10" bordercolor="#CCCCCC"`>
    <tr align="center">
    <td bgcolor="#FFFFFF"><strong><a href="index.html"><span class="style2">About</span></a></td>
    <td bgcolor="#FFFFFF"><strong><a href="sports.html"><span class="style2">My Favourite Hobby</span></a></td>
    <td bgcolor="#FFFFFF"><strong><a href="#top"><span class="style2">My School Schedule</span></a></td>
    </tr>
    </table>
    
    
    </body>
    </html>
    
    
     
  3. blade

    blade GEEK 2.0

    Likes Received:
    0
    Trophy Points:
    0
    its still doing the same problem when I align it to the left; sorry, I should have mentioned, I want everything to the left
     
  4. thoonie

    thoonie hmmm....

    Likes Received:
    0
    Trophy Points:
    16
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>School Schedule</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
    <!--
    body {
    background-image: url(images/scarface.jpg);
    }
    .style2 {color: #FF0000}
    .style5 {color: #FFFFFF}
    .style9 {color: #FFFFFF; font-weight: bold; }
    .style10 {
    color: #000000;
    font-weight: bold;
    }
    .style11 {color: #000000}
    .style12 {color: #FF0000; font-weight: bold; }
    -->
    </style></head>
    <body>
    <table width="589" cellpadding="4" border="0">
    <tr>
    <td>
    <h1 align="left" class="style2"><a name="top"><font face="Verdana, Arial, Sans-serif"><strong>School Schedule</strong></font></a></h1>
    <h2 align="left" class="style12"><font face="Verdana, Arial, Sans-serif">Fall 2006</font></a></h2>
    </td>
    </tr>
    </table>
    
    <table width="500" cellpadding="4" border="1">
    <tbody>
    <tr>
    <td>&nbsp;</td>
    <td colspan="5"><span class="style9">Weekday Schedule</span></td>
    <td colspan="2"><span class="style5"><strong>Weekend</strong></span></td>
    </tr>
    <tr bgcolor="white">
    <td><span class="style10">Time</span></td>
    <td><span class="style11"><strong>Monday</strong></span></td>
    <td><span class="style11"><strong>Tuesday</strong></span></td>
    <td><span class="style11"><strong>Wednesday</strong></span></td>
    <td><span class="style11"><strong>Thursday</strong></span></td>
    <td><span class="style11"><strong>Friday</strong></span></td>
    <td bgcolor="white"><span class="style11"><strong>Saturday</strong></span></td>
    <td bgcolor="white"><span class="style11"><strong>Sunday</strong></span></td>
    </tr>
    <tr>
    <td><span class="style9">A.M</span></td>
    <td><span class="style5">Proect Managment<br />
    9:30-11:00 </span>
    <hr />
    <span class="style5">Web Design<br />
    11:00-12:30</span></td>
    <td><span class="style5">E-Sales<br />
    8:00-9:30 </span>
    <hr />
    <span class="style5">Operations<br />
    11:00-12:30</span></td>
    <td><span class="style5">Operations<br />
    8:00-9:30 </span>
    <hr />
    <span class="style5">Web Design<br />
    9:30-11:00</span></td>
    <td><span class="style5">E-Commerce<br />
    11:00-12:30</span></td>
    <td rowspan="2"><span class="style5">No Classes</span></td>
    <td rowspan="2"><span class="style5">No Classes</span></td>
    <td rowspan="2"><span class="style5">N<span class="style11">o</span> Cl<span class="style11">asses</span></span></td>
    </tr>
    <tr>
    <td><span class="style5"><strong>P.M</strong></span></td>
    <td>&nbsp;</td>
    <td><span class="style5">E-Commerce<br>
    1:00-2:30 </span>
    <hr>
    <span class="style5">Information Systems<br>
    3:00-4:30</span></td>
    <td>&nbsp;</td>
    <td><span class="style5">Project Management<br>
    1:30-3:00 </span>
    <hr>
    <span class="style5">Information Systems<br>
    3:00-4:30 </span>
    <hr> <span class="style5">E-Sales<br>
    4:30-6:00</span></td>
    </tr>
    </tbody>
    </table>
    <table width="589" border="6" cellpadding="6" cellspacing="10" bordercolor="#CCCCCC"`>
    <tr align="center">
    <td bgcolor="#FFFFFF"><strong><a href="index.html"><span class="style2">About</span></a></td>
    <td bgcolor="#FFFFFF"><strong><a href="sports.html"><span class="style2">My Favourite Hobby</span></a></td>
    <td bgcolor="#FFFFFF"><strong><a href="#top"><span class="style2">My School Schedule</span></a></td>
    </tr>
    </table>
    
    
    </body>
    </html>
    Notice the difference at the top of the html.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN".... 
    You might also add "margin: 0px;" to the body's css.
     
  5. blade

    blade GEEK 2.0

    Likes Received:
    0
    Trophy Points:
    0
    what changes did u do/what code(s) did u put in?...for future reference
     
  6. thoonie

    thoonie hmmm....

    Likes Received:
    0
    Trophy Points:
    16
    I added that doctype and no actual changes from the codes.
     
  7. blade

    blade GEEK 2.0

    Likes Received:
    0
    Trophy Points:
    0
    i found another way, all i had to do was take out the align="left" in the first table settings; the 2nd table automatically went below

    another problem i have is putting background color on specified text on a background image, it would appear find and work in the design view in dreamweaver, but if you preview through a browser-ie, opera, firefox, the black-colored background on specified text won't appear.
    for example, my background is 75% black, and 25% white; my text is white, i want the text thats over the white background to have a black colored background on them so you can see he text, how would i do that
     
  8. thoonie

    thoonie hmmm....

    Likes Received:
    0
    Trophy Points:
    16
    im back, ok, can you show me the code of that text.
     
  9. blade

    blade GEEK 2.0

    Likes Received:
    0
    Trophy Points:
    0
    basically the same as above, the background image is attached
     

    Attached Files:

  10. thoonie

    thoonie hmmm....

    Likes Received:
    0
    Trophy Points:
    16
    Ok, Ive checked it using FF,Opera and IE, everything works fine. Except for this lines:
    Code:
    <td rowspan="2"><span class="style5">N<span class="style11">o</span> Cl<span class="style11">asses</span></span></td>
    
    just change it to:
    Code:
    <td rowspan="2"><span class="style5">No Classes</span></td>
    
    What specific words do you want to be turned into white.

    Note: If you want your site to appear correctly in all web explorers, use CSS and use the correct !DOCTYPE/DTD.
     
  11. blade

    blade GEEK 2.0

    Likes Received:
    0
    Trophy Points:
    0
    the text are already white, i was trying to put a black background over the white text; so if you add more to the sentences the words that would go over the white area won't disappear, but instead show with a black background
     
  12. thoonie

    thoonie hmmm....

    Likes Received:
    0
    Trophy Points:
    16
    You need to use a CSS style with a white BG and black text..

    Code:
    .style6{
    	color: #000000;
    	background: white;
    }
     

Share This Page