Are Tables Really Totally Obsolete?

I appreciate all everyone’s information. I’d always used separate CSS files for type layout (as opposed to inline modifiers) but this really clarifies the value of CSS for overall site design. Thanks for the clue-in, everybody.

I’ve felt so locked in to the table/container approach since that’s how I was originally taught. But separation of content, layout and behavior (as Ralph worded it) makes perfect sense from a philosophical standpoint — not to mention for your SEO.

Obviously there are all kinds of resources & tutorials online for this, but please post if there are any (especially for ex-tables users) that you especially like.

You can learn everything there is to learn off the web. The problem is, as I find, that distinguishing quality from rubbish resources may prove difficult for someone just starting out.

If you’re a books person like me, then you might also like to have a companion in book form to accompany you on your journey.

Here are some titles that you might like to check out:

  • Bulletproof Web Design - Dan Cederholm
  • Designing with Web Standards - Jeffrey Zeldman
  • Eric Meyer on CSS & More Eric Meyer on CSS - Eric Meyer

There are some SitePoint books that cover these topics as well, but I can’t recommend the ones pertaining to CSS/HTML as I haven’t read them.

SitePoint’s references are extremely useful for looking things up, the [URL=“http://www.w3.org/”]W3C is mandatory, and [URL=“http://www.alistapart.com/”]A List Apart an absolute must.

Like kohoutek, I find books more reliable, as they take you step-by-step through the process. I got started with Stylin’ with CSS, by Wyke-Smith, which I highly recommend as a solid intro to CSS.

Ah, it’s refreshing to see people actually advocating the use of tables for tabular data instead of the die-hard anti-table whackjobs who have taken over so many projects - like vBulletin 4 for example with it’s abuse of ordered lists on obviously tabular data…

Just saying.

You will find lots of people on the SitePoint forums advocating the use of the most semantically correct tag for whatever the data is - that’s how HTML is supposed to be written.

Laura, I know there’s been a lot of views on the matter but I find that the following website answers the question in full (without the crazy “you need to do this” attitude), there ARE legitimate cases for using tables for layout, most commonly this is HTML Email where support for modern standards is pretty broken, but in almost all cases of normal web design, using CSS in preference to tables for structuring your content will make pages load faster (due to CSS caching and less code), more accessible (some screen readers for the blind have real issues navigating table based layouts) and even better, you’ll use less bandwidth which means less hosting incurred costs for you! Weighing the pro’s and con’s, replacing your tables with semantic code is the best option. :slight_smile:

http://www.hotdesign.com/seybold/everything.html <<< this is both fun and informative.

We all started somewhere Laura, I for example started from a totally different background to web design, but lots of practice has gotten all the stuff I need to know in what’s left of my braincells! CSS is a pretty straight forward language to learn and apart from getting everything to look right in old web browsers (which takes a bit of time to get used to), it’s not particularly hard which is a great reason to re-learn the skill. :slight_smile:

Actually they will… they’ll see it in the extra time it takes to load pages (especially if their still on dial-up - something which is still very common or if their on a mobile device using a weak connection). And there’s the poor accessibility inhibited end users who’ll suffer. Don’t be fooled into thinking it’s just invisible code floating round.

It’s 2010, hon. Get with the program.

Tables should have been dead when browsers started to support CSS, way back in 2000. You’re 10 years behind the curve.

No. Tables were introduced to provide a semantically correct way to mark up tabular data. From when those tags were first introduced up until the end of the web those tags will be the correct ones to use for that purpose. It is only using them to contain content that isn’t tabular data that is wrong and the person who thought of that has apologised for it already.

Anyway CSS also introduced tables specifically for doing layout. The only problem with using CSS tables for layout is that IE7 and earlier don’t support the display:table, display:table-row, display:table-cell etc commands.

Alex: wth is up with that page? I was like, oh, cartoons, I love cartoons, this’ll be great. But with the layout issues I wonder wth am I doing wrong???
http://stommepoes.nl/everything.png

No idea stomme, it works fine for me :goof:

Correct. I think we should go further and say that, given that your content is in fact tabular in nature, then the table tags are the only correct way to mark that content up. Tables are in no way evil unless you abuse them. But then it is the abuse, not the tags, that are the evil.

I just had to poke my head in here note that the above quote from Jake is very accurate and insightful. If only all the web developers in the world could be forced to read that, we’d be making real progress.

Agreed.

Keep it up, boys!

Seconded. One of the problems that a lot of people come up against when going into table-free layouts is that they are trying to exactly replicate the table-based layout they had before, which isn’t always easy to do well. They then complain that they are having difficulties in creating a specific layout - because they have gone about it the wrong way. Creating a CSS design needs a slightly different mindset to a tabled designed, and it is much easier to start with a clean sheet and build up from there - sure, maybe take some design cues from the previous layout, but look at it as an opportunity to start afresh, and to build something better than what was there before, that isn’t hampered by the constraints of layout tables.

Not always true … one of the reasons that tableless design is preferable is because it offers greater flexibility in terms of serving the end-user. Flexible constrained width is easier to achieve, overflow can be tailored more reliably, pages are generally leaner so download and render quicker, the page layout can be completely rearranged as appropriate for mobile and printing … there are lots of reasons why users can have a better experience on CSS sites than on table sites.

And for visitors reliant on assistive technology, the chances are that they will be much better off reading a CSS-based page than a table-based page.

There are a lot of legitimate reasons not to use tables for layout - it’s not semantic in most cases, people start slapping them around elements for no good reason, etc, etc, etc…

But there are a lot of myths propagated by the die-hard anti-table mafioso zealots. One of these myths has reared it’s ugly head in this thread.

… and both of those quotes play to the first myth - bandwidth. Properly written tables styled with CSS is usually about the same in terms of filesizes - or even smaller in many cases than other techniques like “endless nested div” or “list abuse” (see some of the **** forum themes lately abusing lists and cloaked content on obviously tabular data)

If properly written it’s the same size or smaller - it’s not less bandwidth and therein not faster - Now you COULD be talking about rendering speed; tables do render slower and often hang the rendering until the HTML is completely loaded… but if a 386/40 running Windows 3.1 could handle a table, that part of the arguement is also total nonsense in the age of multi-ghz multi-core computers.

A great example of this abuse can be found in the vBulletin 4 skins. Apologies to Digital Point for crapping on their codebase, but for example take a topic index (forumdisplay.php) on the new skins… This is OBVIOUSLY tabular data; or at least data that should be presented in a tabular format. Icon, title, Starter, Replies, Views, Last Post - columns with proper headings all - that’s TABULAR DATA… so what does vBULL 4 do? Let’s pull the header and the first item row.


<div id="threadlist" class="threadlist">
	<form id="thread_inlinemod_form" action="inlinemod.php?forumid=39" method="post">
		<h2 class="hidden">Threads in This Forum</h2>

		<div>
			<div class="threadlisthead table">
				<div>
				<span class="threadinfo">
					<span class="threadtitle">
						<a href="forumdisplay.php?f=39&amp;sort=title&amp;order=asc" rel="nofollow">Title</a> /
						<a href="forumdisplay.php?f=39&amp;sort=postusername&amp;order=asc" rel="nofollow">Thread Starter</a>
					</span>
				</span>
				

					<span class="threadstats td"><a href="forumdisplay.php?f=39&amp;sort=replycount&amp;order=desc" rel="nofollow">Replies</a> / <a href="forumdisplay.php?f=39&amp;sort=views&amp;order=desc" rel="nofollow">Views</a></span>
					<span class="threadlastpost td"><a href="forumdisplay.php?f=39&amp;sort=lastpost&amp;order=asc" rel="nofollow">Last Post By<img class="sortarrow" src="http://b.dpstatic.com/buttons/sortarrow-white-asc.png" alt="Reverse Sort Order" border="0" /> </a></span>
					
				
				</div>
			</div>

			
			
				<ol id="threads" class="threads">
					<li class="threadbit new" id="thread_1785204">
<div class="rating0 nonsticky">
<div class="threadinfo">
<!--  status icon block -->
<a class="threadstatus" rel="vB::AJAX" ></a>

<!-- title / author block -->
<div class="inner">

<h3 class="threadtitle">
                                       <a href="showthread.php?t=1785204&amp;goto=newpost" id="thread_gotonew_1785204"><img class="gotonewpost" src="http://b.dpstatic.com/buttons/firstnew.png" alt="Go to first new post" /></a>


                                        


                                        
 
<a class="title threadtitle_new" href="showthread.php?t=1785204" id="thread_title_1785204">Center container DIV vertically</a><span class="age one">1</span>
</h3>


<div class="threadmeta">
<p class="threaddesc">Hi. 
 
I know how to center it horizontally, with margin:0 auto, but how do you also center it vertically?</p>
<div class="author">

<span class="label"><a href="member.php?u=407651" class="username understate" title="Started on Yesterday 9:24 am">Abh</a></span>


</div>

</div>

</div>
<!-- iconinfo -->
<div class="threaddetails td">
<div class="threaddetailicons">







</div>
</div>
</div>

<!-- threadstats -->

<ul class="threadstats td alt" title="">
<li>Replies: <a href="misc.php?do=whoposted&amp;t=1785204" onclick="who(1785204); return false;" class="understate">4</a></li>
<li>Views: 48</li>
<li class="hidden">Rating0 / 5</li>
</ul>

<!-- lastpost -->
<dl class="threadlastpost td">
<dt class="lastpostby hidden">Last Post By</dt>

<dd><div class="popupmenu memberaction">
	<a class="username offline popupctrl" href="member.php?u=407651" title="Abh is offline"><strong>Abh</strong></a>
	<ul class="popupbody popuphover memberaction_body">
		<li class="left">
			<img src="http://i.dpstatic.com/site_icons/profile.png" alt="" />
			<a href="member.php?u=407651">
				View Profile
			</a>
		</li>
		
		<li class="right">
			<img src="http://i.dpstatic.com/site_icons/forum.png" alt="" />
			<a href="search.php?do=finduser&amp;userid=407651&amp;contenttype=vBForum_Post&amp;showposts=1" rel='nofollow'>
				View Forum Posts
			</a>
		</li>
		
		
		
		
		<li class="right">
			<img src="http://i.dpstatic.com/site_icons/blog.png" alt="" />
			<a href="http://blogs.digitalpoint.com/?u=407651" rel='nofollow'>
				View Blog Entries
			</a>
		</li>
		
		
		
		<li class="left">
			<img src="http://i.dpstatic.com/site_icons/homepage.png" alt="" />
			<a href="http://romanga.5com.ro/" rel="nofollow">
				Visit Homepage
			</a>
		</li>
		
		
		
		<li class="right">
			<img src="http://i.dpstatic.com/site_icons/article.png" alt="" />
			<a href="http://articles.digitalpoint.com/list.php/author/407651-Abh" rel='nofollow'>
				View Articles
			</a>
		</li>
		

		
		<li class="left">
			<img src="http://i.dpstatic.com/site_icons/add.png" alt="" />
			<a href="profile.php?do=addlist&amp;userlist=buddy&amp;u=407651">
				Add as Contact
			</a>
		</li>
		

		
		
	</ul>
</div>
 </dd>
<dd>Today <em class="time">11:27 am</em> <a href="showthread.php?t=1785204&amp;page=#post14112029" class="lastpostdate understate" title="Go to last post"><img src="http://b.dpstatic.com/buttons/lastpost-right.png" alt="Go to last post" /></a></dd>

</dl>





</div>
</li>

4.5k of markup for 200 bytes of content visible to the user and a handful of links?!? Abusing ordered lists, abusing definition lists by only having DD’s in it? Cloaking content, redundant titles in the text? Even if we axe that stupid malfing javascripted for no good reason menu rubbish under last post, it’s still over 3k doing the job of:

<table class="topicList">
	<thead>
		<tr>
			<th class="description">
				<a href="forumdisplay.php?f=39&amp;sort=title&amp;order=asc" rel="nofollow">Title</a>
			</th>
			<th class="startedBy">
				<a href="forumdisplay.php?f=39&amp;sort=postusername&amp;order=asc" rel="nofollow">Thread Starter</a>
			</th>
			<th class="count">
				<a href="forumdisplay.php?f=39&amp;sort=replycount&amp;order=desc" rel="nofollow">Replies</a>
			</th>
			<th class="count">
				<a href="forumdisplay.php?f=39&amp;sort=views&amp;order=desc" rel="nofollow">Views</a>
			</th>
			<th class="lastPost">
				<a href="forumdisplay.php?f=39&amp;sort=lastpost&amp;order=asc" rel="nofollow" class="asc">Last Post By</a>
			</th>
		</tr>
	</thead><tbody>
		<tr id="post_1785204">
			<td class="description">
				<h2>
		    	<a href="showthread.php?t=1785204&amp;goto=newpost"
		    		title="Hi. I know how to center it horizontally, with margin:0 auto, but how do you also center it vertically?"
		    	>
		    		<img src="http://b.dpstatic.com/buttons/firstnew.png" alt="Go to first new post" />
		    	</a>
					<a href="showthread.php?t=1785204">
						Center container DIV vertically
					</a>
				</h2>
				- 1 day old
			</td>
			<td class="startedBy">
				<a href="member.php?u=407651" title="Started on Yesterday 9:24 am">Abh</a>
			</td>
			<td class="count">4</td>
			<td class="count">48</td>
			<td class="lastPost">
				<a href="showthread.php?t=1785204&amp;page=#post14112029">Today at <span>11:27 am</span></a><br />
				by <a href="member.php?u=407651" title="Abh is offline">Abh</a>
			</td>
		</tr>

Comes out to 1.6k - Even if you put all that scripted asshattery back in, using tables BECAUSE semantically it’s tabular data (aka the rows are related, and the columns are related) I very much doubt it would break 2.5k… Not only is it a great example of the anti-table whacko’s taking the concept WAY too far, it’s a great example of javascripting application type features that the majority of users aren’t going to use and is little more than a bandwidth hogging pig.

A recently departed friend was fond of saying “The people who used to make fat bloated nested tables now just make fat bloated nested DIV” - as much as I hate to correct Dan, it’s gotten a lot worse than that with people abusing tags for **** they just don’t mean!

Much of the problems with tables have NOTHING to do with tables at all, and quite frankly not using tables doesn’t fix the underlying problem of people just slapping tags in there any old way. The problem lay in that the majority of developers didn’t know enough about coding tables to be using them in the first place? TH? CAPTION? THEAD? TBODY? If you’ve never heard of those, you are part of the problem.

You’ll see developers vomiting up code like this all the damned time:


<table cellpadding="0" cellspacing="0" border="0" width="100&#37;" class="tBorder">
	<tr>
		<td colspan="4" class="bigtext"><h2>CSS Forum</h2></td>
	</tr><tr>
		<td class="heading fullw"><strong>Title</strong></td>
		<td class="heading shr"><strong>Replies</strong></td>
		<td class="heading shr"><strong>Views</strong></td>
		<td class="heading w15"><strong>Last Post</strong></td>
	</tr><tr>
		<td class="data trow1">
			<span class="bigText"><a href="index.php?t=1">Some Topic</a></span>
		</td>
		<td class="data trow1"><span class="smalltext">4</span></td>
		<td class="data trow1"><span class="smalltext">48</span></td>
		<td class="data trow1"><span class="smalltext">
			Last Post by somebodyorother
		</span></td>
	</tr><tr>
		<td class="data trow2">
			<span class="bigText"><a href="index.php?t=2">Some Topic</a></span>
		</td>
		<td class="data trow2"><span class="smalltext">4</span></td>
		<td class="data trow2"><span class="smalltext">48</span></td>
		<td class="data trow2"><span class="smalltext">
			Last Post by somebodyorother
		</span></td>
	</tr>
</table>

What’s wrong with that you ask? We have CSS, you don’t need to set cell properties in the markup anymore, that’s border-collapse’s job. If every one of your elements in a parent container are all getting the same class, they don’t need a class on them style off the PARENT. <td class=“heading”><strong> OH HELL NO. Every time I see that I want to *****-slap whoever wrote it - see, that’s what TH is for! colspan bigtext? No, that’s a CAPTION… and NEWS FLASH, you use those tags, screen readers will have a LOT less headaches dealing with your code. It’s made worse by vague/meaningless classnames like “shr”, “w15” - what the hell do those even MEAN!?! Presentational classnames don’t help a whole lot either, helps to say WHAT things are, NOT what styling you are applying to them. Classnames that say what style you are applying like “bigtext”, “smalltext” or even “tborder” are so pointless they beg the question “Ok, what are you even bothering to use CSS for at that point?!?” - we can dissect this bull even further by pointing out that the classes applied to the span could just as easily have been tacked onto the parent TD, negating the need for all of those too!

That is an absolute train wreck of code but you see people coding this way all the **** time. Not only does it mean the coder was unaware of CAPTION, THEAD, TBODY, TH, etc, etc… they failed to grasp the fundementals of how HTML/CSS even works… especially the ‘cascading’ part of CSS.

See, there’s no reason for that to be anything more than:


<table class="postList">
	<caption>CSS Forum</caption>
	<thead>
		<tr>
			<th class="title">Title</th>
			<th class="replies">Replies</th>
			<th class="views">Views</th>
			<th class="lastPost">Last Post</th>
		</tr>
	</thead><tbody>
		<tr class="odd">
			<th class="title">
				<a href="index.php?t=1">Some Topic</a>
			</th>
			<td class="replies">4</td>
			<td class="views">48</td>
			<td class="lastPost">Last Post by somebodyorother</td>
		</tr>
		<tr class="even">
			<th class="title">
				<a href="index.php?t=1">Some Topic</a>
			</th>
			<td class="replies">4</td>
			<td class="views">48</td>
			<td class="lastPost">Last Post by somebodyorother</td>
		</tr>
	</tbody>
</table>

A fraction the code, functionally identical once you get CSS in the mix… actually not true, the use of headings and captions means screen readers won’t choke on it, and will associate the column headings (thead th) with the table-cells below them in body… and the th.title in tbody will end up associated with their rows. (Oh, and all of those td/th classes could be gotten rid of if IE supported nth-child or sibling selectors properly or if Firefox/Gecktard supported colgroups correctly - see TWELVE YEAR OLD bugzilla 915)

That’s called using a table properly, and I believe the number of people who do it can be counted on one hand.

But there are legitimate reasons NOT to use tables - three columns of unrelated content is NOT tabular data. Wrapping single elements in tables just for centering or spanning effects is a waste of bandwidth… I have a list of excusable reasons for using tables:

  1. Obviously tabular data where you are going to have headings over your columns where the columns are all the same type of information, and the rows are all related records.

  2. Vertical positioning effects that CSS just cannot do. (like content you cannot predict the height of)

  3. When faux columns just won’t cut it.

… and that’s it. Conversely there are some simple rules as to when a table is completly inappropriate…

  1. just to center something horizontally

  2. if you are only going to have one TD or a single column of TD

  3. When every TD is the exact same information with no vertical column type relationships. (image galleries for example)

  4. when your columns are simply columns, not multiple rows of related data.

It’s pretty simple, it only gets complex when people start MAKING it more complex than neccessary. That’s a REALLY short inappropriate list, but 90%+ of the tables in use out there fall into one if not ALL of those categories.

Sorry for the long post - it’s what I do.

So you are comparing “properly” written table code (which isn’t properly written at all if the content isn’t tabular data) with the sort of mess that some people end up producing because they don’t know how to write proper HTML and CSS.

A properly written page using the most appropriate HTML and CSS will always be spammer than an HTML layout table equivalent. If it isn’t then it is because there are lots of things built in that can’t be done using tables at all.

Anyway the bandwidth saving is only a minor benefit - the major benefit is in future maintenance time - minutes to totally change the layout each time instead of months.

deathshadow60, generally I’ve agreed with much of what you say in the forums so don’t take this as negativity in general as I think you’re a very good contributor however I think you’ve totally missed the point of what I was stating when you referred to it as mythical. While you are correct in that in many cases, the level of bytes used in occupying a table verses a tripped out CSS file which works for every browser may indeed be correct, you seem to be misleading potential readers by leaving out the core principle as to why bandwidth savings do occur (as I stated in the section you chose to quote) and that is caching.

It may be true that on the initial loading of the site the combined force of loading CSS file and HTML file together will use the same amount of bandwidth as a table based design. However once downloaded the CSS file is cached and thereby no longer has to be re-downloaded (until it’s changed of course), whereas table based layouts have to be loaded upon each individual page of usage. Caching reduces the overall bandwidth consumption significantly as that CSS file (taking away the table bloat) will be re-used without re-downloading (it’s essentially recycling code), thereby emitting a zero percent excess apart from the minimal semantic markup. Yes people do abuse code, but that’s no reason to keep adding to the myth that CSS doesn’t reduce bandwidth consumption, because IF it’s used appropriately the statistics stand against table based design significantly as with caching in effect, the speed pages load with is reduced significantly (as downloading is reduced).

Nope, you missed what I’m saying completely. Coded with separatation of presentation from content a table at WORST takes maybe 10 extra bytes than most non-table layouts, and at best takes the same or less in the markup. It is ENTIRELY possible to get those same CSS caching savings by styling the table with CSS.

The only reason tables end up so bloated in most cases is people putting **** in the markup that belongs in the CSS when they make a table, or using five or six tables to do the job of ONE… and the people who used to use five or six nested tables to do that one tables job now use twelve to fifteen div to do the job of four. (outer, one for each column). Much of that comes from people slapping div’s around things like headings and lists (or in HTML5’s case the new redundant elements like header and nav) that don’t need DIV around them to apply styling since they are perfectly good block level containers in their own right.

Also wanted to point out the absurd extremes the anti-table nutjobs will go to… I’m not saying use tables for layout, but the problems stemming from doing so have NOTHING to do with bandwidth savings, “tables are evil”, “tables are a hack” or a good deal of the rest of the anti-table myths.

There ARE good reasons not to use them - They’re pointless if you’re only going to have one TD per TR (you see that nonsense all the time), the information put in them isn’t tabular (multiple columns of similar data that repeat every row), with DIV+CSS you can usually re-arrange the columns without touching the HTML, it DOES render faster (NOT that rendering speed should even be a factor in this day and age), and they are sufficiently complex that using them properly seems to go pow-zoom-phwee over most people’s heads.

Again, the problem wasn’t with tables themselves, or with the bandwidth they use, and I’m not 100% convinced that tables for layout is as bad as people make it out to be. (hell you can even do content/center column first tables if you know what you are doing) - You can use CSS on a table just like you would use CSS on a bunch of DIV and semantic tags taking advantage of all the same caching behaviors - border-collapse and table-layout:fixed flatlining their behaviors cross-browser. There are even still some things (like vertical positioning) that DIV+CSS still get on their knees under the donkey for.

The problem ends up twofold - People slapping tables around every blasted element and not using semantic markup - or even the proper markup if you are going to use a table… or being so rabidly anti-table they won’t even use them around tabular data. Again, you see that *** with the latest wave of forum skins all the time.

I agree with what you’ve posted above, except to the extent that there’s genuine issues of concern for me in relation to the way certain accessibility devices handle table based layouts (which is enough of an issue for me not to recommend them for layout purposes). While they may not be as bad as people make them out to be, it seems more like splitting hairs to pull them up about it, especially when newbies visit these forums. If we can encourage people to code semantically and relative to the content, fluff talk aside it’s probably a better thing to just say use tables when their required (though that’s just my observation). :slight_smile:

I disagree. If you do your table page layout in the CSS where it belongs then you will usually use fewer <div> tags than all the <table><tr><td> tags that would be needed in the HTML.

A two cell table done in HTML needs

<table><tr><td></td><td></td></tr></table>

The same layout table done using div tags needs

<div></div><div></div>

which is just about half as much markup. Even once you add the CSS to that the length of the html and css together still only add to the same number of characters (assuming you have only the one page since you save 23 characters for each additional page - so with 2000 pages the CSS version is 46000 characters shorter).

div {display:table-cell}

And that is assuming that you don’t already have tags around the cell content that can have the CSS applied to them. If the cell content already has a wrapper around it then the CSS table doesn’t need any extra HTML and you save as many characters as all the HTML table tags use in total.

Also with the CSS version it is far easier to change. Suppose you want to swap the table from being two cells next to one another to stacking them vertically. With the HTML tables you need to change each and every page to read:

<table><tr><td></td></tr><tr><td></td></tr></table>

whereas with the CSS version you just change the CSS to read

div {display:table-row}

So if you have 2000 pages that’s 18000 extra characters for the table version and one less character for the CSS version for a total saving of 18001 characters and a whole load of time as well (and now the CSS version of our 2000 page site is 64001 characters shorter than the HTML version).