Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Refs for using CSS instead of tables?

Refs for using CSS instead of tables?
Thread Tools
quadraphonic
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 8, 2004, 11:41 PM
 
Does anyone know of some good resources to use CSS for page formatting over tables. I'm slowly learning CSS, but tables seem to be so conveneient for page layout (high bandwidth aside).

Are there instances where it would be better to use tables over CSS?
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Oct 9, 2004, 12:03 AM
 
Originally posted by quadraphonic:
Are there instances where it would be better to use tables over CSS?
Well I'll turn it around and ask you; where do you find it more convenient to use tables? I find often that people switching over to a more CSS workflow keep lots of their old habits and maintain a "table mindset" which dictates their way of doing things. Depending on what you're trying to achieve, there is often a different, and sometimes more efficient way of doing it with CSS.
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 9, 2004, 01:03 PM
 
..
( Last edited by quadraphonic; Oct 9, 2004 at 01:11 PM. )
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 9, 2004, 01:10 PM
 
Truthfully, my notion of convenience comes more from lack of knowledge of CSS than anything. Right now, I'm working on a website for my professional organization.

Sample here: http://members.shaw.ca/williamfwatson/AKA/

I have slowly been replacing HTML elements with CSS to clean things up.

My table code at present is ugly due to something I had tried earlier, but essentially the layout will be like this.

First Row: Logo & Banner
Second Row: Nav Bar
Third Row: Content section (roughly split as per the following diagram)

http://members.shaw.ca/williamfwatson/akalayout.jpg

Fourth Row: Address (probably to add privacy policy links, etc. later)
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Oct 9, 2004, 02:04 PM
 
Do you possibly have a visual or working example of your content area? Possibly some specific problems of what you're trying to achieve? I think it's interesting that you refer to the design in rows (of a table) and represent the content as a broken-up table. The diagram is somewhat helpful, but without more information, it's pretty hard to understand how it lives or reacts. Which cells are fixed, which resize which way etc... using table terms.

I think you may be looking for "how to make a table using CSS". Any information along those lines would be pretty pointless as generally there's a different way of thinking using CSS. CSS sites can also be a lot more flexible and may make you think of doing your site a different way.

Also, your use of JavaScript for the navigation seems a bit excessive. It should at least be usable if an end user lacks JavaScript, even if it doesn't have any of niceties of interactive menus or fading menu items.
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Oct 9, 2004, 02:04 PM
 
Semantically, that whole page should use css. However, you might choose xhtml transitional instead if you're not comfortable with strict css yet. Keep the tables as simple as possible in this case, and do try not to nest tables.

If you're ambitious, you'd put the top name in an <h1> and specify some left padding and then put the logo in the background of the h1. Sort of like this:

h1 {
height: 67px; /*height of the logo */
line-height: 67px; /*vertically aligns the type in the h1 */
background: white url(graphics/AKA-Logo2.jpg) no-repeat 0 0; /*put the logo at position 0px 0px in the background */
padding-left: 72px; /*leave some room on the left for the logo */
font: bold 16px Verdana; /*set the font for the type */
color: blue; /*set the type's color*/
}

and the markup would be:
<h1>Alberta Kinesiology Association</h1>



If you're not comfortable with css, leave the navigation in a table with one row. xhtml geeks would use a <ul> with fancy styles for it, but in transitional you can use a table.

For the content, you can set all of that in a table just you have it, or you can use css That's up to you. I'd use css. First you need to make two columns. I'd use two divs for that. I'll call them #side and #main like so:

<div id="side">side stuff</div>
<div id="main">main stuff</div>

Then I'd style them to make them sit side by side.

#side {
float: left; /* float is just align left with images */
width: 150px; /* give it a fixed width */
margin: 10px; /* keep it off the edge of the window a bit */
}

#main {
margin: 10px; /* same margins look nice on divs side by side */
margin-left: 170px; /* Push the left side over so it doesn't overlap the side bar */
position: relative; /* this is handy if you plan to float or position stuff inside this div relative to its edge */
}

I'm not entirely sure what the purpose is of all the other subdivisions in the content. It looks like the bottom right has a couple of sections, but the bottom left is probably part of the part right above it (just tables don't allow that). So if I'm right, you can put the right stuff in the #main div. I'd put them in divs of their own and float them to the right.

