Nested Tables (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message


Nicole -> Nested Tables (1/2/2005 20:34:12)

I realise it's not considered good practice anymore to layout a page using tables, but for the moment that is how my templates appear, and i need some help, just a clue even to get me rolling with understanding CSS. I'm still working on the same template:

Finished Product
The page at the moment (valid XHTML strict)
The code for this page at the moment -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
My CSS Code - 
body {
background-color: #f4f0e6;}

table#page {
background-color: #ffffff;
padding: 10px;
border: 1px #666666 solid;}

table#header {
border: 1px #666666 solid;}

table#navigation {
border: 1px #666666 solid;}

a:link#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:visited#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:hover#navigation {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:active#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

p#navigation {
text-align: right;}

table#content {
background-color: #ffffff;
border: none;
padding: 10px;}

p#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;}

ul#content {
list-style-type: square;
white-space: normal;}

img#content {
padding: 5px;}

h4#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: bold;
font-style: normal;
text-align: left;}

table#lefttop {
background-color: #f4f0e6;
border: 1px #000000 solid;
padding: 10px;}

h1#lefttop {
font-size: 1em;
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
text-align: center;}

p#lefttop {
text-align: left;
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
text-decoration: none;
font-style: normal;}

table#leftmiddle {
background-color: #568406;
border: 1px #000000 solid;
padding: 10px;}

h2#leftmiddle {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-decoration: none;
font-style: normal;
text-align: center;}

table#right {
background-color: #006897;
border: 1px #000000 solid;
padding: 10px;}

p#right {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;}

table#righttop {
background-color: #003366;
border: 1px #000000 solid;
padding: 10px;}

h3#righttop {
text-align: center;
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
font-style: normal;
text-decoration: none;}

table#footer {
background-color: #ffffff;
border: none;
padding: 10px;}

hr#footer {
width: 1px;
color: #666666;}

a:link#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:visited#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:hover#footer {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:active#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

p#footer {
text-align: right;}


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>New Page 1</title>
<link href="consultancy1.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">
<table width="750" >
<tr>
<td>
<div id="header">
<table width="100%">
<tr>
<td>
<img src="pf1banner.jpg" alt="Example Consultancy Services" width="750" height="102" />
</td>
</tr>
</table>
</div>
<div id="navigation">
<table width="100%">
<tr>
<td>
<a href="newindex222.htm">Investigation Services</a> |
<a href="newindex222.htm">Surveillance</a> |
<a href="newindex222.htm">Testimonials</a> |
<a href="newindex222.htm">Media</a> |
<a href="newindex222.htm">Links</a> |
<a href="newindex222.htm">Contact Us</a>
</td>
</tr>
</table>
</div>
<div id="content">
 <table width="100%">
<tr>
<td align="center" valign="top">
<div id="lefttop">
<table width="100%">
<tr>
<td>
<h1>LATEST NEWS</h1>
<p>Latest News Item here</p>
<p>Another News Item here</p>
</td>
</tr>
</table>
</div>
<p> </p>
<div id="leftmiddle">
<table width="100%">
<tr>
<td>
<h2>SERVICES</h2>
</td>
</tr>
</table>
</div>
<ul>
<li>Surveillance</li>
<li>Investigation</li>
<li>Action Plans</li>
<li>Media Exposure</li>
<li>Business Plans</li>
<li>Financial Solutions</li>
<li>Personal Service</li>
<li>Mediation</li>
<li>Rural Advice</li>
</ul>
</td>
<td>
<h4>Welcome to This Website</h4>
<img src="wheat4.jpg" alt="Photo of Wheat" width="100" height="100" />
<p>General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes.</p>
<img src="scales.jpg" alt="Photo of Scales" width="100" height="100" />
<p>General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business,
<img src="cow.jpg" alt="Photo of Cow" width="100" height="100" />
it's operator and clients successes. General text about the business, it's operator
and clients successes.</p>
<p>General text about the business, it's operator and clients successes.
General text about the business, it's operator and clients successes.</p>
<p>General text about the business.</p>
</td>
<td align="center" valign="top">
<div id="right">
<table width="100%">
<tr>
<td>
<div id="righttop">
<table width="100%">
<tr>
<td><h3>TESTIMONIALS</h3></td>
</tr>
</table>
</div>
<p>This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one.</p>
<p>John Smith, CEO </p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="footer">
<table width="100%">
<tr>
<td>
<hr />
<p>Terms of Use | Privacy Policy | Copyright © 2004 ACS</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>

