OutFront Forums
     Home    Register     Search      Help      Login    

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

 

Nested Tables

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Nested Tables
Page: [1]
 
 
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
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

_____________________________

". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
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;}


< Message edited by Nicoleoz -- 1/2/2005 20:44:56 >


_____________________________

". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?

(in reply to Nicole)
c1sissy

 

Posts: 5094
Joined: 7/20/2002
From: NJ
Status: offline

 
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.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://cssinfo.debsplace.org
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Nicole)
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
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

_____________________________

". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?

(in reply to c1sissy)
Giomanach

 

Posts: 6191
Joined: 11/19/2003
From: England
Status: offline

 
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

_____________________________




(in reply to Nicole)
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
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

_____________________________

". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?

(in reply to Giomanach)
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
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".

_____________________________

". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?

(in reply to Nicole)
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
RE: Nested Tables - 1/5/2005 0:13:50   
Please take no notice of this question, i've fixed the problem!

Nicole

(in reply to Nicole)
d a v e

 

Posts: 4415
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online

 
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 ;)

_____________________________

David Prescott
Gekko web design

(in reply to Nicole)
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
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

_____________________________

". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?

(in reply to d a v e)
jaybee

 

Posts: 14442
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
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

< Message edited by jaybee -- 1/5/2005 4:58:12 >


_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to Nicole)
d a v e

 

Posts: 4415
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online

 
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


_____________________________

David Prescott
Gekko web design

(in reply to jaybee)
jaybee

 

Posts: 14442
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
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.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to d a v e)
dpf

 

Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline

 
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.

_____________________________

Dan

(in reply to jaybee)
d a v e

 

Posts: 4415
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online

 
RE: Nested Tables - 1/5/2005 7:44:03   
ah just with backgrounds and borders. not so bad then ;)

_____________________________

David Prescott
Gekko web design

(in reply to jaybee)
jaybee

 

Posts: 14442
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: Nested Tables - 1/5/2005 10:09:13   
Especially if you don't want to use backgrounds and borders. :)

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to d a v e)
Nicole

 

Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline

 
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

_____________________________

". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?

(in reply to jaybee)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Nested Tables
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts