×

Cách sử dụng border-spacing - Điều chỉnh khoảng cách ô bảng trong CSS

Avatar of admin
admin 0 Views

Khi làm việc với HTML và CSS, việc định dạng bảng sao cho thẩm mỹ và trực quan là vô cùng quan trọng. Một trong những thuộc tính CSS giúp điều chỉnh bố cục của bảng là border-spacing. Đây là thuộc tính cho phép bạn thiết lập khoảng cách giữa các ô trong bảng, giúp tạo ra một khoảng trống giữa các ô để bảng trở nên thoáng đãng hơn. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết cách sử dụng border-spacing cũng như các lưu ý quan trọng khi áp dụng thuộc tính này.

1. Hiểu rõ về border-spacing

Thuộc tính border-spacing được áp dụng cho các bảng HTML và chỉ định khoảng cách giữa các ô của bảng. Giá trị của border-spacing có thể được cung cấp theo đơn vị đo như pixel (px), em, rem hay phần trăm (%).

Cú pháp

Cú pháp cơ bản của border-spacing như sau:

table {
    border-spacing: giá_trị;
}

Bạn có thể cung cấp một hoặc hai giá trị:

  • Nếu chỉ có một giá trị: Khoảng cách này được áp dụng đều cho cả chiều ngang và chiều dọc.
  • Nếu có hai giá trị: Giá trị đầu tiên chỉ định khoảng cách ngang, giá trị thứ hai chỉ định khoảng cách dọc.

Ví dụ

/* Khoảng cách đều cho cả chiều ngang và chiều dọc */
table {
    border-spacing: 10px;
}

/* Khoảng cách ngang 10px, dọc 15px */
table {
    border-spacing: 10px 15px;
}

2. Sử dụng border-spacing trong thực tế

Giả sử bạn có một bảng HTML như sau:

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

Thêm CSS để điều chỉnh khoảng cách

table {
    border-spacing: 15px; /* Áp dụng khoảng cách 15px cho cả hai chiều */
}

Kết quả

Khi áp dụng CSS trên, bạn sẽ thấy khoảng cách giữa các ô trong bảng tăng lên, tạo ra một không gian rộng rãi và dễ nhìn hơn. Điều này có thể giúp bảng của bạn trông gọn gàng và chuyên nghiệp hơn.

3. Lưu ý

  • Không tác động đến border bên ngoài: border-spacing chỉ tác động đến khoảng cách giữa các ô, không tác động đến đường viền bên ngoài của bảng.
  • Không tương thích với border-collapse: collapse;: Nếu bạn sử dụng border-collapse: collapse;, thuộc tính border-spacing sẽ không có hiệu lực. Để sử dụng border-spacing, bạn cần loại bỏ border-collapse hoặc đặt giá trị của nó là separate.
table {
    border-collapse: separate;
    border-spacing: 10px;
}
  • Tương thích trình duyệt: border-spacing là một thuộc tính CSS được hỗ trợ bởi hầu hết các trình duyệt hiện đại. Tuy nhiên, nếu bạn phải hỗ trợ các phiên bản trình duyệt cũ, hãy kiểm tra khả năng tương thích trước khi sử dụng.

4. Kết hợp với các thuộc tính khác

Để tạo ra các bảng đẹp mắt và chuyên nghiệp, bạn có thể kết hợp border-spacing với các thuộc tính CSS khác như padding, border, background-color,...

table {
    border-spacing: 10px;
    border: 1px solid #ccc;
}

td {
    padding: 10px;
    background-color: #f9f9f9;
}

Kết hợp các thuộc tính này sẽ giúp bạn có được một bảng hài hòa, chuyên nghiệp và dễ nhìn hơn.

Kết luận

Thuộc tính border-spacing trong CSS đóng vai trò quan trọng trong việc tạo ra các bảng có khoảng cách giữa các ô hợp lý, giúp tăng tính thẩm mỹ và dễ đọc. Nắm vững cách sử dụng border-spacing cùng với các thuộc tính CSS khác sẽ giúp bạn tạo ra các trang web chuyên nghiệp và ấn tượng hơn.

Comments

Bài viết liên quan