table HTML problem

blade · Oct 9, 2006

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>

thoonie · Oct 9, 2006

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>

blade · Oct 9, 2006

its still doing the same problem when I align it to the left; sorry, I should have mentioned, I want everything to the left

thoonie · Oct 9, 2006

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.

blade · Oct 9, 2006

what changes did u do/what code(s) did u put in?...for future reference

thoonie · Oct 9, 2006

I added that doctype and no actual changes from the codes.

blade · Oct 9, 2006

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

thoonie · Oct 12, 2006

im back, ok, can you show me the code of that text.

blade · Oct 12, 2006

basically the same as above, the background image is attached

thoonie · Oct 13, 2006

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.

blade · Oct 13, 2006

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

thoonie · Oct 16, 2006

You need to use a CSS style with a white BG and black text..

Code:

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

table HTML problem

blade

GEEK 2.0

thoonie

hmmm....

blade

GEEK 2.0

thoonie

hmmm....

blade

GEEK 2.0

thoonie

hmmm....

blade

GEEK 2.0

thoonie

hmmm....

blade

GEEK 2.0

Attachments

thoonie

hmmm....

blade

GEEK 2.0

thoonie

hmmm....