XHTML/CSS Alternative to Tabular data layout

HTML & CSS
1

Hi all,

As per the title, Im working on an existng admin page for an ecommerce site. The previous developer is using tables to present tabular data.

The site owner wants a css layout, could someone kindly tell me what is the best way to re-create a tabular layout for data? I need 8 “columns” per row.

Kind regards,

Matt

2

Although this can of course be done using css, I don’t see a problem using tables to present tabular data. It is actually the only time when I still use tables

Anyway. You could use floating divs

Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
	width: 805px;
	margin: 20px auto 0;	
}

.head-tab,
.content-tab {
	width: 200px;
	height:30px;
	line-height: 30px;
	float: left;
	border: #999 solid 1px;
	border-right: 0;
	text-indent: 5px;
	font-weight: bold	
}
.last-tab {
	border-right: #999 solid 1px;	
}
.content-tab {
	border-top: 0;
	font-weight: normal;	
}
</style>
</head>

<body>
<div id="wrapper">
<!-- Heading Divs -->
<div class="head-tab">Header1</div>
<div class="head-tab">Header2</div>
<div class="head-tab">Header3</div>
<div class="head-tab last-tab">Header4</div>
<!-- Content Divs -->
<div class="content-tab">content 1 Row 1</div>
<div class="content-tab">content 2 Row 1</div>
<div class="content-tab">content 3 Row 1</div>
<div class="content-tab last-tab">content 4 Row 1</div>
<div class="content-tab">content 1 Row 2</div>
<div class="content-tab">content 2 Row 2</div>
<div class="content-tab">content 3 Row 2</div>
<div class="content-tab last-tab">content 4 Row 2</div>
</div>
</body>
</html>
3

For tabular data, you should be using a <table>. Although you’ll often hear that tables are outdated and you should be using CSS instead, that only applies to layout tables - in other words, to tables that are used to create a visual layout for the whole page (or even for part of it), but where the contents aren’t connected in the way that tabular data are.

You should still lay out the rest of your page (eg menus, sidebars) by using CSS, but then in the middle of all that, you’ll have a <table>. That’s exactly what <table> was created for, and it is exactly when it should be used, and that hasn’t changed.

4

As a matter of fact, not using tables to mark up tabulated date is both semantically incorrect, and could (very theoretically) be illegal, if it makes the site more difficult to use for users with handicaps.

5

Exactly - if content is actually tabular then the table and it’s approriate subtags are the only correct markup.