Creating Columns

[Barney McGrew]

I have hit an hurdle in my new site. I am writing it in xhtml and have over 70 pages fully compliant so far. However, I now need to have 3, possibly four colums of information which I would have simply used a table for in the existing site. With xhtml I am presuming that tables are a no no, so I am presuming there is either a tag system or I have to use CSS, either way, I am stuck.

Any guidance on the above would be appreciated.

[Chris H]

Why would tables be a no-no? 

[samhs]

If it's tabular data, use a table. E.g. Each column relates to a different product, or an outcome, etc.

Otherwise, if it's a linear bit of prose you want to arrange into 4 columns, use <div>s set to 30% or 25% of the width of the content area, float them left, and then clear left after the last column thus:

Code:

  <!-- Let us assume you have a content div like this: //-->
  <div id="content">
     <div class="column">
        Some content in here....
     </div>
     <div class="column">
        Some content in here....
     </div>
     <div class="column">
        Some content in here....
     </div>
     <div class="column">
        Some content in here....
     </div>
     <div id="contentfooter">&nbsp;</div>
  </div>

That would be your html. Your CSS might be something like this:

Code:

   #content {
       position:   relative;
       width:      650px;
   }

   .column {
       float:        left;
       width:       150px;
       margin-left:10px;
   }

   #contentfooter {
       clear:        left;
   }

The margin-left is added to space the columns out, but you could acheive this other ways too....

hth

[Mr Anderson]

For left floated columns I'd use margin-right to separate them, to prevent IE 6 doubling the margin dimensions.

As has already been said though, if it's tabular data then it should be in a table.

[Barney McGrew]

Why would tables be a no-no? 

I presumes everything in xhtml had to be done by using CSS and that the use of tables was no the thing to do anymore.

[sarahA]

The use of tables for layout is no longer the done thing. But tables were created for a purpose, to display tabular data. So if your content is a set of tabular data then tables is the correct method to use

[Mr Anderson]

I presumes everything in xhtml had to be done by using CSS

Tables exist in XHTML, and can be styled with CSS too

and that the use of tables was no the thing to do anymore.

As above. For tabular data they are the appropriate, semantic elements to use - and that's the point of it all, to use the most appropriate and semantic markup for a given purpose.