codescracker


css

CSS Border Collapse



« Previous Tutorial Next Tutorial »


The border-collapse property allows you to define a way in which a border should be displayed around a table cell.

To display the border of your table in different styles, you need to set the appropriate values of the border-collapse property.

CSS border-collapse Property Values

The following table shows the possible values of the border-collapse property :

Value Description
collapse Sets a common border to all the cells of a table
separate Sets a separate border for each cell of a table
inherit Inherits the value of the border-collapse property from the parent element

CSS border-collapse Property Syntax

The following syntax shows an example of applying the border-collapse property in a table :

table { border-collapse:separate; }

In the preceding syntax, the value of the border-collapse property is set to separate. This allows you to set different borders for all the cells of a table.

CSS border-collapse Property Example

Here is an example, shows how to collapse the border of the table using CSS border-collapse property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Border Collapse Example</title>
	<style>
		table, th, td { border:2px solid red; }
		table { border-collapse:collapse; }
	</style>
</head>
<body>

<table>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Border Collapse Tutorial</td>
		<td>CSS Border Collapse Example</td>
	</tr>
	<tr>
		<td>CSS border-collapse Property Tutorial</td>
		<td>CSS border-collapse Property Example</td>
	</tr>
</table>

</body>
</html>

Here is the sample output of the above CSS border-collapse property example code:

collapse table border css

« Previous Tutorial Next Tutorial »




Tools
Calculator

Quick Links
Signup - Login - Give Online Test