Web development, coding & SEO

A classic <table> and a tableless table

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

A classic <table>

Col 1	Col 2	Col 3
1	3	10
100	300	10000

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 default one

A caption

	col 1	col 2	col 3	col 4
	col 1	col 2	col 3	col 4
row 1	value 1	value 2	value 4	value 5
row 2	value 1	value 2	value 4	value 5
row 3	value 1	value 2	value 4	value 5
row 4	value 1	value 2	value 4	value 5

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>

2009, 2010.

---