HTML&CSS · December 20, 2023

Css Basic: border-spacing

CSS Basics: border-spacing

CSS (Cascading Style Sheets) is a fundamental technology used to style and format web pages. It provides developers with a wide range of properties and values to control the appearance of HTML elements. One such property is border-spacing, which allows you to define the space between the borders of adjacent table cells.

Understanding border-spacing

When working with HTML tables, you may want to adjust the spacing between cells to improve readability or achieve a specific design. By default, table cells have no spacing between them, resulting in a compact layout. However, using the border-spacing property, you can add space between cells both horizontally and vertically.

The border-spacing property accepts two values: the horizontal spacing and the vertical spacing. For example, if you set border-spacing: 10px;, it will add 10 pixels of space both horizontally and vertically between adjacent cells.

Applying border-spacing

To apply border-spacing to a table, you can use either inline CSS or an external stylesheet. Let's consider an example:

<table style="border-spacing: 10px;">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

In the above example, a spacing of 10 pixels is applied both horizontally and vertically between the cells of the table. You can adjust the value according to your design requirements.

Code Example

Let's take a look at a more comprehensive example:

<style>
  table {
    border-collapse: separate;
    border-spacing: 10px;
  }
  td {
    border: 1px solid black;
    padding: 10px;
  }
</style>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

In this example, we have applied a spacing of 10 pixels between cells using the border-spacing property. Additionally, we have set a border and padding for each cell to enhance the visual appearance of the table.

Summary

The border-spacing property in CSS allows you to control the spacing between adjacent cells in an HTML table. By adjusting the horizontal and vertical values, you can create a visually appealing layout. To apply border-spacing, use the border-spacing property within the style attribute of the table element or in an external stylesheet.

If you are looking for reliable VPS hosting solutions, consider Server.HK. With our top-notch VPS services, you can enjoy high-performance hosting for your websites and applications.

You may also like...