-->

Cascading Style Sheets

skip to content

Tables and CSS

Does a CSS Tableless layout mean no more tables?

No a CSS tableless layout is great; however, that doesnt mean you cant, or shouldn't use tables. Tables are the best way to display information need needs to be align in rows and colums.

Style a table

Letter Score Time
A 3 1:22
B 7 3:04
C 23 7:14 

<table id="datatable">
	<tr>
		<th class="letter">
			Letter
		</th>
		<th class="score">
			Score
		</th>
		<th class="time">
			Time
		</th>
	</tr>
	
	<tr>
		<td class="letter">
			A
		</td>
		<td class="score">
			3
		</td>
		<td class="time">
			1:22
		</td>
	</tr>
	...
</table>


<style media="all" type="text/css">
table#datatable {
	width:300px;
	margin:10px;
	border:#369 1px solid;
}

table#datatable th {
	text-align:center;
	background:#369;
	color:#fff;
}

table#datatable tr:hover {
	background:#ccc;
}

table#datatable td {
	text-align:center;
	border-bottom:#666 1px dashed
}

table#datatable td.letter {
	color:blue;
	font-weight:bold;
	background:url(img/a-back.gif);
}
table#datatable td.score {
	color:green;
}
table#datatable td.time {
	color:navy;
}

</style>