Does anyone else still design websites using tables?

Curious if I'm the only one

CSS inconsistencies give me a giant headache

 

What kind of inconsistencies are you speaking of? CSS and <div> coding makes a lot more sense than using inline styles every table you use.

There's nothing better about using tables rather than <div>, and your load time WILL improve.

 

A few numpties still do. Tables do have their place though, for displaying data like on this message board there's no point trying not to use them. For normal website layouts they're utterly grotesque.

 

Me too mate. But the truth is divs are the way forward. The main prob is IE6 and below. All other browsers are fine. I just tend to get my site so it looks okay ish in 5 and 6. Having said that my sites are aimed at webmasters/developers etc and the chances are they are not going to be using IE 6 or below.

I do use tables occasionally when I am being lazy, or when the layout is really complex.

 

The thing is CSS is better... it's quicker page loading for the user, and tables are just a waste of time... granted due to the variety of browsers, it's hard to do all the CSS, but it's better and easier in the long run

 

As I've often said there are a lot of 'myths' about the use of tables, stemming from their ABUSE the past decade. People would wrap tables willy-nilly around even single elements for no fathomable reason, loading themselves down with presentational markup that often has not been neccessary since we stopped giving a **** about IE4 & Netscape 4. The problem was not the table, and the table is on it's own NOT a hack, it was the abuse of tables on elements that didn't need them that were the problem.

As I said in my Good Code, Bad Code post, Tables can still do three things that DIV cannot:

1) Equal height columns where faux-columns won't 'cut the mustard' or ends up MORE code.

2) 100% min-height page without hacks.

3) vertical centering of a dynamic height element inside a dynamic height container.

... and most of the rheotoric against tables is out and out bullcookies. Again from that same post:

"It's more code" - a lot of times it isn't, especially if you use border-collapse instead of that stupid 'cellpadding=0 cellspacing=0 border=0' malarkey and use classes to which multiple values can be assigned instead of wasting time on the deprecated presentational attributes of valign and align.

"It loads slower" - LOADING slower is a factor of filesize, and since as we just said it's often NOT more code but less, that arguement holds water like a steel sieve. What they MEAN to say is 'renders slower' and this is generally NOT the monster concern people seem to think, AND that particular arguement can be completely shot down by simply stating 'table-layout:fixed'! If a 386/40 can render a 50 row 8 field table under IE 4.0 in Windows 3.1 in a reasonable amount of time, these 'render time' arguements are a buch of horse manure in the age of multi-ghz multi-core machines with graphics accelleration and a thousand times the memory.

"It's a hack" - because of course negative margin tricks, using percentage height to trip haslayout, and 64k javascript frameworks that still need 4k of CSS to actually work don't constitute 'hacking'.

"It's not tabular data" - one of the definitions of a table is 'An orderly division of content into rows and/or columns" - Rows and/or Columns?!? That sounds like a website.

That said I don't dive straight for the tables for a layout when it's not needed. If it is not one of the above three situations, div's it will be. In either case the number one question I'm always asking myself when creating layout is "Do I need this tag?" - if the answer is no, I don't use it. Today you see people throwing DIV's around elements that could just as easily be styled directly, loading up on classes and ID's on every element when styling could be easily inhereted off the parent container, etc, etc.... It goes back to my saying "The people who wrote fat bloated nested tables today just write fat bloated nested DIV's. - Net change zero"

Lemme give you some real world examples


* Do I need this tag? - A lot of people in the past ended up using tables or things like center tags even when they did nothing. You see things like

<center>
	<table align="center" width="100%"><tr><td align="center">
		<div width="100%" style="text-align:center;">Some content</div>
	</td></tr></table>
</center>

Code (markup):

What's wrong with that you ask? The outer center is not needed because assigning align=center to the table will center it in every browser... The align=center on the TD does nothing, because the DIV is set to 100% width... the table only has one cell, which the ONLY reason to do is when you need vertical positioning on a fixed-height container... DIV does not HAVE a width attribute, and the default behavior SHOULD return 100%... and if you are going to use the table the DIV shouldn't be necessary if you aren't applying any styling to it... which the lack of any classes probably means the person isn't doing. This is actual code snippet I saw a while back on Opera forums - and this guy had NO CSS being linked into the page, all his styling was inlined.

