Hello guys! morning to you all. I welcome you all to this section of my tutorial on CSS. In this tutorial i want to talk about CSS Tables, this is the same with HTML Tables but the only difference is that in CSS Tables CSS rules are applied to it.
This section teaches you how to set different properties of a HTML Table using CSS. You can set the following properties of a table:
- The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain it's style.
- The border-spaacing specifies the width that should appear between table cells.
- The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the HTML document. The caption side property is used to control the placement of the table caption.
- The empty-cells specifies whether the border should be shown if a cell is empty.
- The table-layout allows the browsers to speed up the layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
Now lets see how to make use of these properties mentioned above with few examples.
The border-collapse Property
This property can have two values collapse and separated. The following example below makes use of both values:
<html>
<head>
<style type="text/css">
table.one {border-collapse: collapse;}
table.two {border-collapse: separate;}
td.a {
border-style: dotted;
border-width: 4px;
border-color: #000000;
padding: 6px;
}
td.b {
border-style: solid;
border-width: 4px;
border-color: #333333;
padding: 6px;
}
</style>
</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
<head>
<style type="text/css">
table.one {border-collapse: collapse;}
table.two {border-collapse: separate;}
td.a {
border-style: dotted;
border-width: 4px;
border-color: #000000;
padding: 6px;
}
td.b {
border-style: solid;
border-width: 4px;
border-color: #333333;
padding: 6px;
}
</style>
</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
You can also read our tutorial post on: Css Syntax
The border-spacing Property
The border spacing specifies the distance that separates the adjacent cell's borders. It can take either one or two values; this should be units of length.
If you provide only one value, it applies to both horizontal and vertical borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing.
NOTE: Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide only one value */
table.example {border-spacing: 5px;}
/* Below is an example of how you can provide two values */
table.example {border-spacing: 5px; 10px;}
</style>
/* If you provide only one value */
table.example {border-spacing: 5px;}
/* Below is an example of how you can provide two values */
table.example {border-spacing: 5px; 10px;}
</style>
Now let's modify the previous example and see the effects:
<html>
<head>
<style type="text/css">
table.one {
border-collapse: collapse;
width: 350px;
border-spacing: 5px;
}
table.two {
border-collapse: separate;
width: 350px;
border-spacing: 5px 10px;
}
</style>
</head>
<body>
<table class="one" border="2">
<caption>Collapse Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two" border="2">
<caption>Separate Border Example with border-spacing</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
<head>
<style type="text/css">
table.one {
border-collapse: collapse;
width: 350px;
border-spacing: 5px;
}
table.two {
border-collapse: separate;
width: 350px;
border-spacing: 5px 10px;
}
</style>
</head>
<body>
<table class="one" border="2">
<caption>Collapse Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two" border="2">
<caption>Separate Border Example with border-spacing</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
You can also read our tutorial post on: Html Layout
The caption-side Property
The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table. The table that follows lists the possible values.
This property can have one of the four values top, bottom, left, or right. The following example below uses each of these values mentioned above.
NOTE: These properties may not work with your IE browsers.
<html>
<head>
<style type="text/css">
caption.top {caption-side: top;}
caption.bottom {caption-side: bottom;}
caption.left {caption-side: left;}
caption.right {caption-side: right;}
</style>
</head>
<body>
<table style="width: 350px; border: 2px solid black;">
<caption class="top"> This caption will appear at the top</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
<br />
<table style="width: 350px; border: 2px solid black;">
<caption class="bottom"> This caption will appear at the bottom</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
<br />
<table style="width: 350px; border: 2px solid black;">
<caption class="left"> This caption will appear at the left</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
<br />
<table style="width: 350px; border: 2px solid black;">
<caption class="right"> This caption will appear at the right</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
</body>
</html>
<head>
<style type="text/css">
caption.top {caption-side: top;}
caption.bottom {caption-side: bottom;}
caption.left {caption-side: left;}
caption.right {caption-side: right;}
</style>
</head>
<body>
<table style="width: 350px; border: 2px solid black;">
<caption class="top"> This caption will appear at the top</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
<br />
<table style="width: 350px; border: 2px solid black;">
<caption class="bottom"> This caption will appear at the bottom</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
<br />
<table style="width: 350px; border: 2px solid black;">
<caption class="left"> This caption will appear at the left</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
<br />
<table style="width: 350px; border: 2px solid black;">
<caption class="right"> This caption will appear at the right</caption>
<tr><td class="a"> Cell A</td></tr>
<tr><td class="b"> Cell B</td></tr>
</table>
</body>
</html>
You can also read our tutorial post on: Html Javascript
The empty-cells Property
The empty-cells property indicates whether a cell without any content should have a border displayed.
This property can have one of the three values - show, hide, or inherit. Below is the empty-cells property used to hide borders of empty cells in the <table> element.
<html>
<head>
<style type="text/css">
table.empty {
border-collapse: collapse;
width: 350px;
empty-cells: hide;
}
td.empty {
padding: 6px;
border-style: solid;
border-width: 2px;
border-color: #999999;
}
</style>
</head>
<body>
<table class="empty">
<tr>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
</table>
</body>
</html>
<head>
<style type="text/css">
table.empty {
border-collapse: collapse;
width: 350px;
empty-cells: hide;
}
td.empty {
padding: 6px;
border-style: solid;
border-width: 2px;
border-color: #999999;
}
</style>
</head>
<body>
<table class="empty">
<tr>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
</table>
</body>
</html>
You can also read our tutorial post on: Html Header
The table-layout Property
The table-layout property is meant to help you control how a browser should render or lay out a table.
The property can have one of the three values:fixed, auto, or inherit.
The following example shows the differences between these properties.
NOTE: This property is not supported by many browsers, so i will advice you all not to rely on this property.
<html>
<head>
<style type="text/css">
table.auto {
table-layout: auto;
}
table.fixed {
table-layout: fixed;
}
</style>
</head>
<body>
<table class="auto" border="2" width="80%">
<tr>
<td width="20%">Web design tutorialz</td>
<td width="20%">Web design tutorialz</td>
<td width="40%">Web design tutorialz</td>
</tr>
</table>
<br />
<table class="fixed" border="2" width="80%">
<tr>
<td width="20%">Web design tutorialz</td>
<td width="20%">Web design tutorialz</td>
<td width="40%">Web design tutorialz</td>
</tr>
</table>
</body>
</html>
<head>
<style type="text/css">
table.auto {
table-layout: auto;
}
table.fixed {
table-layout: fixed;
}
</style>
</head>
<body>
<table class="auto" border="2" width="80%">
<tr>
<td width="20%">Web design tutorialz</td>
<td width="20%">Web design tutorialz</td>
<td width="40%">Web design tutorialz</td>
</tr>
</table>
<br />
<table class="fixed" border="2" width="80%">
<tr>
<td width="20%">Web design tutorialz</td>
<td width="20%">Web design tutorialz</td>
<td width="40%">Web design tutorialz</td>
</tr>
</table>
</body>
</html>
Alright guys! that's it for this tutorial on CSS table, feel free to drop your questions on the comment box below.
Don't forget to subscribe with us to get all our tutorial posts sent directly to your mail. Also like our facebook page, see you in my next tutorial and bye for now.