www.tuljo.com

A classic <table> and a tableless table

What's the most suitable for presenting a sort of tabular data..?

A classic <table>

Markup

<table class="tablex" summary="">
	<tr>
		<th>Col 1</th>
		<th>Col 2</th>
		<th>Col 3</th>
	</tr>
	<tr>
		<td>1</td>
		<td>3</td>
		<td>10</td>
	</tr>
	<tr>
		<td>100</td>
		<td>300</td>
		<td>10000</td>
	</tr>
</table>

CSS

.tablex{
	border-collapse:collapse;
	border-left:1px solid #c9c9c9;
	border-right:1px solid #c9c9c9;
	margin-bottom:13px;
}
.tablex th{
	border-bottom:1px solid #000;
	border-top:1px solid #000;
	padding:5px;
}
.tablex td{
	border-bottom:1px solid #c9c9c9;
	padding:5px;
	text-align:center;
}

A tableless table made of DIVs

Markup

<div class="tabletWrapper">
	<div class="tablet">
		<p class="tabletHeader">
			<span class="tabletCell-1">Col 1</span>
			<span class="tabletCell-2">Col 2</span>
			<span class="tabletCell-3">Col 3</span>
		</p>
		<p class="tabletRow">
			<span class="tabletCell-1">1</span>
			<span class="tabletCell-2">3</span>
			<span class="tabletCell-3">10</span>
		</p>
		<p class="tabletRow">
			<span class="tabletCell-1">100</span>
			<span class="tabletCell-2">300</span>
			<span class="tabletCell-3">10000</span>
		</p>
	</div>
</div>

CSS

.tabletWrapper{
	float:left;
	width:100%;
}
.tablet{
	border-left:1px solid #c9c9c9;
	border-right:1px solid #c9c9c9;
	float:left;
	margin-bottom:13px;
	width:332px;
}
.tabletHeader{
	border-bottom:1px solid #000;
	border-top:1px solid #000;
	float:left;
	font-weight:bold;
	margin:0;
	padding:0;
	width:auto;
}
.tabletRow{
	border-bottom:1px solid #c9c9c9;
	float:left;
	margin:0;
	padding:0;
	width:auto;
}
.tabletCell-1{
	display:block;
	float:left;
	padding:5px;
	width:100px;
}
.tabletCell-2{
	border-left:1px solid #c9c9c9;
	display:block;
	float:left;
	padding:5px;
	width:100px;
}
.tabletCell-3{
	border-left:1px solid #c9c9c9;
	display:block;
	float:left;
	padding:5px;
	width:100px;
}

And one more table, without any styling, just the site's defaults

Table HTML code

<table cellspacing="0" cellpadding="0" summary="">
	<caption>A caption</caption>
	<thead>
		<tr>
			<th></th>
			<th>col 1</th>
			<th>col 2</th>
			<th>col 3</th>
			<th>col 4</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th></th>
			<th>col 1</th>
			<th>col 2</th>
			<th>col 3</th>
			<th>col 4</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>row 1</th>
			<td>value 1</td>
			<td>value 2</td>
			<td>value 4</td>
			<td>value 5</td>
		</tr>
		<tr class="alt">
			<th>row 2</th>
			<td>value 1</td>
			<td>value 2</td>
			<td>value 4</td>
			<td>value 5</td>
		</tr>
		<tr>
			<th>row 3</th>
			<td>value 1</td>
			<td>value 2</td>
			<td>value 4</td>
			<td>value 5</td>
		</tr>
		<tr class="alt">
			<th>row 4</th>
			<td>value 1</td>
			<td>value 2</td>
			<td>value 4</td>
			<td>value 5</td>
		</tr>
	</tbody>
</table>

Table and display:table-cell compared

Two cells. Width of the first one has to depend on it's content. The second one is as wide as the first one allows it to be.

Can be done with both TABLE and DIV. However, they behave differently. Especially when the line gets filled up and content starts wrap. Opera. As usually, floating is an universal remedy.

Sample of stretchy shells.

Code

<table class="myTable">
	<tr>
		<td class="cellFirst">stretch TBL</td>
		<td class="cellSecond">Compare this in FireFox and IE6</td>
	</tr>
</table>
<div class="divOuter">
	<div class="divFirst">
		stretch DIV
	</div>
	<div class="divSecond">
		Compare this in FireFox and IE6
	</div>
</div>

CSS

.myTable{
	background:#eee;
	border-collapse:collapse;
	width:100%;/*try 400px*/
}
.cellFirst{
	background:#ede;
	white-space:nowrap;
}
.cellSecond{
	background:#dee;
	width:100%;
}
.divOuter{
	float:left;
	background:#eee;
	width:100%;/*try 400px*/
}
.divFirst{
	background:#ede;
	display:table-cell;
	float:left;
	width:auto;
}
.divSecond{
	background:#dee;
	display:table-cell;
	*float:left;
	width:auto;
}

2009, 2010.

Web Development - XHTML CSS JavaScript jQuery.