Cách giảm khoảng cách giữa hai hàng trong bảng html

Tất cả phụ thuộc vào css áp dụng ở đó. Điều phù hợp với tôi là sử dụng FireFox + FireBug, nhấp chuột phải vào thứ gì đó và chọn "kiểm tra phần tử bằng firebug". Nó làm nổi bật độc đáo làm nổi bật các yếu tố bạn di chuột qua trong mã và nhấp vào thứ gì đó sẽ hiển thị css áp dụng, bạn có thể chỉnh sửa cho đến khi đạt được mục đích của mình

Trong bài viết này, chúng ta sẽ hiểu cách thêm khoảng cách giữa hai hàng trong bảng bằng CSS với các ví dụ khác nhau. Chúng ta có thể thêm khoảng cách giữa hai hàng trong một bảng bằng cách sử dụng thuộc tính CSS như border-spacing và border-collapse. Chúng ta có thể thêm cả khoảng cách ngang và dọc giữa các hàng

Sau đây là các ví dụ về cách thêm Khoảng trắng giữa hai hàng trong bảng bằng CSS

ví dụ 1

Giải trình

Trong ví dụ trên, chúng tôi đã tạo một ví dụ về cách thêm khoảng cách giữa hai hàng của bảng bằng cách sử dụng CSS. Trong, chúng tôi đã thêm khoảng trắng giữa tiêu đề bảng và thân bảng

Trong bài viết này, chúng tôi xin hướng dẫn các bạn cách xóa khoảng cách giữa các ô phần tử table trong HTML

Trước

Cách giảm khoảng cách giữa hai hàng trong bảng html
Bảng trước khi xóa khoảng cách giữa các ô

Sau đó

Cách giảm khoảng cách giữa hai hàng trong bảng html
Bảng có khoảng trắng bị xóa giữa các ô bằng CSS

 

giải pháp nhanh chóng

<style>
    table {
        border-collapse: collapse;
    }
</style>

hoặc là

<table cellspacing="0">

Các ví dụ dưới đây chỉ ra hai cách để xóa khoảng trắng giữa các ô trong HTML

  1. Sử dụng thuộc tính CSS border-collapse
  2. Sử dụng thuộc tính HTML cellspacing

1. border-collapse Ví dụ về thuộc tính CSS

Trong giải pháp này, chúng tôi tạo một kiểu cho table của mình để loại bỏ khoảng cách giữa các ô (đường viền ô)

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;  /*   <--------------- REQUIRED          */
        }
    </style>
</head>
<body style="height: 100px;">
  
    <table>
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>User age</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Amy</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Tom</td>
            <td>27</td>
        </tr>
    </table>

</body>
</html>

2. cellspacing Ví dụ về thuộc tính HTML

Trong giải pháp này, chúng tôi đặt

<table cellspacing="0">
0 trong thẻ
<table cellspacing="0">
1 để loại bỏ khoảng cách giữa các ô trong bảng của chúng tôi

Ghi chú. phương pháp này đã cũ, vì vậy tốt hơn là sử dụng giải pháp CSS cho phép chuyển đổi giữa các kiểu khác nhau mà không cần sửa đổi mẫu trang (không sửa đổi mã HTML) - Với CSS, chúng ta có thể thay đổi không gian với các chủ đề trang web khác nhau

Chỉnh sửa và tạo kiểu đi đôi với nhau trong quá trình phát triển trang web hoặc trang web. Trong khi bạn đang chỉnh sửa một phần tử của trang web hoặc trang web của mình, bạn cũng phải tạo kiểu cho phần tử đó theo những thay đổi đã thực hiện, điều này là cần thiết để làm cho giao diện trang web hoặc trang web của bạn gọn gàng bên cạnh trang hoặc trang web trở nên có cấu trúc và đáp ứng. Do đó, người ta phải biết một số thuộc tính cơ bản của kiểu dáng cũng như chỉnh sửa trong CSS. Một nhà phát triển giỏi có xu hướng tìm hiểu các thuộc tính khác nhau thường xuyên và điều đó giúp xây dựng một trang web hoặc các trang web tốt hơn và đáp ứng tốt hơn nhiều

chuyện vặt vãnh

Vì chúng ta đang nói về cách tạo kiểu và chỉnh sửa, chúng ta hãy xem mục đích của bài viết này và cố gắng hiểu cách chúng ta có thể điều chỉnh khoảng cách giữa hai hàng trong bảng bằng cách sử dụng CSS. Phương pháp này không khó chút nào, tất cả những gì bạn cần làm là chỉnh sửa một số đoạn mã và chắc chắn bạn có thể đạt được điều này một cách dễ dàng mà không cần tốn nhiều công sức.

Tất cả chúng ta đã xử lý các bảng hoặc lưới, chúng còn được gọi là lưới nhiều lần. Việc bao gồm các bảng trên trang web hoặc trang web của bạn được coi là một cách thực hành rất tốt. Bảng hoặc lưới có thể được sử dụng cho nhiều mục đích, ví dụ: chúng có thể được sử dụng để so sánh hoặc phân biệt giữa hai thuật ngữ bất kỳ hoặc để cung cấp một số dữ liệu thực tế, v.v. Bên cạnh đó, việc bao gồm các bảng hoặc lưới cũng làm giảm công việc đánh máy của bạn. Do đó, nếu bạn nghĩ rằng một bảng hoặc lưới là đủ mà không cần viết cả đoạn văn cho một phần thông tin nhất định, thì bạn cứ tiếp tục

Phương pháp

Bây giờ chúng ta đã nói về bảng hoặc lưới, chúng ta hãy xem giải pháp của phương pháp mà chúng ta muốn đạt được

Khoảng cách giữa hai hàng có thể được điều chỉnh bằng thuộc tính border-spacing và border-collapse trong CSS

Trong đó thuộc tính border-spacing được sử dụng để đặt khoảng cách giữa các đường viền với các ô liền kề và thuộc tính border-collapse được sử dụng để thu gọn các ô liền kề và tạo đường viền chung

cú pháp

    Element{
        border-collapse:separate;
        border-spacing:length;
    }

Thí dụ





    



    

Adjusting space between two rows in a table

Roll No. Name Gender 1 Anjali Female 2 Hitendra Male 3 Nidhi Female

đầu ra

Cách giảm khoảng cách giữa hai hàng trong bảng html

Do đó, trong ví dụ trên, bạn có thể thấy khoảng cách giữa các ô liền kề của bảng trên vì có một khoảng đệm 4px giữa mỗi hai hàng

Không khó lắm phải không?