CSS – Tables
CSS – Tables
Various properties can be used for HTML table design using CSS. The major properties that are supported by every browser as follows,
Border-collapse/separate: it specifies the appearance of whether two adjacent borders touch each other or not.
Border-spacing: it specifies the distance between two adjacent table cells.
Caption-side: it is used to write a caption for the table using <caption> tag. By default, it uses the position as top of the table but the position can be changed using this tag as bottom, left, right, etc.
Empty-cells: it hides a border of the cell when the cell is empty.
Example 1:
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse; }
table.two {border-collapse:separate;}
table.three {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
td.a {
border-style:solid;
border-width:3px;
}
td.b {
border-style:solid;
border-width:3px;
}
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table class = "one" border="1">
<caption class="top">Collapse Border Example</caption>
<tr><td class = "a"> Cell 1</td></tr>
<tr><td class = "b"> Cell 2</td></tr>
</table>
<br />
<table class = "two" border="1">
<caption class="bottom">Separate Border Example</caption>
<tr><td class = "a"> Cell 1</td></tr>
<tr><td class = "b"> Cell 2</td></tr>
</table>
<br/>
<table class = "three" border="1">
<caption class="right">Separate Border Example with border-spacing</caption>
<tr><td> Cell 1</td></tr>
<tr><td> Cell 2</td></tr>
<caption class="left">Left caption.</caption>
</table>
</body>
</html>
Output:
The above table shows the properties of Border-collapse/separate, Border-spacing and caption-side, etc.
Example 2:
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:seperate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<caption> Example of Empty-cells. </caption>
<table class = "empty">
<tr>
<th></th>
<th>Column one</th>
<th>Column two</th>
</tr>
<tr>
<th>Row one</th>
<td class="empty">Employee Code</td>
<td class="empty"></td>
</tr>
</table>
</body>
</html>
Output:
The Row one - Column Two field has empty value and it shows no border.
