CSS Properties: How to specify the distance between the borders of adjacent?

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 specify the distance between the borders of adjacent</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
table#xyz { /* Defines a CSS rule for a table with the ID 'xyz' */
    border-spacing:0px; /* Sets the spacing between the borders of adjacent table cells to 0 pixels */
}
</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 id="xyz" border="2"><!-- Creates a table with the ID 'xyz' 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 -->
</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 a table with the ID xyz, setting its border-spacing property to 0px, which specifies the distance between the borders of adjacent table cells to be 0 pixels.
The paragraph element <p> displays the text "w3resource Tutorial".
A <table> element with the ID xyz and a border of 2 pixels is created, with rows and cells containing text.
A line break <br> is inserted after the table.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page