Styling table columns : table « Tags « HTML / CSS
- HTML / CSS
- Tags
- table
Styling table columns
<!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" lang="en-US">
<head>
<title>Styling table columns</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style>
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 80%;
}
.datatable td {
border:2px solid #ffffff;
padding: 0.3em;
}
.datatable th {
border:2px solid #ffffff;
background-color: #00487D;
color: #FFFFFF;
font-weight: bold;
text-align: left;
padding: 0.3em;
}
.datatable colgroup.odd {
background-color: #80C9FF;
color: #000000;
}
.datatable colgroup.even {
background-color: #BFE4FF;
color: #000000;
}
</style>
</head>
<body>
<table class="datatable">
<colgroup class="odd">
<col />
<col />
</colgroup>
<colgroup class="even">
<col />
<col />
</colgroup>
<tr>
<th>Pool A</th>
<th>Pool B</th>
<th>Pool C</th>
<th>Pool D</th>
</tr>
<tr>
<td>Title</td>
<td>Title</td>
<td>New Zealand</td>
<td>Title</td>
</tr>
<tr class="even">
<td>South Africa</td>
<td>Wales</td>
<td>Scotland</td>
<td>Ireland</td>
</tr>
<tr>
<td>Samoa</td>
<td>Fiji</td>
<td>Italy</td>
<td>Argentina</td>
</tr>
<tr class="even">
<td>USA</td>
<td>Canada</td>
<td>Romania</td>
<td>Europe 3</td>
</tr>
<tr>
<td>Repechage 2</td>
<td>Asia</td>
<td>Repechage 1</td>
<td>Namibia</td>
</tr>
</table>
</body>
</html>
Related examples in the same category