An introduction to css in tables

Date added: 23 April 2010
Last Mod: 25 May 2010
© 2010 Steve Campisi

Website Administrator Know How Articles

Supplementing Tables in xhtml with CSS (lesson one)

Setting up our basic Table

In this particular introductory lesson, you will learn how to create a valid basic xhtml strict five column table of five rows as we formally introduce the budding website administrator to the subject of designing tables to validate in xml, xhtml html4, which can then easily be modified as the foundation of a simple professional style table based website.

We will introduce the the basic data that will then uncover answers to basic questions like, why doesnt colspan validate in xml, xhtml or html and how using css in tables (as opposed to tables in css) can easily enhance table based design. You will also be able to copy and paste the code for a xhtml strict table template to use as best you see fit.

You probably know that a good command of website design will include a thorough understanding of tables and their structure and how to incorporate that design into any website. I would hazard a guess that spreadsheet emulation is behind the initial formulation of tables into html, and perhaps the most complex of website designs would pale in comparison to the most complex of spreadsheet designs. And so whilst you can deliver great a table look-a-like with css, it is not necessary in many cases. And so I would seriously doubt we are in any danger of the classic table going out of fashion any time soon. We will find that learning how to integrate css into your tables is possibly more beneficial to design than simply creating a table in css 'just because you can'.

A classic 5x5 Table

First, I am going to give you a basic, but also a very useful 5x5 table layout. This gives us a 3 column webpage design with a header, footer and a border to put around the whole design including those rounded corners which everyone likes so much.

I mostly cant be bothered with coding tables by hand (to start) and like very much using my legitimate 'microsoft word 97' program (which incidentally is not on the list for their genuine advantage checking program) because it simple to strip out their useless code which became voluminous in later releases.

You might of course have better software for this step, there are many about. I generally find the more expensive the program, the more of a robot you need to be to use it (having to stick with-in strict guidelines of that program). Here is the 'Word 97' generated result, or you can of course copy the valid copy/paste code lower on the page. Those three rectangles smack bang in the middle will become our left - center - right columns!

Lesson One - Figure 1

A basic 5 column by 5 row table

Schooling early microsoft into late xhtml table design

To even attempt to validate the raw ms code using strict will set off a barrage of errors;

"BORDER" is not a member of a group specified for any attribute
there is no attribute "CELLSPACING"
there is no attribute "CELLPADDING"
there is no attribute "WIDTH"
there is no attribute "summary"
element "TR" undefined
element "TD" undefined
Specification mandate value for attribute BORDER
attributes construct error
Couldn't find end of Start Tag TABLE and more...

The vast majority of these errors are simply due to uppercase tags, so make them all lowercase and re-validate to get an idea of what is really going on. [I personally recommend using UltraEdit for high power text manipulation] We side step any 'summary' error by also covertly defining a 'summary=' tag inside the table declaration before any validation, all tables should have a summary="".

If we try to validate this new corrected code, we will still get the following type of validation errors...

name and VI delimiter can be omitted from an attribute specification ...
attribute value specification must be an attribute value literal ...
unless SHORTTAG YES is specified
only if SHORTTAG YES

And this is simply because we have failed to ensure all our values are quoted using ="[value]", so we do exactly that and now have our code looking like the copy/paste code below and we will then have a 5x5 Table which will validate 100% in strict xhtml that looks exactly as the table above.

A valid strict xhtml 5x5 Table.

And this is nothing too special, but it is our starting base to give us a wonderful bordered three column website webpage layout complete with header and footer.

And to do that, we must know how to use "colspan" and "rowspan" in accordance with the rules of xhtml. So let us proceed to the next lesson to see how to transform our boring table into something a little more fun like this:

Lesson One - Figure 2

Megring cells to formulate a rigid workable design with-in the 5x5 table layout
	The xml and xhtml Links included in this table open in a new window to also demonstrate an alternative method of implementing target=_blank and target=_new in their respective strict doctypes.



	Try it: xHtml Live Table Demonstration/Example. Try it: xml Live Table Demonstration/Example.

So for now, that concludes the first lesson in this series of "Supplementing Tables in xhtml with CSS" articles. And if you understand the above, then you are now ready to progress to Lesson Two by selecting the link below. (If you click the cs3 banner below, you'll see this page validates fine in xhtml.)

Advance to the next lesson: Supplementing Tables in xhtml with CSS - lesson Two