Page 1 of 1

CSS Tables The latest, simplest way to page layout (without HTML tables) Rate Topic: -----

#1 joezim007  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 110
  • Joined: 13-September 08

Posted 11 January 2009 - 03:15 PM

In the past people used tables to lay out their pages the way they wanted them to be because, although sometimes difficult, it made putting boxes side-by-side simple. The way we do things now with floats and margins and all these other hacks has become quite annoying and, dare I say it, stupid. You have to know way too many 'hacks' if you wish to make a professional layout without using tables. I have found a solution that, in the future, will become THE way to design web pages. I say "in the future" because currently none of the IE browsers support it (of course) but it will be supported in IE8, which isn't too far away from its release. So it's just something to keep in the back of your mind until a large enough portion of society has adopted the "right" browsers.

This design philosophy is called CSS Tables. There are no <table> tags involved because tables are supposed to be used with tabular data. The idea of CSS Tables uses <div> tags to separate data and uses the CSS display property to make them act like tables, table rows, and cells. This seriously takes away from the complexity of making multi-column layouts. Here is an example:

XHTML
<body>
	<div id="wrapper">
		<div id="header">
			<!-- header content -->
		</div>
		<div id="main">
			<div id="leftNav">
				<!-- navigation column content -->
			</div>
			<div id="content">
				<!-- main article column content -->
			</div>
			<div id="rightNav">
				<!-- navigation column content -->
			</div>
		</div>
	</div>
</body>



CSS
#main {
	display: table;
	border-collapse: collapse;
}
#leftNav {
	display: table-cell;
	width: 175px;
}
#content {
	display: table-cell;
	width: 400px;
}
#rightNav {
	display: table-cell;
	width: 175px;
}



Using the display property we changed the div with the id of "main" into a pseudo table. We also changed the divs within the table div into table cells. Notice the lack of table row. If you only have one row the enclosing row element doesn't need to be there. The browsers create an anonymous table row element for them to reside in. You can even skip the container element that makes the table. All you really need is the table cells. An example requiring table rows (but doesn't include the table) is below:

XHTML
<div class="row">
	<div class="cell">
		<!--Data -->
	</div>
	<div class="cell">
		<!--Data -->
	</div>
</div>
<div class="row">
	<div class="cell">
		<!--Data -->
	</div>
	<div class="cell">
		<!--Data -->
	</div>
</div>



CSS
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	width: 175px;
}



This can make web design so much simpler and will allow even novices to CSS to make logical and pretty layouts without much work. I personally can't wait for the future when this will become available to use without worry that only a small portion of users will be able to see my web pages in all their glory.

Is This A Good Question/Topic? -1
  • +

Replies To: CSS Tables

#2 adobelady  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 10-March 10

Posted 17 March 2010 - 12:44 PM

This looks fabulous. Do you have this on a live web page anywhere that we can see it?
Was This Post Helpful? 0
  • +
  • -

#3 joezim007  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 110
  • Joined: 13-September 08

Posted 17 March 2010 - 08:56 PM

Sorry, I don't. I took a lot of this from the book from Sitepoint called "Everything You Know About CSS Is Wrong!". Sitepoint has quite a few really nice books with plenty of examples and things of that nature. I'm pretty sure they show some examples in the book and they have a free sample here: Sitepoint Book Sample. Scroll down that page a bit and there should be a button that says "Download FREE Preview."
Was This Post Helpful? 0
  • +
  • -

#4 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 18 March 2010 - 09:59 AM

This is a very interesting and well explained tutorial. I do however wonder why it is needed? If you are doing a website layout then you should be using xHtml and CSS normally without needing to make them work as tables. If it is for tabular content, then this is a good method to use, but I see nothing wrong (other than they are messy) for using tables to display tabular data.

Good tutorial though!
Was This Post Helpful? 0
  • +
  • -

#5 joezim007  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 110
  • Joined: 13-September 08

Posted 21 March 2010 - 03:57 PM

Actually, this is to replace complicated layouts. There are numerous "hidden" problems with using floating and things like that. People run into many problems using traditional methods and in the past using tables for layout was a common practice. This method allows people to use semantic markup and table-less layout without the hassles of floating.
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 429
  • View blog
  • Posts: 1,813
  • Joined: 30-April 10

Posted 31 August 2010 - 11:35 AM

How would this be used in formating an XML document as a table?
Would the context of the 'table', 'table-row', and 'table-cell' be the same, but just use the name of the tag?

This post has been edited by laytonsdad: 31 August 2010 - 11:37 AM

Was This Post Helpful? 0
  • +
  • -

#7 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Posted 31 August 2010 - 11:50 AM

View Postlaytonsdad, on 31 August 2010 - 05:35 PM, said:

How would this be used in formating an XML document as a table?
Would the context of the 'table', 'table-row', and 'table-cell' be the same, but just use the name of the tag?


You should be using a standard HTML table for such a thing really. If not then a list.
Was This Post Helpful? 0
  • +
  • -

#8 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Posted 31 August 2010 - 11:56 AM

View Postjoezim007, on 21 March 2010 - 09:57 PM, said:

Actually, this is to replace complicated layouts. There are numerous "hidden" problems with using floating and things like that. People run into many problems using traditional methods and in the past using tables for layout was a common practice. This method allows people to use semantic markup and table-less layout without the hassles of floating.


#wrapper {
	width:750px;
}
#header {
	float:left;
	width:750px;
}
#main {
	float:left;
	width:750px;
}
#leftNav {
	float:left;
	width: 175px;
}
#content {
	float:left;
	width: 400px;
}
#rightNav {
	float:left;
	width: 175px;
}



This achieves exactly what you are doing above, is cross browser compatible and will display correctly in all browsers.

What issues with floats are you talking about? The only major thing I can think of is the IE6 double margin bug that can be rectified with little hastle using an IE6 exception sheet.
Was This Post Helpful? 0
  • +
  • -

#9 joezim007  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 110
  • Joined: 13-September 08

Posted 31 August 2010 - 01:19 PM

View PostPhunkRabbit, on 31 August 2010 - 11:56 AM, said:

What issues with floats are you talking about? The only major thing I can think of is the IE6 double margin bug that can be rectified with little hastle using an IE6 exception sheet.


When you use floats, the container of the floats does not grow vertically to fit the floated elements unless you use a "clearfix" hack or unless the container is also floated (which may not be the case). I personally was not a fan of using the clearfix hack, however, recently a new solution was developed. If you give the container of floats an overflow value of "auto", it will expand to fit the floated children. That's much much simpler, and I believe I'll stick with floats now that this new fix has been discovered.
Was This Post Helpful? 0
  • +
  • -

#10 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Posted 31 August 2010 - 01:35 PM

View Postjoezim007, on 31 August 2010 - 07:19 PM, said:

View PostPhunkRabbit, on 31 August 2010 - 11:56 AM, said:

What issues with floats are you talking about? The only major thing I can think of is the IE6 double margin bug that can be rectified with little hastle using an IE6 exception sheet.


When you use floats, the container of the floats does not grow vertically to fit the floated elements unless you use a "clearfix" hack or unless the container is also floated (which may not be the case). I personally was not a fan of using the clearfix hack, however, recently a new solution was developed. If you give the container of floats an overflow value of "auto", it will expand to fit the floated children. That's much much simpler, and I believe I'll stick with floats now that this new fix has been discovered.


Glad to hear it ^^
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1