That's not probably not enough to do the whole page for you, but I hope it's enough to get you started and thinking more about how css can lighten your mark up. You could do away altogether with tables, but you don't have to. Stick with what is comfortable for you.
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 9, 2004, 03:10 PM
 
Originally posted by Synotic:
[B]Do you possibly have a visual or working example of your content area? Possibly some specific problems of what you're trying to achieve? I think it's interesting that you refer to the design in rows (of a table) and represent the content as a broken-up table. The diagram is somewhat helpful, but without more information, it's pretty hard to understand how it lives or reacts.
Here's a link to a quick draft of the main screen. I'm still trying to decide on a style for everything, so ignore the ugliness.

http://members.shaw.ca/williamfwatson/site.jpg

I've also updated the site HTML, fixing up some of those extra table cells. The link is here.

http://members.shaw.ca/williamfwatson/AKA/home2.html

Which cells are fixed, which resize which way etc... using table terms.
I wasn't going to resize anything. I was going use absolute sizing with the site, focusing on usage at 800x600 resolution.

I think you may be looking for "how to make a table using CSS". Any information along those lines would be pretty pointless as generally there's a different way of thinking using CSS. CSS sites can also be a lot more flexible and may make you think of doing your site a different way.
You're right, that was what I was looking for. But, if the layout is better managed sans tables, I'm up for learning. Truth be told, I know my coding won't be elegant or particularly advanced, but if I can learn a better way to do things, I'd love to.

Also, your use of JavaScript for the navigation seems a bit excessive. It should at least be usable if an end user lacks JavaScript, even if it doesn't have any of niceties of interactive menus or fading menu items.
LOL.. scrolling through the source there is a lot of JS. Initially I just thought.. everyone must be JS compatible. Are there many browsers that wouldn't support it? My focus on the nav bar was to make a menu that was visually appealing without using the onmouseover image loading.

Any suggestions for other nav menu styles?

BTW, thanks for your suggestions. It's a little humbling to read, but great for getting better!

Will
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 9, 2004, 03:13 PM
 
Originally posted by registered_user:
Semantically, that whole page should use css. However, you might choose xhtml transitional instead if you're not comfortable with strict css yet. Keep the tables as simple as possible in this case, and do try not to nest tables.

If you're ambitious, you'd put the top name in an <h1> and specify some left padding and then put the logo in the background of the h1. Sort of like this:

h1 {
height: 67px; /*height of the logo */
line-height: 67px; /*vertically aligns the type in the h1 */
background: white url(graphics/AKA-Logo2.jpg) no-repeat 0 0; /*put the logo at position 0px 0px in the background */
padding-left: 72px; /*leave some room on the left for the logo */
font: bold 16px Verdana; /*set the font for the type */
color: blue; /*set the type's color*/
}

and the markup would be:
<h1>Alberta Kinesiology Association</h1>



If you're not comfortable with css, leave the navigation in a table with one row. xhtml geeks would use a <ul> with fancy styles for it, but in transitional you can use a table.

For the content, you can set all of that in a table just you have it, or you can use css That's up to you. I'd use css. First you need to make two columns. I'd use two divs for that. I'll call them #side and #main like so:

<div id="side">side stuff</div>
<div id="main">main stuff</div>

Then I'd style them to make them sit side by side.

#side {
float: left; /* float is just align left with images */
width: 150px; /* give it a fixed width */
margin: 10px; /* keep it off the edge of the window a bit */
}

#main {
margin: 10px; /* same margins look nice on divs side by side */
margin-left: 170px; /* Push the left side over so it doesn't overlap the side bar */
position: relative; /* this is handy if you plan to float or position stuff inside this div relative to its edge */
}

I'm not entirely sure what the purpose is of all the other subdivisions in the content. It looks like the bottom right has a couple of sections, but the bottom left is probably part of the part right above it (just tables don't allow that). So if I'm right, you can put the right stuff in the #main div. I'd put them in divs of their own and float them to the right.

That's not probably not enough to do the whole page for you, but I hope it's enough to get you started and thinking more about how css can lighten your mark up. You could do away altogether with tables, but you don't have to. Stick with what is comfortable for you.
That helps a lot for helping me to understand CSS usage conceptually. I'll try a redesign using your suggestions.

