In this CSS tutorial we will be learning all the various CSS properties for the HTML table element. A table element can contain multiple child elements such as <th>, <td>, <tr>, and <caption>. And like other CSS text elements we can specify simple properties to <th>, <td>, and <caption> elements. But in this tutorial, we will be discussing the important properties associated only with the <table> and its child elements.
CSS Table
| Properties | Description |
| border-collapse | This property specifies whether the border of each cell should collapse with its adjacent cells, or it maintains its own style. |
| border-spacing | It specifies the spacing between two adjacent cells if the border does not collapse. |
| caption-side | This property is for <caption> element. And it determines the caption position. |
| empty-cell | It specifies whether to show borders for an empty cell or not. |
| table-layout | It makes the render speed of a table faster. |
CSS border-collapse Property
The border-collapse property accepts two values collapse and separate. If the value is collapse, then the border of one cell will merge with its neighbouring cell. The separate value set some space between the table cells.
Example
<html>
<head>
<style type = "text/css">
table.first {border-collapse:collapse;}
table.second {border-collapse:separate;}
td.f {
border-style:solid;
border-width:3px;
border-color:black;
padding: 10px;
}
td.s {
border-style:solid;
border-width:3px;
border-color:black;
padding:10px;
}
</style>
</head>
<body>
<table class="first">
<caption>Front End Technologies</caption>
<tr>
<td class="f"> HTML</td>
<td class="f"> HyperText Markup Language</td>
</tr>
<tr>
<td class="f"> CSS</td>
<td class="f"> Cascading Style Sheet</td>
</tr>
<tr>
<td class="f"> Js</td>
<td class="f"> javaScript</td>
</tr>
</table>
<table class="second">
<caption>Front End Technologies</caption>
<tr>
<td class="s"> HTML</td>
<td class="s"> HyperText Markup Language</td>
</tr>
<tr>
<td class="s"> CSS</td>
<td class="s"> Cascading Style Sheet</td>
</tr>
<tr>
<td class="s"> Js</td>
<td class="s"> javaScript</td>
</tr>
</table>
</body>
</html>
CSS border-spacing Property
The CSS border-spacing property specifies the space between two adjacent table cells. The spacing will apply all around the cell only if the border-collapse value is separate.
Example
<html>
<head>
<style type = "text/css">
table.sep {
border-collapse:separate;
border-spacing: 20px;
}
td.s {
border-style:solid;
border-width:3px;
border-color:black;
padding:10px;
}
</style>
</head>
<body>
<table class="sep">
<caption>Front End Technologies</caption>
<tr>
<td class="s"> HTML</td>
<td class="s"> HyperText Markup Language</td>
</tr>
<tr>
<td class="s"> CSS</td>
<td class="s"> Cascading Style Sheet</td>
</tr>
<tr>
<td class="s"> Js</td>
<td class="s"> javaScript</td>
</tr>
</table>
</body>
</html>
CSS caption-side property
The caption-side property determines where the caption of the table should be placed. It accepts values top, bottom, left and right.
Example
<html>
<head>
<style type = "text/css">
caption{
caption-side: bottom;
}
td.s {
border-style:solid;
border-width:3px;
border-color:black;
padding:10px;
}
</style>
</head>
<body>
<table class="sep">
<caption>Front End Technologies</caption>
<tr>
<td class="s"> HTML</td>
<td class="s"> HyperText Markup Language</td>
</tr>
<tr>
<td class="s"> CSS</td>
<td class="s"> Cascading Style Sheet</td>
</tr>
<tr>
<td class="s"> Js</td>
<td class="s"> javaScript</td>
</tr>
</table>
</body>
</html>
CSS empty-cell Property
The empty-cell property determines whether to display the border for an empty cell or not. It accepts values show, hide and inherit. By default, for an empty cell, the value of the empty-cell property is show.
Example
<html>
<head>
<style type = "text/css">
table.sep {
empty-cells: hide;
border-collapse:collapse;
}
td.s {
border-style:solid;
border-width:3px;
border-color:black;
padding:10px;
}
</style>
</head>
<body>
<table class="sep">
<caption>Front End Technologies</caption>
<tr>
<td class="s"> HTML</td>
<td class="s"> HyperText Markup Language</td>
</tr>
<tr>
<td class="s"> CSS</td>
<td class="s"> Cascading Style Sheet</td>
</tr>
<tr>
<td class="s"> JS</td>
<td class="s"> </td>
</tr>
</table>
</body>
</html>
CSS table-layout Property
table-layout property helps the browser render the table faster. Many browsers do not support this property, so it is recommended not to use it often. It accepts values like fixed, auto and inherit .
Example
<html>
<head>
<style type = "text/css">
table.sep {
table-layout: auto;
}
td.s {
border-style:solid;
border-width:3px;
border-color:black;
padding:10px;
}
</style>
</head>
<body>
<table class="sep">
<caption>Front End Technologies</caption>
<tr>
<td class="s"> HTML</td>
<td class="s"> HyperText Markup Language</td>
</tr>
<tr>
<td class="s"> CSS</td>
<td class="s"> Cascading Style Sheet</td>
</tr>
<tr>
<td class="s"> JS</td>
<td class="s">JavaScript </td>
</tr>
</table>
</body>
</html>
Summary
- The border-collapse property merges the adjacent cells borders.
- By default, the border-collapse property is set to separate.
- The border-spacing property set space between the table cells.
- The border-spacing only work if the border-collapse is separate.
- The empty-cell property determines whether to show the border for an empty cell or not.