Pages: 1Member
From: Ontario, CA
Registered: 2006-12-25
Posts: 31
I've been thanked 0 times.
Offline
Tryed & tryed but I don't see how to have different color backgrounds for different cells in a table. I would also like to beable to merge all the cells in one column.
Can someone help
Happy New Year & God Bless
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="2" WIDTH="400">
<TR>
<TD BGCOLOR="#FFCC00">Place Text</TD>
<TD BGCOLOR="#FFCC00">Place Text</TD>
<TD BGCOLOR="#FFCC00">Place Text</TD></TR>
<TR>
<TD BGCOLOR="#FFCC66">Place Text</TD>
<TD BGCOLOR="#FFCC66">Place Text</TD>
<TD BGCOLOR="#FFCC66">Place Text</TD></TR>
<TR>
<TD BGCOLOR="#FFCC99">Place Text</TD>
<TD BGCOLOR="#FFCC99">Place Text</TD>
<TD BGCOLOR="#FFCC99">Place Text</TD></TR></TABLE>
If you want to add a different color to each cell and/or a background graphic, go thru this simple tutorial
Member
From: Ontario, CA
Registered: 2006-12-25
Posts: 31
I've been thanked 0 times.
Offline
Thanks Travelagent
I'll try it tomorrow evening. No more time tonight and I have to help my daughter tomorrow during the day.
Thanks Much
Matt @ Launchnet
Administrator
From: you know you want a caricature
Registered: 2004-11-08
Posts: 3509
I've been thanked 37 times.
Offline
Here is some other code to have three cells in the left hand column merged
Code: html
<table border="1" width="100%">
<tr>
<td width="50%" rowspan="3"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
</tr>
</table>
Moderator
From: Yorkshire, UK
Registered: 2006-08-19
Posts: 2860
I've been thanked 85 times.
Offline
there's always CSSstyle='background-color:#FF0000;'
Good suggestion Northie, but Launchnet doesn't appear to be ready for the CSS world yet.
Administrator
From: you know you want a caricature
Registered: 2004-11-08
Posts: 3509
I've been thanked 37 times.
Offline
also depending on his usage of the table - it mat be that a table is the best form of presentation 
Moderator
From: Yorkshire, UK
Registered: 2006-08-19
Posts: 2860
I've been thanked 85 times.
Offline
tables can be styled with CSS too.............!
That's correct Northie -- he could use the following tableless CSS for his side NavMenu:
Place this code BEFORE the "</head>"
Code:
<style type="text/css">
.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 160px;
}
.bevelmenu li a{
display: block;
width: 100%;
padding: 2px 2px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 0px solid #FFF2BF;
text-decoration:none;
}
.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}
html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}
</style>
Place this code AFTER the "<body>"
Code:
<ul class="bevelmenu">
<li><a href="http://www.yoursite.com/">Link 1</a></li>
<li><a href="http://www.yoursite.com/">Link 2</a></li>
<li><a href="http://www.yoursite.com/">Link 3</a></li>
<li><a href="http://www.yoursite.com/">Link 4</a></li>
<li><a href="http://www.yoursite.com/">Link 5</a></li>
<li><a href="http://www.yoursite.com/">Link 6</a></li></ul>
Member
From: Ontario, CA
Registered: 2006-12-25
Posts: 31
I've been thanked 0 times.
Offline
Gentlemen Gentlemen Gentlemen
What can I say. You guys & gals really step up to the plate. Thank You.
Travelagent: Yes, I'm not ready for css yet, but maybe some day?
Travelagent: Question, If I were to use this code, and go to the work of installing it, would my left menu still function in the same manner? In other words, would the menu stay in place when other websites are opened? To me it looks like it would. Just thought I would ask before spending the time experimenting.
Again,
Many Thanks to all of you.
Matt
Matt -- that's what we're here for ... to help people with their sites. 
The CSS code I gave you is rather basic and simple, and won't take but a few minutes to copy/paste -- once you do, everything will work in your NavMenu ... all you need to do is, after you've placed your URL's and text in the HTML part, simply play with the CSS code until you get the NavMenu the way you want it.
Eventually, you'll find that CSS is fun and easier to control how your site looks -- there's no better time to get your feet wet now; so, go ahead and jump in!
Moderator
From: Yorkshire, UK
Registered: 2006-08-19
Posts: 2860
I've been thanked 85 times.
Offline
I would seriously recommending you learn CSS in tandem with html.
a lot of the html cited above is not valid, ceratinly not valid xhtml - and that's the way things are going.
By all means use tables to begin with - but style your tables with CSS, even if you use inline styles (like my first reply to this thread)
Then, when you feel ready to make a full-on CSS site - you already know what you're doing
for example the following code
Code: html
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="2" WIDTH="400">
<TR>
<TD BGCOLOR="#FFCC00">Place Text</TD>
becomes
Code: html
<TABLE style='width:400px; border:1px solid; border-collapse: separate; border-spacing: 2px;'>
<TR>
<TD style='background-color:#FFCC00;'>Place Text</TD>
Northie wrote:
I would seriously recommending you learn CSS in tandem with html.
a lot of the html cited above is not valid, ceratinly not valid xhtml - and that's the way things are going.
I agree with the recommendation, but it's kinda funny -- actually, the code I posted does work as I tested it myself ... now, if you wanna get technical at this point, here's 2 others that work very well:
HTML
Code:
<div id="navcontainer"><ul id="navlist">
<li>Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li></ul></div>
CSS
Code:
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}
#navlist
{
width: 7em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 3em;
padding: 0;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}
#navlist a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #000 solid;
text-align: center;
text-decoration: none;
color: #000;
}
#navlist a:hover { background-color: orange; }
#navlist a:visited { color: #000; }
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
HTML
Code:
<div id="navcontainer"><ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li></ul></div>
CSS
Code:
#navlist
{
padding: 3px;
border: 1px solid #fff;
width: 12em;
background-color: #26a;
font: 12px verdana,sans-serif;
}
#navlist li
{
list-style: none;
border: 1px solid #26a;
}
#navlist a
{
color: #eee;
text-decoration: none;
display: block;
border-left: 1em solid #159;
border-bottom: 1px solid #159;
padding: 4px 8px;
}
#navlist a:hover { border-color: #124; }
#subnavlist li a
{
border: 0;
border-left: 0.8em solid #26a;
padding: 3px 4px;
margin-left: -20px;
}
Moderator
From: Yorkshire, UK
Registered: 2006-08-19
Posts: 2860
I've been thanked 85 times.
Offline
in no way did i imply that your methods would not work
I actually prefer the list over the tables as I am in favour of semantic code
Aaahh -- now I understand; your method works just as well, and oftentimes better ... guess we all have our ways of coding! 
Member
From: Ontario, CA
Registered: 2006-12-25
Posts: 31
I've been thanked 0 times.
Offline
HI AGAIN This is a sample of what I have been trying to build and learn. I
seen this on the internet and copied the code over to my computer so that I could work with more complex
tables. I think I understand almost all of it, but . . .
a) Why is the border line below "Welcome to OpenOurSite.com look as though it has 2 borders ?
I've also made notes for my benefit throughout the coding.
Thanks
Matt
<html>
<head><title>Welcome to OpenOurSite.com</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"></head>
<BODY BGCOLOR="#E6E6DB" MARGINHEIGHT="0" MARGINWIDTH="0" LEFTMARGIN="0" TOPMARGIN="0" RIGHTMARGIN="0" BOTTOMMARGIN="0">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 width="100%" height="100%" align="center">
<!--CODING FOR 1ST ROW-->
<TR>
<!--1ST COLUMN - SETS BGCOLOR-->
<TD WIDTH=14 HEIGHT=1 BGCOLOR=#C5BD96>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD>
<!--SETS BORDER COLOR-->
<td width="1" height="1" bgcolor="Black">
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></td>
<!--RIGHT 2 COLUMNS - SETS BGCOLOR-->
<TD WIDTH="10000" HEIGHT=1 COLSPAN=2 BGCOLOR=#C5BD96> </TD></TR>
<!--CODING FOR 2ND ROW - Spans 4 columns-->
<TR>
<TD WIDTH="100%" HEIGHT=1 COLSPAN=4 BGCOLOR=#000000>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD></TR>
<!--1ST COLUMN, 2ND ROW - SETS BGCOLOR -->
<TR>
<TD WIDTH=14 HEIGHT=1 BGCOLOR=#F0B002>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD>
<!--SETS BORDER - COLOR-->
<td width="1" height="1" bgcolor="Black">
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></td>
<!--SETS BGCOLOR - Spans 2 columns-->
<TD WIDTH="100%" HEIGHT=1 COLSPAN=2 BGCOLOR=#A4975A>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD></TR>
<!--CODING FOR 3RD ROW - Spans 4 columns-->
<TR>
<TD WIDTH="100%" HEIGHT=1 COLSPAN=4 BGCOLOR=#000000>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD></TR>
<!--SETS WIDTH & HEIGHT OF 3RD ROW-->
<TR>
<TD WIDTH=14 HEIGHT=59>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD>
<!--SETS BORDER COLOR-->
<td width="1" height="59" bgcolor="Black">
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></td>
<!--SETS BGCOLOR OF RIGHT 2 COLUMNS - 3RD ROW-->
<td width="100%" height="59" colspan="2" bgcolor="#C5BD96" valign="middle" align="center"> <font size="5"><b><font color="#000080">
<!--TEXT FOR 3RD ROW-->
Welcome to OpenOurSite.com</font></b></font></td></TR>
<!--CODING FOR 4TH ROW - Spans 4 columns-->
<TR>
<TD WIDTH="100%" HEIGHT=1 COLSPAN=4 BGCOLOR=#000000>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD></TR>
<!--SETS BGCOLOR FOR 1ST COLUMN OF 4TH ROW-->
<TR>
<TD WIDTH=14 HEIGHT=1 BGCOLOR=#D6D1B6>
<IMG SRC="images/spacer.gif" WIDTH="14" HEIGHT="1" border="0" alt=""></TD>
<!--SETS BORDER FOR 1ST COLUMN-->
<td width="1" height="1" bgcolor="Black">
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></td>
<!--SETS BGCOLOR FOR RIGHT 2 COLUMNS-->
<TD WIDTH="100%" HEIGHT=1 COLSPAN=2 BGCOLOR=#9B8F56>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD></TR>
<!--CODING FOR 5TH ROW - Spans 4 columns-->
<TR>
<TD WIDTH="100%" HEIGHT=1 COLSPAN=4 BGCOLOR=#000000>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD></TR>
<!--SETS BGCOLOR FOR 1 COLUMN 5TH ROW-->
<TR>
<TD WIDTH=14 HEIGHT="100%" ROWSPAN=4 BGCOLOR=#918F6C>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD>
<!--SETS BORDER FOR 1ST COLUMN-->
<td width="1" height="49" bgcolor="Black">
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="31" border="0" alt=""></td>
<!--SETS BGCOLOR FOR 3RD & 4TH COLUMNS OF 5TH ROW & FONT FOR TEXT-->
<TD WIDTH="100%" VALIGN="middle" HEIGHT=49 COLSPAN=2 BGCOLOR=#FEE08F
align="center"><font><b><p><font size="2" color="#000080">
<!--TEXT FOR 5TH ROW-->
Well, here we go! This is a sample of a page that I would like to build.<BR>
I have copied the idea from asunta-mae.com. I sure hope they don't mind.<BR>
The fields open up the more lines that you type.</font></p></b></font></TD></TR>
<!--SETS SPAN FOR RIGHT 3 COLUMNS FOR 6TH ROW-->
<TR>
<TD WIDTH="100%" HEIGHT=1 COLSPAN=3 BGCOLOR=#000000>
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></TD></TR>
<!--SETS BORDER FOR 1ST COLUMN-->
<TR>
<td width="1" height="583" rowspan="2" bgcolor="Black">
<IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="1" border="0" alt=""></td>
<!--SETS WIDTH & HEIGHT-->
<TD WIDTH="342" HEIGHT="326" valign="top" align="left"></TD></table></body></html>
Member
From: San Antonio, TX
Registered: 2006-08-07
Posts: 516
I've been thanked 27 times.
Offline
The double lines comes from putting 1 pixel high rows between the rows of information. The image file loaded is just a spacer, probably a transparent gif. You'll see a height="1" in the <img> and <td> tags.
Some things you'll want to consider. Get out of the habit of capitalizing tags ( e.g. use <td> instead of <TD>) as if/when you move on to xhtml, it will be a requirement. Also setting fonts is best handled with CSS, but if you're going to do it with font tags, consolidate them into one (<font size="5" color="#000080">). It looks like the person who originally designed the page you sampled from used a graphics based designer, and they are notorious for adding multiple font tags for one area of text (or in some cases, no text at all)
Like the others, I would strongly suggest learning CSS now, and saving yourself some grief in the future when you want to make changes.
| Never |
You are not logged in.
