Welcome to the CSS tutorial, we already covered CSS text, images and links. Today we will cover CSS tables, and at the end of this tutorial you will be in a position to answer:
- Border-collapse – It will let you to control the appearance of the border either in a collapse (border’s are common) or separate (border’s are detached) way.
- Border-spacing – It will let you specify the width which end user will see between the table cells.
- Caption-side – It will let you specify the caption to be used either on top or in the bottom part.
- Empty-cells – It will let you specify, whether you want to show or hide the empty (no data) cells in a table.
- Table-layout – It will let you to set the guidelines to be used for the table, you can use fixed or auto.
CSS tables – Example
Now we will see the uses of the above said properties and its value with an easy to understand CSS tables example. We will use collapse, spacing and caption property in our example below. Let’s see you need an explanation or it is easy to understand from your own.
<html>
<head>
<style>
table{
border-collapse: separate;
}
table, td{
color: green;
border: 1px solid red;
border-spacing: 15px;
}
caption {
caption-side: top;
}
</style>
</head>
<body>
<table>
<caption><h2>Caption-here</h2></caption>
<tr>
<td><h2>CSS</h2></td>
<td><h2>HTML</h2></td>
</tr>
<tr>
<td><h2>PHP</h2></td>
<td><h2>Javascript</h2></td>
</tr>
</table>
</body>
</html>
The output for the above example will be:
We have just simplified and used the properties within one example. We colored CSS tables data with green, just put the caption on the top and instead of collapse value, we used separate values in border-collapse property. Beside this, we have used border spacing to 15px to let you see the difference in an easy way.
Points to Remember
- Over all border-collapse has four value (Separate, Collapse, initial, and inherit), an initial will set the default value and inherit will use its parent element. It’s better as of now to concentrate on only collapse and separate.
- Again caption –side have four values (top, bottom, initial and inherit), better use top and bottom and forget about initial and inherit.
- If you will set the table-layout to auto, it will slow down the speed, because it will first read and then finalize the layout. If you will set the value of layout to a fixed, then it will show the result as soon as it will receive first row.
Conclusion
We have just covered CSS tables and its properties with a small, easy to understand example, in case you want more examples, then see our example section or CSS reference for better understanding. If you wish to get sound technical knowledge, then you need to practice what you have learnt. And at sharplesson, you will get plenty of tutorials with examples to help you further.
Note: We have not used empty cells and table layouts in our CSS tables example, why? Because we want it to cover in detail and you will get it in CSS reference.