CSS Properties: How to set the border-spacing for a table?

Last update on February 19 2024 13:03:02 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to set the border-spacing for a table</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
table.xyz1 { /* Defines a CSS rule for tables with the class 'xyz1' */
border-collapse: separate; /* Sets the border collapse behavior to separate, ensuring spacing between table cells */
border-spacing: 5px; /* Sets the spacing between table cells to 5 pixels */
border-color: #22CF64; /* Sets the color of the table border to #22CF64 */
}
table.xyz2 { /* Defines a CSS rule for tables with the class 'xyz2' */
border-collapse: separate; /* Sets the border collapse behavior to separate, ensuring spacing between table cells */
border-spacing: 5px 20px; /* Sets the horizontal and vertical spacing between table cells to 5 pixels and 20 pixels respectively */
border-color: #22CF64; /* Sets the color of the table border to #22CF64 */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<p>w3resource Tutorial</p><!-- Displays the text 'w3resource Tutorial' within a paragraph element -->
<table class="xyz1" border="2"><!-- Creates a table with class 'xyz1' and a border of 2 pixels -->
<tr><!-- Begins a table row -->
<td>HTML5</td><!-- Defines a table data cell with the text 'HTML5' -->
<td>JavaScript</td><!-- Defines a table data cell with the text 'JavaScript' -->
</tr><!-- Ends the table row -->
<tr><!-- Begins another table row -->
<td>PHP</td><!-- Defines a table data cell with the text 'PHP' -->
<td>CSS3</td><!-- Defines a table data cell with the text 'CSS3' -->
</tr><!-- Ends the table row -->
</table><!-- Ends the table -->
<br><!-- Inserts a line break -->
<table class="xyz2" border="2"><!-- Creates another table with class 'xyz2' and a border of 2 pixels -->
<tr><!-- Begins a table row -->
<td>HTML5</td><!-- Defines a table data cell with the text 'HTML5' -->
<td>JavaScript</td><!-- Defines a table data cell with the text 'JavaScript' -->
</tr><!-- Ends the table row -->
<tr><!-- Begins another table row -->
<td>PHP</td><!-- Defines a table data cell with the text 'PHP' -->
<td>CSS3</td><!-- Defines a table data cell with the text 'CSS3' -->
</tr><!-- Ends the table row -->
</table><!-- Ends the table -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document structure includes essential elements such as html, head, title, style, and body.
CSS styling is applied to tables with class xyz1 and xyz2, setting their border-collapse behavior to separate, which ensures spacing between table cells.
The border-spacing property is used to specify the spacing between table cells, with 5px for xyz1 and 5px horizontal spacing and 20px vertical spacing for xyz2.
The color of the table border is set to #22CF64 for both tables.
Two tables are created with different classes and borders, demonstrating the effect of different border-spacing configurations.

Live Demo:

See the Pen border-spacing-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page