Video: [Học CSS - 8] Thẻ div và vai trò khi tạo bố cục 2025
Tạo các bảng có thể dễ bị lỗi và khó sử dụng các thẻ HTML cũ hơn. Ngoài ra, đôi khi chúng tỏ ra không linh hoạt. Có thể tạo các bảng bằng cách sử dụng một kỹ thuật khác. Tất cả bạn cần là một loạt các thẻ xếp tầng để thực hiện nhiệm vụ.
Nhiều nhà phát triển đã sử dụng bảng cho tất cả các loại nhiệm vụ trong quá khứ. Tất nhiên, có sử dụng các bảng để hiển thị dữ liệu. Tuy nhiên, sắp xếp bảng cũng rất hữu ích cho việc tạo ra các hình thức để đảm bảo các yếu tố khác nhau align một cách dự đoán được. Việc sử dụng bảng thứ hai này có vấn đề vì nó làm nhầm lẫn một số phần mềm như trình đọc màn hình. Vấn đề trở thành một trong việc định nghĩa một trang được tổ chức tốt mà không gây ra vấn đề cho người xem nó.
Sử dụng các thẻ để tạo ra bảng làm cho người xem có thể xem bảng hoặc sắp xếp hợp lý các điều khiển dễ dàng như nhau. Kỹ thuật này cũng có lợi ích của người đọc màn hình không khó hiểu và phần mềm khác.
Xác định HTML cho một bảng trông giống như tạo ra một bảng bằng cách sử dụng các thẻ cũ, ngoại trừ bạn không phải lo lắng về sự sắp xếp kỳ lạ của các thẻ phức tạp để làm điều đó. Dưới đây là HTML cho một bảng chứa tiêu đề, đề mục và hai dòng nội dung.
Đây là bảng
Tiêu đề 1
Tiêu đề 2
Tiêu đề 3
Dòng 1 Cột 1
Dòng 1 Cột 2
Dòng 1 Cột 3 < Row 2 Column 1
Row 2 Column 2
Row 2 Column 3
Chú ý rằng mỗi cấp được định nghĩa bằng cách sử dụng một tên dễ nhận ra, chẳng hạn như Table, Title, Heading, Row, và Cell. Sử dụng phương pháp đặt tên này làm cho nó dễ dàng hơn nhiều để tìm ra những gì mỗi cấp của bảng là nghĩa vụ phải làm. Bạn có thể tìm thấy nhiều cách thay thế khác nhau cho cách tiếp cận trực tuyến này, nhưng cách tiếp cận cơ bản này sẽ phục vụ bạn tốt.
. Bảng {display: table;}. Tiêu đề {display: table-caption; text-align: trung tâm; phông chữ trọng lượng: đậm; font-size: larger;}. Tiêu đề {display: table-row; phông chữ trọng lượng: đậm; text-align: center;}. Hàng {display: table-row;}. Cell {display: table-cell; biên giới: rắn; chiều rộng biên giới: mỏng; padding-trái: 5px; padding-right: 5px;}
Lưu ý sử dụng thuộc tính hiển thị. Đây là tài sản quan trọng cho bảng của bạn vì nó cho trình duyệt biết cách hiển thị một phần tử cụ thể. Nếu không, không có bất kỳ điều gì kỳ lạ ngoài sự bình thường về những phong cách này. Bạn xác định thuộc tính văn bản giúp người xem phân biệt giữa các yếu tố bảng khác nhau.Các ô được cách nhau bằng một đường biên đơn giản. Hình dưới đây cho bạn thấy bảng sẽ xuất hiện như thế nào khi bạn xem nó trong trình duyệt.