</html>[/code]

I'm slowly getting my head around the parent/child thing, but i'm sure there must be something somewhere that is overriding the CSS causing my page at the moment to not accept the changes i make in my style sheet.

For instance, just say i want to change the properties of the table containing the word "Testimonials". I want the table to have a 1px black border with padding of 10px and a background of #003366. The content of that table is simply the word "Testimonials" which i'm trying to style as h4: 1em bold and white.

I've named that <div> "righttop" and that table is nested within another table in the div called "right". That div and table is inside another table called "content" which is in another div and table called "page" which comprises the whole page.

Besides wondering if something in my XHTML is overriding my style sheet, i'm also a bit confused about the following:

  • Should i be styling these things as <table>, <table-style>, <tr>, <th> or <td>?
  • Should i start styling the innermost or outermost table or div first?
  • Have i named my <div's> correctly, or should the table come before the div?


Thanks in advance

Nicole




Nicole -> RE: Nested Tables (1/2/2005 20:38:34)

Apologies everyone, you're not really dealing with an idiot, but somehow, and i've absolutely no idea why, the rest of my post appears only after clicking on the code, so here's the rest of that post.

I'm slowly getting my head around the parent/child thing, but i'm sure there must be something somewhere that is overriding the CSS causing my page at the moment to not accept the changes i make in my style sheet.

For instance, just say i want to change the properties of the table containing the word "Testimonials". I want the table to have a 1px black border with padding of 10px and a background of #003366. The content of that table is simply the word "Testimonials" which i'm trying to style as h4: 1em bold and white.

I've named that <div> "righttop" and that table is nested within another table in the div called "right". That div and table is inside another table called "content" which is in another div and table called "page" which comprises the whole page. Besides wondering if something in my XHTML is overriding my style sheet, i'm also a bit confused about the following:

Should i be styling these things as <table>, <table-style>, <tr>, <th> or <td>?

Should i start styling the innermost or outermost table or div first? Have i named my <div's> correctly, or should the table come before the div?

Thanks in advance

Nicole

p.s. The finished product

The page at the moment

My CSS code -
body {
background-color: #f4f0e6;}

table#page {
background-color: #ffffff;
padding: 10px;
border: 1px #666666 solid;}

table#header {
border: 1px #666666 solid;}

table#navigation {
border: 1px #666666 solid;}

a:link#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:visited#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:hover#navigation {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:active#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

p#navigation {
text-align: right;}

table#content {
background-color: #ffffff;
border: none;
padding: 10px;}

p#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;}

ul#content {
list-style-type: square;
white-space: normal;}

img#content {
padding: 5px;}

h4#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: bold;
font-style: normal;
text-align: left;}

table#lefttop {
background-color: #f4f0e6;
border: 1px #000000 solid;
padding: 10px;}

h1#lefttop {
font-size: 1em;
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
text-align: center;}

p#lefttop {
text-align: left;
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
text-decoration: none;
font-style: normal;}

table#leftmiddle {
background-color: #568406;
border: 1px #000000 solid;
padding: 10px;}

h2#leftmiddle {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-decoration: none;
font-style: normal;
text-align: center;}

table#right {
background-color: #006897;
border: 1px #000000 solid;
padding: 10px;}

p#right {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;}

table#righttop {
background-color: #003366;
border: 1px #000000 solid;
padding: 10px;}

h3#righttop {
text-align: center;
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
font-style: normal;
text-decoration: none;}

table#footer {
background-color: #ffffff;
border: none;
padding: 10px;}

hr#footer {
width: 1px;
color: #666666;}

a:link#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:visited#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:hover#footer {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:active#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

p#footer {
text-align: right;}




c1sissy -> RE: Nested Tables (1/3/2005 8:39:14)

Nichole,
your page can be done with a fluid layout, and divs.

this could be your xhtml.

<div id="wrapper><!--open wrapper div-->
<div id="header><!--open header div-->
place your header in here
<!--close header div--</div>
<div id="container"><!--open container div>
<div id="left column"><!--open left column>
Insert left column information in here
<!--close left column></div>
<div id=center column"><!--open center column>
Place the center column information in here
<!--close center column></div>
<div id=rightcolumn"><!--open right column>
place the right hand section with in here
<!--close right had column></div>
<div id="clear"><!--open and close clearing div></div>
<!--close wrapper div></div>
<div id="footer"><!--open footer div>
place footer information with this section
<!--close footer div></div>