Can you tell me a bit more about transitional xhtml? I'll check it out on the internet in the meantime.

Will
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Oct 9, 2004, 05:00 PM
 
Put real briefly: xhtml is html that closes every tag (even tags like img that woudn't normally use a closing tag) and uses a more refined set of html tags. (<em> emphasis instead of <i> italic for example)

xhtml strict implies that style and content are totally separate -- no tables for layout, no font tags, etc.

xhtml transitional implies that it's not quite xhtml strict, and it's more of a hybrid between html and xhtml. Using this hybrid style it's ok to use tables to control layout and it's ok if style and content are not completely separated.

They're just different DOCTYPES, really. Which, by the way, you should put at the top of your html. It makes the page render more uniformly in various browsers. Really.

You can even use html instead of xhtml. For example, this reply page uses this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
It's really dependent on how familiar you are with different tags and techniques as to which you use, but you'll have a much easier time with different browsers if you include a doctype, and adhere to its set of tags xhtml, html. That same site has a good bit of css info too.
     
CaptainHaddock
Grizzled Veteran
Join Date: Apr 2004
Location: Nagoya, Japan • 日本 名古屋市
Status: Offline
Reply With Quote
Oct 9, 2004, 07:43 PM
 
Keep in mind that browsers will render some things *differently* depending on what your doctype is. So a page might look different if the declaration says "XHTML Strict" than if it says "XHTML Transitional". I strongly suggest you use Strict if you can, it's the basis of all future web standards.

To answer your original questions:
"Are there instances where it would be better to use tables over CSS?"

Tables should only be used for tabular data (spreadsheets, charts, etc.). That's what they're designed for. Page layout and formating should be done with CSS. (And yes, you can use all CSS to style your tables if you actually have tabular data to display.)

If you want to learn more about CSS, I suggest two resources:
1. Go through the articles at Alistapart.org
2. Go through the web design links at www.hicksdesign.co.uk � there's a treasure trove of good links there.
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 9, 2004, 11:02 PM
 
Just following some of your guys suggestions and leads, I'm looking forward to reworking the design.

I think once I get a handle on it and have the main page done, the others should fall in line relatively easily.

If you guys have suggestions on the navbar, I'd love to hear them.
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Oct 10, 2004, 01:20 AM
 
for the nav bar, I'd do something like this:

<ul id="nav">
<li><a href="">About</a></li>
<li><a href="">News</a></li>
<li><a href="">Membership</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Links</a></li>
</ul>

and style it like this:

ul#nav {
border-top: 1px solid #d5d5f1;
border-bottom: 1px dotted #d5d5f1;
height: 20px;
}

ul#nav li {
list-style-type: none;
float: right;
text-transform: uppercase;
color: #000;
height: 18px;
line-height: 18px;
border-right: 1px solid #d5d5f1;
}

The ul will manifest itself as 100% wide with a top solid border and dotted bottom border. The li with in the ul will all float to the right next to one another. Actually, I'd probably not style the li tags as much as the a tags within them (for rollover purposes), but this demonstrates the idea. If I were going to use a background color roll-over, then I'd create a new declaration like ul#nav a:link { ... } that contains the text-transform, line-height, and other color styles.
     
skalie
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status: Offline
Reply With Quote
Oct 11, 2004, 05:20 AM
 
Originally posted by registered_user:

<div id="side">side stuff</div>
<div id="main">main stuff</div>
Is using a <div> tag kosher, btw?

I was going to blame them for making a site not render properly in Safari.
     
winwintoo
Junior Member
Join Date: Sep 2003
Status: Offline
Reply With Quote
Oct 11, 2004, 07:08 AM
 
I found some tutorials here that shed some light on this whole issue for me.

They also have a good tut about using list item tags for horizontal menus.

hth m
     
tsukurite
Fresh-Faced Recruit
Join Date: Jan 2003
Location: Colorado
Status: Offline
Reply With Quote
Oct 13, 2004, 03:13 AM
 
Perhaps one of the best resources for the "why" of using CSS is the Web Standards Project .

One of the better sites for the "How" of CSS is A List Apart

Regards,
Ben V
     
wataru
Addicted to MacNN
Join Date: Oct 2001
Location: Yokohama, Japan
Status: Offline
Reply With Quote
Oct 13, 2004, 07:34 AM
 
