What's the alternative to tables?

Everyone here seems to hate them so much...

[intwo]

While browsing a few of the other threads, I notice that tables (and particularly nested tables) seem to really be a pet peeve of a lot of the websters here.

I use them on my sites, and agree that there's probably a better way to do it (it adds so much additionally unnecessary code).

But how else can I lay out the page and maintain the design? How else can I create boxes with thin lines around them (smaller than border=1)? Please point me to a style FAQ that can help me fix the error of my ways...

Cheers.

I2

[tombola]

CSS is the way to go :-)
You'll find a lot of information in the CSS forum [webmasterworld.com]

How else can I create boxes with thin lines around them (smaller than border=1)?

Amazing! You can create a border of less than 1 pixel?

[bufferzone]

It is rumored (maybe more then rumored and maybe someone can find a link) that CSS will take a much more prominent role in the next html version and that the standard will disallow the use of tables to control design aspects of the page. DIV and SPAN and CSS will be used for this purpose.
Of course you can still ude tables for this, but if you want to validate your codes to the new standard, you can only use tables ad tables so to speak

[intwo]

Amazing! You can create a border of less than 1 pixel?

Actually, that's one of the main reasons I use nested tables -- if you have a table with border=1, it will have a thicker border line than if you put a table (with a white background) inside a table with a colored background and border="0" cellspacing="0" (be sure not to set the cellpadding of the outer table).

I just think the nested tables are more pleasing to the eye. Try this HTML on a white page to see what I mean:

<table border="0" cellspacing="0" bgcolor="#FF0000">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#FFFFFF">I use a nested table.</td>
</tr>
</table></td>
</tr>
</table>
<p>&nbsp;</p><table border="1" cellpadding="2" cellspacing="0" bordercolor="#FF0000" bgcolor="#FFFFCC">
<tr>
<td bgcolor="#FFFFFF">I use a border of 1.</td>
</tr>
</table>

I2

[tombola]

With CSS you can have the same effect:

In your style sheet:

table {
border: 1px solid #f00;
padding: 2px;
background: #fff;
}

In your HTML:

<table><tr><td>I use a nested table.</td></tr></table>

[intwo]

Nice! And leaner, too...

Does it look the same cross-browser, and cross-platform? Any limitations to CSS, in other words?

I2

[tombola]

The least you can say is: not all CSS properties are supported by all browsers ;-)

You'll find a lot of information about style sheets on the CSS Forum
[webmasterworld.com].

[aqualizard]

I think that CSS zealots that believe in avoiding tables altogether are going too far.

In the Real World, tables are used widely, and are the only sure-fire way to ensure backwards compatibility. Check out almost any site -- amazon, ebay, google, this site! -- they all use tables.

Amazing! You can create a border of less than 1 pixel?

I am pretty sure the OP meant how using a traditional table border=1 means a 2 pixel grey wireframe will appear.

My $.02...
aqua

[mgm_03]

i have to agree that CSS has a long way to go before people really embrace it for layout purposes. As a newbie, I have relied on the O'Reilly pocket reference and keep finding the browser inconsistency to be an irritating deterrent. Tables are widely supported. If CSS is so great, why don't all the browser vendors support it fully?

While the code for CSS is leaner, it's also usually in an external style sheet so, debugging can be a pain whereas a table is intermingled with your code right in front of you. No scrolling up/down or switching screens, etc.

As far as bandwidth goes, the pipes are only getting fatter so, just like Microsoft and others do, inefficient coding is not really a detriment if it ever was.

I imagine that every day there are legions of people starting HTML for the first time. Tables are way more easier to understand

Of course I use CSS for some things, but not layout.

[ronin]

Can I disagree with almost everything you've just said?

>;->

I have to agree that CSS has a long way to go before people really embrace it for layout purposes.

Web designers and browsers have a long way to go, the fault doesn't really lie with CSS.

I... keep finding the browser inconsistency to be an irritating deterrent.

I haven't had much of a problem with this since I started testing my CSS in Mozilla first and then tweaking it (if necessary) for IE rather than the other way around. The biggest irritant, I agree, is that IE gets the box model wrong. But again, that's not the fault of CSS.

Tables are widely supported.

Yes, because it's not unusual to see tabular data in offline academic papers - so there had to be a facility to create tables in online academic papers.

If CSS is so great, why don't all the browser vendors support it fully?

This is an excellent question. However, Mozilla does a pretty good job.

While the code for CSS is leaner, it's also usually in an external style sheet so, debugging can be a pain whereas a table is intermingled with your code right in front of you. No scrolling up/down or switching screens, etc.

Well... this is highly dependent on the software you use to write websites. I use a tabbed text editor (Notetab) so switching between the html document and the css file isn't a problem. I also appreciate the fact that if I stumble across a bug which I hadn't formerly noticed, then I only have to edit and upload the css file once, rather than making changes to multiple documents and then uploading each to the respective folder.

As far as bandwidth goes, the pipes are only getting fatter so, just like Microsoft and others do, inefficient coding is not really a detriment if it ever was.

What?

I imagine that every day there are legions of people starting HTML for the first time. Tables are way more easier to understand.

Yes, tables are easier to understand. But using tables for screen layout is just one step above creating your screen layout in Photoshop and uploading it as a single jpeg.

At the moment webmasters write table layouts to support legacy browsers and users continue to browse using legacy browsers because there's no reason to update. It is possible to design an attractive page in IE / Firefox which still works in NN4 but looks very much plainer. I have racked my brains but I cannot come up with a reason why those who use NN4 don't upgrade to Mozilla or Firefox/Thunderbird.

Just for the record, I don't hate tables, I use them on my site. Just not for screen layout.

(Disclosure: I only started learning about CSS-P last August but it's completely transformed my work process and time management which is why I'm still in this evangelistic phase... I'll get over it...).

[mgm_03]

sure you can disagree. that's what these forums are about. and i appreciate that you didn't make it personal :-)

in response, 90% of the world doesn't use Mozilla or Fireworks so, where is the compelling argument.

by saying "it has a long way to go", I didn't mean in the spec definition, I meant in terms of consistent and complete adoption by the popular browsers.

more people are getting broadband than switching to dial-up, right? So lines of code are less an issue. I was likening it to Microsoft and other ISVs who have the luxury of writing sloppy and bulging code because of that and huge hard drives.

I would like to be more fluent with CSS but I'm discouraged mostly by the fact that it means having to remember every quirk or bug for each browser version and platform.

[ronin]

Okay, that's a fair point, but if you stick to the basic common denominators you can get away with quite a lot without having to write browser-specific hacks into your code. Personally I detest hacks - I won't even use the box model hack - because I want to write code that works without alteration on all platforms. With a bit of tweaking, I can usually manage this. Sure, on the screen there may be 5mm between one box and the one below in IE and only 1mm between the boxes on Mozilla and Opera - but the design works either way.

Yes, I agree the uptake of Mozilla isn't very high. But I don't understand why not when it comes to people who use NN4. They're not stuck in the browser=IE mindset and yet they won't spend 5 minutes to download a free, faster, standards compliant browser. (Obviously I'm not talking about the users themselves here, I'm talking about the network administrators). What exactly is the issue here?

I suppose if NN4 was finally put to rest then one of the justifications for still using tables for layout purposes would be largely groundless.