Your css
html, body {
margin: 1px;
text-align: center;
font-family: This could be your font choices;
}
div#wrapper {
width: 98%;
float: left;
[now you can add colors etc with in here and a left margin if you wish]}
div#header {
width: 98%;
float: left;
margin-left: .55%;
}
div#leftcolumn {
width: 25%;
float: left;
margin-left: .55%;
}
div#centercolumn {
width: 45%;
float: left;
margin-left: .55%;
}
div#rightcolumn {
width: 25%;
float: left;
margin-left: .75%;
}
div#clear {
clear: both;
}
div#footer {
width: 98%;
float: left;
margin-left: .55%;
}


This is just a sample of what you can do. I'm almost positive that this set up with work with your design. Any questions just come back.




Nicole -> RE: Nested Tables (1/3/2005 17:45:12)

Hi Deb,

Thanks so much for your help, it's really appreciated very much. I think i may have started with an example way too hard for me, so can we forget the example i've used so far and use this one:

New Page
New Page CSS
body {background: #f4f0e6;}

h1 {color: #ff0000;}

h1#harpo {color: #003366;}


This is a simple example of the things i'm having problems understanding. I have two titles using the <h1> tags, but i'd like to tell the second one, that when it appears in the <div> called harpo, that it's not going to be red, it's going to be blue!

I'd also like to change other properties of the table contained within the <div> tag named harpo, like background colour, border width, colour, padding etc, but i figure if i can understand why it's not changing just the one element <h1>, then i'll be able to understand why it's not changing the others in my old example.

Do i have the <div> tags in the wrong place in the html? Is something else causing this?

If ANYONE has a clue, please help, i've spent so much time on this, and wasted so many other people's time.

Thanks

Nicole




Giomanach -> RE: Nested Tables (1/3/2005 20:01:09)

quote:

</html>[/code]

You need to put a space inbetween them two, it's picking it up as one word ;)

quote:

This is a simple example of the things i'm having problems understanding. I have two titles using the <h1> tags, but i'd like to tell the second one, that when it appears in the <div> called harpo, that it's not going to be red, it's going to be blue!

h1#harpo {color: #003366;}

Just swap it round ;)

#harpo h1{color: #036;}

quote:

I'd also like to change other properties of the table contained within the <div> tag named harpo, like background colour, border width, colour, padding etc, but i figure if i can understand why it's not changing just the one element <h1>, then i'll be able to understand why it's not changing the others in my old example.

Deb will no doubt crucify me for this, but:

When you want certain HTML elements to change for just one DIV, you have to make the necessary changes in the CSS etc

Example:

You could have the page wide standard set to:

html, body{
font-size: 12px;
font-family: Verdana, Tahoma, Arial, Sans-serif;
color: #008;
background: #EEE;
}

That would apply to all the child elements as well, basically everything contained within the <html></html> and <body></bosy> tags, but, if you want certain parts to be different, like within a DIV such as you want, you will need to:

#divid{
font-size: 10px;
font-family: Georgia;
color: #000;
}

You only need to enter the properties that you want to differ from the parent elements. If you want to change the child elements within the DIV layer to something different from the page wide, as set by just styling the element, you merely use the child element:

#divid table{
border: 0px;
background: #FFF;
}

It's the same for all..

Right...now's where I get corrected...lol

Does that make any sense dearest Nicole?

D




Nicole -> RE: Nested Tables (1/3/2005 23:35:27)

Hi Dan,

I knew it would be something so simple, thanks so much for your help, and to Deb, Caz, Jaybee, Dan, Dave, Bobby and everyone else, thanks for your help also.

If you were all here i'd buy you all a drink!

Thanks again

Nicole




Nicole -> RE: Nested Tables (1/4/2005 17:35:08)

Hi again,

In FrontPage 2002, does anyone have any idea why i'm able to see two table background colour changes in normal view but not in preview view? I've "prieviewed in browser" and now uploaded the files also, and still a couple of the changes aren't visible. (but they are in "normal view" in FrontPage).

I'm talking about the table containing the navigation directly under the banner (that should be gold), and the background for the table that says testimonials, (that should be dark blue).

Template

CSS code -
body {
background-color: #f4f0e6;
}

p {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #666666;
font-size: 1.0em;
}

#page table {
border: 1px solid #000000; 
background-color: #ffffff;
padding: 10px
}

#header table { 
padding: none; 
}

#navigation table {
background-color: b19547;
}

