| header 1 | header 2 |
|---|---|
| footer 1 | footer 2 |
| cell 1 | cell 2 |
| cell 3 | cell 4 |
| cell 5 | cell 6 |
<html>
<head>
<!-- CSS rules embedded in HTML -->
<style>
.table_for_data {
width: 300px;
border-collapse: collapse;
}
.table_for_data colgroup col.left {
border-right: 1px solid black;
width:50%;
}
.table_for_data thead tr, .table_for_data tbody tr {
border-bottom: 1px solid black;
}
.table_for_data td {
padding-left: 5px;
}
</style>
</head>
<body>
<!-- HTML code of the table. -->
<table class="table_for_data">
<caption> Interesting Data </caption>
<colgroup>
<col class="left"> <!-- col is a void element -->
<col class="right">
</colgroup>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>footer 1</td>
<td>footer 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
</body>
</html>
Within your CSS you can:
- add a border to table's rows using a CSS selector for
trelements - add a width to table's columns using a CSS selector for
coltags
No comments:
Post a Comment