CSS Table
You can make your table by using the various properties available in CSS. You can select the layout that you want along with the different colors and other properties. We will discuss all these properties in this section.
Select the layout of the table
The
table-layout property allows you to select a layout for your table. This property can have two possible values -
automatic or
fixed. The automatic value sets the column width by the largest unbreakable content of that column. This layout can be slow since, the content of all the cells will be accessed and then the width will be decided. The fixed value is fast since, the column width is independent of the column's content.
Example:
<![CDATA[<html>
<head>
<style type="text/css">
table.fix {table-layout: fixed}
table.auto {table-layout: automatic}
</style>
</head>
<body>
<table class="fix" border="1" width="100%"><tr>
<td width="20%">This is column1</td>
<td width="40%">This is column2</td>
<td width="40%">This is column3</td>
</tr>
</table>
<table class="auto" border="1" width="100%"><tr>
<td width="20%">This is column1</td>
<td width="40%">This is column2</td>
<td width="40%">This is column3</td>
</tr>
</table>
</body>
</html>
]]>
Output:
| This is column1 |
This is column2 |
This is column3 |
| This is column1 |
This is column2 |
This is column3 |
Collapse table border
You can choose to collapse the table border or detach it by using the
border-collapse property. It can have either of the two properties,
collapse or
separate. Collapse is the default value. It causes the table borders to collapse into a single border. Separate value detaches the borders.
Example:
<![CDATA[<html>
<head>
<style type="text/css">
table.sep {border-collapse: separate}
table.coll {border-collapse: collapse}
</style>
</head>
<body>
<table class="sep" border="1"><tr>
<th>Serial No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Griffin</td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
</tr>
</table>
<table class="coll" border="1"><tr>
<th>Serial No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Griffin</td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
</tr>
</table>
</body>
</html>]]>
Output:
| Serial No. |
Name |
| 1 |
Griffin |
| 2 |
Arthur |
| 3 |
Peter |
| Serial No. |
Name |
| 1 |
Griffin |
| 2 |
Arthur |
| 3 |
Peter |
Handle empty cells
You can choose to display empty cells or hide them.
empty-cells property allows you to do so. It can have two possible values -
hide, which hides the empty columns which is also the default value and
show, which displays the empty columns.
Example:
<![CDATA[<html>
<head>
<style type="text/css">
table.hide {empty-cells: hide}
table.show {empty-cells: show}
</head>
<body>
<table class="hide" border="1"><tr>
<th>Serial No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
</tr>
</table>
<table class="show" border="1"><tr>
<th>Serial No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
</tr>
</table>
</body>
</html>]]>
Output:
| Serial No. |
Name |
| 1 |
|
| 2 |
Arthur |
| 3 |
Peter |
| Serial No. |
Name |
| 1 |
|
| 2 |
Arthur |
| 3 |
Peter |
Set space between table borders
By using
border-spacing property, you can set distance between the borders of adjacent cells.
Note: This property can be used only where
border-collapse property is set to
separate.
Example:
<![CDATA[<html>
<head>
<style type="text/css">
table.one {border-collapse: separate; border-spacing: 20px}
table.two {border-collapse: separate; border-spacing: 30px 50px}
</style>
</head>
<body>
<table class="one" border="1"><tr>
<th>Serial No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Griffin</td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
</tr>
</table>
<table class="two" border="1"><tr>
<th>Serial No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Griffin</td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
</tr>
</table>
</body>
</html>]]>
Output:
| Serial No. |
Name |
| 1 |
Griffin |
| 2 |
Arthur |
| 3 |
Peter |
| Serial No. |
Name |
| 1 |
Griffin |
| 2 |
Arthur |
| 3 |
Peter |
Set position of the table caption
The
caption-side property allows you to set the position of the caption.
Example:
<![CDATA[<html>
<head>
<style type="text/css">
table.cap {border-collapse: separate; caption-side: top}
</style>
</head>
<body>
<table class="cap" border="1">
<caption>Table caption</caption>
<tr>
<th>Serial No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Griffin</td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
</tr>
</table>
</body>
</html>]]>
Output:
Table caption
| Serial No. |
Name |
| 1 |
Griffin |
| 2 |
Arthur |
| 3 |
Peter |
