Replacing Tables with CSS 1

Troopa · Nov 29, 2005

Hi all,

It's been a while since I designed a site and I'm now catching up on the new developments...I will probably get to the answer shortly but while it is there I thought I'd ask

Basically, am I right in thinking that using the DIV tag instead of <table> <tr> <td> etc is what's needed to make replace what used to be tables with CSS?

cLFlaVA · Nov 29, 2005

partly right. if you're using tables to lay your website out stylisticly, then yes, you are right. tables were never meant to provide a means of structure for an entire site. they were meant to display tabular data.

if your intent is to display a table of data, then of course, use tables. if your intent is to develop a site and maintain a certain structure, then you are also right, tables are NOT the way to go, and there are many resources that can help you along your way.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

manarth · Nov 29, 2005

tables are correct when displaying tabular data, but should be avoided when used simply for visual layout purposes.

Layout (and other presentation) should be handled by CSS. To accommodate this, [tt]<div>[/tt] is often used to identify a particular area: e.g.

Code:

<body>
  <div id="header">
    <img src="logo.gif" width="100" height="30" alt="[i]description of the company logo[/i]" />
  </div>
  <div id="content">
[COLOR=green]    <!-- foo -->[/color]
  </div>
  <div id="menu">
    <ul>
      <li>Home</li>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
    </ul>
  </div>
</body>

[tt]<div>[/tt] is not a replacement for table tags, per-se, rather it represents a semantic-neutral block identifier (and [tt]<span>[/tt] identifies a semantic-neutral in-line identifier).

This doesn't mean all styling should be done via divs; remember that it's possible to style an element directly. The [tt]<div>[/tt] tags in the following example are redundant (except for particular cases to apply complex styling).

Code:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>

You should also use semantic IDs and class names: for example, if you wish to colour your user IDs red, you could do this:

Code:

<span class="red">[COLOR=red]manarth[/color]</span>

.red {color: #f00;} [COLOR=grey]/* red */[/color]

However, if you wish to change the colour of your usernames, you could become very confused:

Code:

<span class="red">[COLOR=green]manarth[/color]</span>

.red {color: #0f0;} [COLOR=grey]/* green */[/color]

Instead, your class name should represent the information conveyed:

Code:

<span class="username">[COLOR=red]manarth[/color]</span>

.username {color: #f00;} [COLOR=grey]/* red */[/color]

It's surprising how common the example above is, and when it comes to maintaining a website deasigned this way, the former markup can be very confusing!

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Replacing Tables with CSS 1

Troopa

Technical User

cLFlaVA

Programmer

manarth

Programmer

Similar threads

Part and Inventory Search

Sponsor