css is for the table layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
table { width:100%;margin-top:25px;clear:both;}
.column1, .column2, .column3, .column4 {width:25%;border-bottom:1px solid #fff;vertical-align:top;}
.column1 {background:pink}
.column2 {background:yellow}
.column3 {background:red}
.column4 {background:blue;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="2" summary="This is an example equalising layout">
<tr>
<td class="column1">This is cell 1 : This is cell 1 :</td>
<td class="column2">This is cell 2 : This is cell 2</td>
<td class="column3">This is Cell 3 : This is Cell 3 :</td>
<td class="column4">This is cell 4 with the most text: This is cell 4 with
the most text: </td>
</tr>
<tr>
<td class="column1">This is Cell 1 : This is Cell 1 :</td>
<td class="column2">This is cell 2 : This is cell 2</td>
<td class="column3">This is cell 3 with the most text: This is cell 3 with
the most text:</td>
<td class="column4">This is cell 4 : This is cell 4 : </td>
</tr>
<tr>
<td class="column1">This is cell 1 : This is cell 1</td>
<td class="column2">This is cell 2 with the most text: This is cell 2 with
the most text</td>
<td class="column3">This is Cell 3 : This is Cell 3 :</td>
<td class="column4">This is cell 4 : This is cell 4 : </td>
</tr>
<tr>
<td class="column1">This is cell 1 with the most text: This is cell 1 with
the most text</td>
<td class="column2">This is cell 2 : This is cell 2</td>
<td class="column3">This is Cell 3 : This is Cell 3 :</td>
<td class="column4">This is cell 4 : This is cell 4 : </td>
</tr>
</table>
</body>
</html>
Related examples in the same category