Thuộc tính “rowspan” là gì và cách sử dụng với phần tử “td” trong HTML?

Thuoc Tinh Rowspan La Gi Va Cach Su Dung Voi Phan Tu Td Trong Html



Trong HTML, “ khoảng cách hàng ” là một thuộc tính có thể được sử dụng trong khi tạo bảng. Nó thường được sử dụng để hợp nhất nhiều ô liền kề theo hướng dọc. Nó có thể được sử dụng để tạo các thiết kế bảng phức tạp đồng thời tạo thêm hứng thú trực quan cho người dùng. Bằng cách sử dụng nó, nhà phát triển có thể giảm mã HTML và cải thiện khả năng đọc bảng. Hơn nữa, thuộc tính “rowspan” có thể giúp tổ chức một bảng bằng cách nhóm nhiều ô.

Hướng dẫn này giải thích thuộc tính “rowspan” là gì và cách sử dụng nó với phần tử “td”.

Thuộc tính 'dải hàng' là gì?

Thuộc tính “rowspan” được sử dụng để hợp nhất nhiều ô theo hướng dọc. Nó có thể được truy cập như “ hàngpan = giá trị ”, nơi “ giá trị ” là số hàng cần gộp theo chiều dọc. Nó có lợi cho việc nâng cao khả năng đọc của người dùng và hiển thị dữ liệu phức tạp theo cách hấp dẫn người dùng hơn.





Phần tử 'td' là gì?

Các ' td ” hay phần tử dữ liệu bảng được sử dụng để xác định một ô trong bảng HTML. Nó chủ yếu được sử dụng cùng với các thành phần HTML bảng khác như “”, “”, “

để tạo nội dung bảng. Nó cũng có thể được sử dụng với các thuộc tính như “colspan” và “rowspan” để thêm các tính năng thiết kế bổ sung, giảm độ phức tạp và cải thiện yếu tố dễ đọc, v.v. Nó được sử dụng trong tệp HTML bằng cách sử dụng “ ” thẻ chèn các hàng trong bảng và sử dụng “
' nhãn.



Làm cách nào để sử dụng thuộc tính “rowspan” với phần tử “td”?

Để minh họa rõ hơn về mối quan hệ giữa thuộc tính “rowspan” và phần tử “td”. Hãy để chúng tôi xem qua một ví dụ thực tế bằng cách làm theo hướng dẫn từng bước dưới đây:



Bước 1: Tạo bảng trong HTML

Đầu tiên, tạo một bảng với sự trợ giúp của “ ' nhãn. Bên trong nó thêm nhiều “

” để tạo ô:



< phong cách >

bàn{

sụp đổ biên giới: sụp đổ;

lề: 40px;

}

thứ, td{

viền:2px màu đỏ đặc;

phần đệm: 20px;

}

< / phong cách >

< / cái đầu >

< thân hình >

< bàn >

< tr >

< quần què > emp.id < / quần què >

< quần què > Tên nhân viên < / quần què >

< quần què > Lương < / quần què >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / td >

< td > 160.000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > thánh Giuse < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Angela < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > đỏ tươi < / td >

< td > 80.000 < / td >

< / tr >

< / bàn >

< / thân hình >

Trong đoạn mã trên:

  • Đầu tiên, năm hàng đã được tạo và một số dữ liệu giả được cung cấp cho mỗi ô.
  • Tiếp theo, phần “ bàn ” phần tử được chọn và thiết lập “ sụp đổ ” giá trị cho CSS “ sụp đổ biên giới ' tài sản.
  • Sau đó, “ ranh giới ' Và ' đệm ” thuộc tính được sử dụng để nâng cao khả năng hiển thị của người dùng và tạo hiệu ứng hấp dẫn người dùng.

Sau khi thực thi mã, bảng sẽ xuất hiện như sau:



Đầu ra ở trên hiển thị rằng bảng đã được tạo và tạo kiểu.

Bước 2: Sử dụng Thuộc tính “rowspan” với Phần tử “td”

Các ' khoảng cách hàng ” Thuộc tính hợp nhất các ô liền kề theo hướng dọc. Nó được sử dụng với '

” phần tử/thẻ. Thuộc tính lấy một số làm giá trị và cho biết có bao nhiêu ô được hợp nhất theo hướng dọc. Ô liền kề sắp tới phải có số lượng ít hơn một ô và khoảng trống đó được lấp đầy bởi thuộc tính “rowspan” như minh họa bên dưới:

< thân hình >

< bàn >

< tr >

< quần què >Emp.id< / quần què >

< quần què >Tên nhân viên< / quần què >

< quần què >Lương< / quần què >

< / tr >

< tr >

< td > 1 < / td >

< td >John< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Joseph< / td >

< td khoảng cách hàng = '2' > 120 ,000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angela< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >đỏ tươi< / td >

< td > 80 ,000< / td >

< / tr >

< / bàn >

< / thân hình >

Trong đoạn mã trên:

  • “Khoảng hàng” được đính kèm với nhân viên có “ Lương ” phần tử td.
  • Giá trị của ' 2 ” được cung cấp cho thuộc tính “ rowspan ” đặt cùng một dữ liệu trong cả hai ô liền kề như được hiển thị bên dưới:

Đầu ra minh họa rằng hai ô được hợp nhất và khả năng đọc cho người dùng hiện đã được nâng cao.

Phần kết luận

Các ' khoảng cách hàng ” thuộc tính hoạt động với “ td ” để hợp nhất nhiều ô liền kề theo hướng dọc. Thuộc tính lấy một số làm giá trị và cho biết có bao nhiêu ô được hợp nhất. Nó được sử dụng khi cùng một dữ liệu được cung cấp cho nhiều ô. Blog này đã giải thích “rowspan” là gì và cách sử dụng nó với phần tử “td” trong HTML.

Khác

Thể LoạI

Bài ViếT Phổ BiếN

Làm cách nào để triển khai tính năng Tự hỏi với Chuỗi Tìm kiếm?

Cách sử dụng biểu tượng cảm xúc trong Windows 10

Làm cách nào để sử dụng lệnh ghép ngắn Rename-ItemProperty để đổi tên thuộc tính của một mục trong PowerShell?

Cách cài đặt LAMP trên Ubuntu 24.04

Làm cách nào để khắc phục sự cố cài đặt và treo ứng dụng di động Discord?

Làm cách nào để sử dụng Web Worker cho đa luồng trong JavaScript?

Cách sử dụng CƠ SỞ DỮ LIỆU MẪU trong MySQL

Làm cách nào để cài đặt Node.js từ một tệp trong Linux?

Tìm kiếm an toàn trong Android hoạt động như thế nào?

Mã lỗi 279 có nghĩa là gì trong Roblox?

Cách tạo nút hủy HTML chuyển hướng đến một URL

Không gian tab thay vì nhiều khoảng trắng không ngắt (“ ”)?

Sao chép bảng trong SQL

Cách cài đặt và thiết lập bản cập nhật Windows

Chuyển đổi JSON thành Mảng/bản đồ – JavaScript

Readline moveCursor() hoạt động như thế nào trong Node.js?

Cách đặt mức độ ưu tiên trong Trình quản lý tác vụ trên Windows (2022)

Mệnh đề SQL VỚI

5 cách khắc phục để giải quyết lỗi BSOD SrtTrail.txt trên Windows

Cách bảo mật HAProxy của bạn bằng SSL