Originally posted by skalie:
Is using a <div> tag kosher, btw?

I was going to blame them for making a site not render properly in Safari.
Uh... what else would you use? Someone correct me if I'm wrong, but a <div> is the same as a <span> except that divs are display: block by default, whereas spans are display: inline.
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Oct 13, 2004, 03:03 PM
 
Originally posted by wataru:
Uh... what else would you use? Someone correct me if I'm wrong, but a <div> is the same as a <span> except that divs are display: block by default, whereas spans are display: inline.
Same in the sense that they serve as either generic blocks or generic inline elements. But yeah, that's basically it.
     
Millennium
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Oct 13, 2004, 03:18 PM
 
Originally posted by skalie:
Is using a <div> tag kosher, btw?
Using a div tag is kosher if there isn't an HTML tag which better fits the purpose (perhaps p, or ol/li, or ul/li, or whatever). The same is true for span; use it when there is nothing else that fits the meaning better.

As for references for "using CSS instead of tables", I'm not sure I understand what you mean. Going from CSS to tables or vice versa is like translating between two languages (human, not programming): you're not just dealing with different words and grammar, but different ways of thinking as well. This is why Babelfish can't produce professional-quality translations; it can't deal with the different ways of thinking which produced the various languages it supports. CSS, just as with human languages, requires a different way of thinking about layout. Whether it's better or worse than the table way is up to debate, though the CSS way does more closely match the methods of visual design commonly used in traditional media.

However, you're going to have to rebuild almost from the ground up. It will seem hard at first, because it will be hard: it involves concepts and methods which table-based designers won't be used to seeing or thinking about in those ways. In the end, I believe that the CSS way is simpler to use. I believe that it's also easier to learn for someone who never knew table-based design. But I recognize that for people used to tables, there is a significant unlearning curve as well as a learning curve, and this makes a lot of difference.
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 14, 2004, 12:07 AM
 
Originally posted by Millennium:
Using a div tag is kosher if there isn't an HTML tag which better fits the purpose (perhaps p, or ol/li, or ul/li, or whatever). The same is true for span; use it when there is nothing else that fits the meaning better.

As for references for "using CSS instead of tables", I'm not sure I understand what you mean. Going from CSS to tables or vice versa is like translating between two languages (human, not programming): you're not just dealing with different words and grammar, but different ways of thinking as well. This is why Babelfish can't produce professional-quality translations; it can't deal with the different ways of thinking which produced the various languages it supports. CSS, just as with human languages, requires a different way of thinking about layout. Whether it's better or worse than the table way is up to debate, though the CSS way does more closely match the methods of visual design commonly used in traditional media.

However, you're going to have to rebuild almost from the ground up. It will seem hard at first, because it will be hard: it involves concepts and methods which table-based designers won't be used to seeing or thinking about in those ways. In the end, I believe that the CSS way is simpler to use. I believe that it's also easier to learn for someone who never knew table-based design. But I recognize that for people used to tables, there is a significant unlearning curve as well as a learning curve, and this makes a lot of difference.
Well, in looking at some of the examples listed above, and reviewing some of the great resources, I think I'll be able to make my way through it.. and learn more elegant and compatible design techniques along the way.

I'll be sure to pick more brains if I have trouble though!

Thanks to everyone who helped out too!
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
James L
Mac Elite
Join Date: Aug 2003
Status: Offline
Reply With Quote
Oct 14, 2004, 10:50 PM
 
Just a quick note...

Javascript is not wrong to use, but most of the site traffic studies I have read show that between 10 and 13 percent of people who view the web disable scripting. If your navigation is completely dependent on JS your users will be screwed!

Use JS if you want, but have an alternative too.
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Oct 14, 2004, 11:55 PM
 
That does bring to mind another question.. how does one offer the choice?
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
Millennium
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Oct 15, 2004, 07:50 AM
 
Originally posted by quadraphonic:
That does bring to mind another question.. how does one offer the choice?
There are several methods. THe most popular it to cause each of your "pop-out" links (the ones which pop out menus) to link to a page containing the links inside that menu. People with JavaScript enabled are unlikely to use these pages (since the menus will continue to pop out), but people without JavaScript can click on those links and still get everywhere.
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 03:33 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,