Comments | HTML source | display in your current browser |
Top and bottom sides |
<style type="text/css">
#table1 {
border-top: double;
border-bottom: double;
border-right: blank
}
</style>
<table id="table1" width="250">
<tr>
<th>cell 11</th>
<th>cell 12</th>
</tr>
<tr>
<td>cell 21</td>
<td>cell 22</td>
</tr>
<tr>
<td>cell 31</td>
<td>cell 32</td>
</tr>
</table>
|
cell 11 |
cell 12 |
cell 21 |
cell 22 |
cell 31 |
cell 32 |
|
left and right rules |
<style type="text/css">
#table2 {
border-left: double;
border-right: double;
}
</style>
<table id="table2" width="250">
<tr>
<th>cell 11</th>
<th>cell 12</th>
</tr>
<tr>
<td>cell 21</td>
<td>cell 22</td>
</tr>
<tr>
<td>cell 31</td>
<td>cell 32</td>
</tr>
</table>
|
cell 11 |
cell 12 |
cell 21 |
cell 22 |
cell 31 |
cell 32 |
|
No left and right table border |
<style type="text/css">
table.hbar {
border-top:solid;
border-bottom:solid;
}
td.rightb {
border-right:solid 1px black
}
td.topb {
border-top:dotted 1px black
}
</style>
<table class="hbar" width="300" cellspacing="0" cellpadding="10" >
<caption>
3 columns
</caption>
<tr align="top">
<td class="rightb">cell 11 </td>
<td class="rightb">cell 13</td>
<td>cell 13</td>
</tr>
<tr align="top">
<td class="topb rightb">cell 21</td>
<td class="topb rightb">cell 23</td>
<td class="topb">cell 13</td>
</tr>
<tr align="top">
<td class="topb rightb">cell 31</td>
<td class="topb rightb">cell 33</td>
<td class="topb">cell 13</td>
</tr>
</table>
|
3 columns
cell 11 |
cell 13 |
cell 13 |
cell 21 |
cell 23 |
cell 13 |
cell 31 |
cell 33 |
cell 13 |
|
use css selectors |
<style type="text/css">
#table1 { border-top:solid; border-bottom:solid;}
#table1 tr:first-child th {border-right:solid 1px black}
#table1 tr:first-child th:last-child {border-right:none}
#table1 td {border-top:dotted 1px black; border-right:solid 1px black}
#table1 tr td:last-child {border-top:dotted 1px black; border-right:none}
</style>
<table id="table1" width="200" cellspacing="0" cellpadding="0">
<tr>
<th>cell 11</th>
<th>cell 12</th>
<th>cell 13</th>
</tr>
<tr>
<td>cell 21</td>
<td>cell 22</td>
<td>cell 23</td>
</tr>
<tr>
<td>cell 31</td>
<td>cell 32</td>
<td>cell 33</td>
</tr>
</table>
|
cell 11 |
cell 12 |
cell 13 |
cell 21 |
cell 22 |
cell 23 |
cell 31 |
cell 32 |
cell 33 |
|