ASSUMING you are using inline markup (which you ALSO shouldn't do), this should be functionally indentical... and differences could be corrected with padding in your CSS.

<div style="text-align:center;">Some Content</div>

Code (markup):

* Do I need this class? - Equally important. People overuse classes in the most stupid and absurd ways. For example:

<ul>
	<li class="menuitem"><a class="menuanchor" href="home.html">Home</a></li>
	<li class="menuitem"><a class="menuanchor" href="gallery.html">Gallery</a></li>
	<li class="menuitem"><a class="menuanchor" href="forums/index.php">Forums</a></li>
	<li class="menuitem"><a class="menuanchor" href="links.html">Links</a></li>
	<li class="menuitem"><a class="menuanchor" href="about.html">About</a></li>
</ul>

Code (markup):

FAIL FAIL FAIL FAIL FAIL... NONE of those classes are needed, warranted or even a good idea. Why? because we can apply ONE CLASS to the UL, then use that class to effect the tags under it.

<ul class="menu">
	<li><a href="home.html">Home</a></li>
	<li><a href="gallery.html">Gallery</a></li>
	<li><a href="forums/index.php">Forums</a></li>
	<li><a href="links.html">Links</a></li>
	<li><a href="about.html">About</a></li>
</ul>

Code (markup):

That's it - that is ALL the html that's needed there. The ONLY reason to apply a class when you have a bunch of sibling items inside a container, is when it would be styled DIFFERENTLY from the others. Instead of declaring ".menuitem" in the CSS, you'd use ".menu li" - instead of .menuanchor, you'd use ".menu a"

Mistakes like that play into the abuse/misuse/complete lack of understanding of HTML and CSS that led to table abuse in the first place - and that it is NOT tables vs CSS, but tables vs DIV... For example all the people who seem to have never heard of CAPTION or TH - which can be used for styling hooks AND make it more semantic.

I can't even count how often you see rubbish markup like this: (again a real code sample I cleaned up for someone)

<table cellpadding="0" cellspacing="0" border="0" width="100%">
	<tr>
		<td colspan=3" class="bigHeader" align="left">Controller Settings</td>
	</tr><tr>
		<td class="columnHeader" align="center">Volume</td>
		<td class="columnHeader" align="center">Pan</td>
		<td class="columnHeader" align="center">Channel</td>
	</tr><tr>
		<td class="data" align="center">120</td>
		<td class="data" align="center">64</td>
		<td class="data" align="center">10</td>
	</tr><tr>
		<td class="data" align="center">96</td>
		<td class="data" align="center">30</td>
		<td class="data" align="center">1</td>
	</tr><tr>
		<td class="data" align="center">110</td>
		<td class="data" align="center">86</td>
		<td class="data" align="center">2</td>
	</tr>
</table>

Code (markup):

Which is made of /FAIL/ from top to bottom using even old school coding techniques, much less modern ones. By the time I was done with it, this was all it needed for markup:

<table class="controllerSettings">
	<caption>Controller Settings</caption>
	<tr>
		<th>Volume</th>
		<th>Pan</th>
		<th>Channel</th>
	</tr><tr>
		<td>120</td>
		<td>64</td>
		<td>10</td>
	</tr><tr>
		<td>96</td>
		<td>30</td>
		<td>1</td>
	</tr><tr>
		<td>110</td>
		<td>86</td>
		<td>2</td>
	</tr>
</table>

Code (markup):

EVERYTHING ELSE there can be done from the CSS. border-collapse:collapse gets rid of the cellpadding/cellspacing/border nonsense, the caption gets rid of a TR and gives us a easy hook off our table's class, the TH likewise get rid of a unneccessary class and give semantic markup *** SHOCK *** labelling each column, and of course if all our TD are going to recieve the same styling, there is no reason to be inlining that **** in the markup.

Opposite to table abuse you have tag abuse - using definition lists for things that are not terms or definitions - there's a phpBB3 skin making the rounds right now that... well...

<ul class="topiclist">
	<li class="header">
		<dl class="icon">
			<dt>Topics</dt>
			<dd class="posts">Replies</dd>
			<dd class="views">Views</dd>
			<dd class="lastpost"><span>Last post</span></dd>
		</dl>
	</li>
</ul>
<ul class="topiclist topics">

	<li class="row bg1">
		<dl class="icon" style="background-image: url(./styles/prosilver/imageset/topic_unread.gif); background-repeat: no-repeat;">
			<dt title="New posts"><a href="./viewtopic.php?f=38&amp;t=1619&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1&amp;view=unread#unread"><img src="./styles/prosilver/imageset/icon_topic_newest.gif" width="11" height="9" alt="View first unread post" title="View first unread post" /></a> <a href="./viewtopic.php?f=38&amp;t=1619&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1" class="topictitle">Can't install EWI USB</a>
				<br />
				by <a href="./memberlist.php?mode=viewprofile&amp;u=3444&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1">thabeat</a> &raquo; Sat Feb 21, 2009 1:07 pm				</dt>
			<dd class="posts">6 <dfn>Replies</dfn></dd>
			<dd class="views">127 <dfn>Views</dfn></dd>
			<dd class="lastpost"><span><dfn>Last post </dfn>by <a href="./memberlist.php?mode=viewprofile&amp;u=3483&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1">Scorpio</a>					<a href="./viewtopic.php?f=38&amp;t=1619&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1&amp;p=8149#p8149"><img src="./styles/prosilver/imageset/icon_topic_latest.gif" width="11" height="9" alt="View the latest post" title="View the latest post" /></a> <br />Tue Mar 17, 2009 7:16 pm</span>
			</dd>
		</dl>
	</li>
</ul>

Code (markup):

Oh, but it makes it a list of posts.... Yeah, and it is DL abuse since it has multiple definitions that are NOT definitions for something that is not a term and is MORE code and therin SLOWER loading than a table would be, and abuses the DFN tag to boot... and of course the header isn't even grouped with it's content - Yeah, that's so superior code-wise to

<table class="topiclist">
	<tr>
		<th class="topic">Topics</th>
		<th class="replies">Replies</th>
		<th class="views">Views</th>
		<th class="lastPost">Last Post</th>
	</tr><tr class="odd">
		<td class="icon topicUnread"><span></span></td>
		<td class="topic newPosts">
			<a href="./viewtopic.php?f=38&amp;t=1619&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1&amp;view=unread#unread"><img src="./styles/prosilver/imageset/icon_topic_newest.gif" width="11" height="9" alt="View first unread post" title="View first unread post" /></a> <a href="./viewtopic.php?f=38&amp;t=1619&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1">
				Can't install EWI USB
			</a>
		</td>
		<td class="posts">6</td>
		<td class="views">127</td>
		<td class="lastPost">
			Last post by 
			<a href="./memberlist.php?mode=viewprofile&amp;u=3483&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1">
				Scorpio
			</a>
			<a href="./viewtopic.php?f=38&amp;t=1619&amp;sid=a6ce63f8a920db496bb48f67ba7c58e1&amp;p=8149#p8149" title="View the latest post">
				<img src="./styles/prosilver/imageset/icon_topic_latest.gif" width="11" height="9" alt="View the latest post" />
			</a><br />
			Tue Mar 17, 2009 7:16 pm
		</td>
	</tr>
</table>

Code (markup):

Which BTW, most devices for people with accessability needs will read the TH for the column on the field, so that DFN nonsense isn't needed! I'm a little *****ed off about needing the extra classes on the columns still, but being mozilla hasn't gotten off their collective tuckus' and fixed bugzilla #915 in the odd DECADE or so they've had to do so - AND IE still has yet to get us a working Nth-child, it's still needed.


Again, most of the problem came NOT from tables, but from people not using them properly - and now the people that never used them properly are just churning out the same rubbish code by abusing other tags and implying the WRONG semantics to elements. I'm NOT saying dive right back for tables, I'm saying use the right tool for the right job.

 

but if you are working a huge table with lots of columns and want to display data, table is the way to go

 

My complements to Deathshadow for an awesome post!

I always maintain this rule: tables are for displaying tabular data - for anything else use CSS.

Deathshadow's post illustrates tables being used to display data, which is what they were intended to do. They were NOT intended to line up columns of text and graphics or position buttons. Style sheets offer a much better way to do this.

As a analogy, you would use a table in a Word document to display this years sales statistics, but you wouldn't use it to format your page layout. Same thing goes for web pages.

Bill

 

Is is true that tables should only be used for displaying tabular data. I often critisise peoples websites that completely use a table for their page layout.

I do however use table layout when writing HTML emails. This is because the way different email clients cannot handle divs or external styling.

 

Whereas I advise clients against using HTML e-mails since a lot of servers - like MINE - are set up to automatically reject HTML based e-mails as spam, or at the very least block their content as suspicious.

 

I guess this page (http://mmerlinn.com/catalog/makeridx.htm#default) qualifies as a huge table. And it DOES use tables.

 

You're absolutely right deathshadow. I've recently tried converting a fixed width site with a solid page background to fixed width site with an image background but the problem is that the right side of the site differs from the left side so the image background doesn't align on one of hte sides. The only way to overcome this problem is to use a three column table. The owner opted instead to have the site redesigned and lost some of the charm of the old design

 

I always use both of table and div. Something, one of them useful

 

tables are still useful and I am using it ^^

 

Mostly divs. The result looks so much closer to what I want

 

DIV provides more flexibility as compared to tables.
Results are closer to requirements.

DIVS are hard to handle but after learning step by step you will feel easy..


Regards

 

The problem with the div is the called "divitis", which happens when the only thing you use is divs. It's a problem, as serious as using tables for the layout.

I once caught my self "building" a table with divs, it was a shock when I realize what I was doing...

 

Uhm, actually what you described is entirely possible without tables, if you know some image background tricks.

 

Gets funnier when you see people doing that, then using display:table and display:table-cell to make it work...

At that point it's serious "What the ****" territory.