CSS Table Property Information
In this tutorial, we will give you complete information about CSS Table properties.
CSS Table Property Introduction
You must know that the HTML table is used to show data in tabular format.
You can make Present Data through Tables a more interesting and useful style. For which Table Properties have been created in CSS.
You can customize the Border Setting, Caption, Cells, etc. of the Table by the Table Properties of CSS.
Different Types of CSS Table Properties
Various Table Properties are provided by CSS to customize HTML Table.
- border
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
Border Property
The border property is used to define the border in the table. You can define a border for each element of the table. See the example below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Border</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
,
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
You can see the result like this.
Border-collapse-property
You must have seen in the above table that each element has different borders. And space has also been given in the middle of the border.
The work of removing this redundant border is done by the border-collapse property. With this, all the elements share the border and the space ends. It has two possible values, the first is separate and the second is collapse.
You can take a a diploma in web development and become an expert…
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Border Collapse</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
,
table {
border-collapse: collapse;
,
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
You can see the result like this.
Border-spacing property
This property is used to define the distance between one cell to another. Which you can control from both sides.
If you declare only one value, then it sets the equal distance from both the sides i.e. Vertically and Horizontally.
And if you declare both the values, then the first value defines the distance horizontally and the second value defines the distance vertically.
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Border Spacing</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
,
table {
border-spacing: 10px;
,
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
You can see the result like this.
Caption-side property
You must have defined the title i.e. Caption in the HTML Table. Which appears above the By Default Table. The caption-side property is used to control the position of the table caption. Its possible values are top, bottom left, and right.
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Caption Position</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
,
table {
caption-side: top;
,
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
You can see the result like this.
Empty-cells property
Many times we do not have enough data, then some cells are left blank. Whatever appears in the table and increases the size of the table.
But, you can hide the border of these empty cells by the empty-cells property. It can have two possible values. With the show, you display the border and with hide, you hide the border.
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Empty Cells Property</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
,
table {
empty-cells: hide;
,
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
<td>Row 1, Column 3 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
You can see the result like this.
Table-layout property
The table-layout property is used to control the layout of the border according to the data. This property has two possible values. Cells are displayed equal length-width with a fixed value. And the auto value is displayed according to the cell data length.
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Layout Property</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
,
table {
table-layout: auto;
,
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>This is Column 2 of Row 1. </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
Here you can see the result.
Join a web designing training in Delhi and learn advanced courses…
Information about other table properties
Till now you were reading about Table Properties available by CSS. And apart from these, you can also use some other CSS properties for the table.
You can also use CSS Text Properties, Color Property, Background Property, Width & Length Property, and Attributes that work with some Table Elements as CSS Properties.
You can also read: CSS Background Property Information
What have you learned?
In this tutorial, we have given you complete information about CSS Table Properties. I hope it will help you to learn about the CSS Table Property in Information.