#navigation p {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #eeeeee;
text-align: right;
}

#navigation a:link, a:visited, a:active {
color: #eeeeee;
text-decoration: none;
} 

#navigation a:hover {
color: #ffffff;
}

#content table {
border: 0px solid;
padding: 10px;
}

#content h4 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #666666;
font-size: 1.0em;
font-weight: bold;
}

#content img {
border: 1px solid #000000;
float: left;
}

#content ul {
list-style-type: square;
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #666666;
font-size: 1.0em;
}

#lefttop table {
border: 1px solid #000000;
background-color: #f4f0e6;
}

#lefttop h1 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #000000;
font-size: 1.4em;
font-weight: bold;
text-align: center;
}

#leftmiddle table {
border: 1px solid #000000;
background-color: #568406;
padding: 10px;
}

#leftmiddle h2 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
text-align: center;
}

#right table {
border: 1px solid #000000;
padding: 10px;
background-color: #006897;
}

#right p {
color: #ffffff;
}

#righttop table {
background-color: 003366;
border: 1px solid #000000;
padding: 10px;
}

#righttop h3 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
text-align: center;
}

#footer table {
border: 0px solid;
}

#footer p {
font-size: 0.9em;
color: #666666;
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}

#footer a:link, a:visited, a:active {
color: #666666;
text-decoration: none;
} 

#footer a:hover {
color: #000000;
} 


Thanks

Nicole

p.s. the 2 <div's> involved are #navigation and #righttop, the latter is nested within another table called #right".




Nicole -> RE: Nested Tables (1/5/2005 0:13:50)

Please take no notice of this question, i've fixed the problem!

Nicole




d a v e -> RE: Nested Tables (1/5/2005 0:26:29)

quote:

I realise it's not considered good practice anymore to layout a page using tables

not necessarily ;)




Nicole -> RE: Nested Tables (1/5/2005 0:39:25)

...then can you answer me these two questions please?

1. What's the proper CSS code to tell cells of a 3 column table to be certain percentage widths?

2. How many hours of daylight are you getting in Finland right now?

Nicole




jaybee -> RE: Nested Tables (1/5/2005 4:42:39)

External style sheet.....

td {width:33%;} will be 33% of the parent that'll set all cells to the same size.


If you need different cells different sizes the take a look at this

http://www.notestips.com/80256B3A007F2692/1/TAIO5WFG7K




d a v e -> RE: Nested Tables (1/5/2005 7:14:13)

it's light from around 9.30 - 3.00 or thereabouts

re the colgroup method: interesting but read what else he says too
http://www.notestips.com/80256B3A007F2692/1/4D790E7DF984FCF180256E4500055D3C?OpenDocument




jaybee -> RE: Nested Tables (1/5/2005 7:35:41)

Yes but that was posted many months ago. I've got the colgroup sizing to work in all current browsers. The only glitches have been with backgrounds and borders.

I still don't get why Nicole is using nested tables. Use one table and then colspan, rowspan to mark out the blocks.




dpf -> RE: Nested Tables (1/5/2005 7:42:56)

quote:

I still don't get why Nicole is using nested tables. Use one table and then colspan, rowspan to mark out the blocks
I find very few people use..or even understand colspan and rowspan- much easier I think.




d a v e -> RE: Nested Tables (1/5/2005 7:44:03)

ah just with backgrounds and borders. not so bad then ;)




jaybee -> RE: Nested Tables (1/5/2005 10:09:13)

Especially if you don't want to use backgrounds and borders. [:D]




Nicole -> RE: Nested Tables (1/5/2005 16:41:48)

Hi Jaybee,

The reason i'm using nested tables at present is because:

It's a template i made a few months ago, and basically forms the basis for other templates i also made around the same time. So if i can get the XHTML, CSS and accessibility right for this template, i'm more than half way there with most of my templates. I'm also 95% cetrain to land a redesign contract, and maybe 40-50% certain with another contract which hopefully will begin in late February. (One of these clients has already chosen this template). I need these two jobs to survive as i've devoted much of my time to these two clients over the past weeks, they're right up my ally too being community service organisations.

I also wanted to spend January making my templates and CSS comply with W3C and to get these templates accessible as i'd told these two clients i can do this [:@]

So anyway, i'm getting there with this template thanks to the help of Outfrontiers, i know nested tables cause havoc with accessibility, and i may have time before these contracts to design a similar site using rowspan and colspan.

Nicole




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.140625