Mục lục:
Video: 01-Viết từ đầu 1 trang Web responsive sử dụng Bootstrap 4, HTML5 và CSS3 2025
Đôi khi trang web của bạn bao gồm dữ liệu được trình bày tốt nhất trong một bảng. Bạn có thể sử dụng hệ thống bảng đầy đủ của HTML5 để tạo các bảng như trong ví dụ này:
Cấu trúc cơ bản của một bảng trong định dạng HTML là dễ hiểu; hãy kiểm tra mã tạo ra bảng trong ví dụ:
basicTable. bảng html, td, th {border: 1px solid black;}Bảng cơ bản
Superheroes HTML
Anh hùng | Sức mạnh | Nemesis |
---|---|---|
Các XMLator | Tiêu chuẩn tuân thủ | Sloppy Code Boy |
Captain CSS | Superlayout > Chúa tể trị của phụ nữ | Trình duyệt Người phụ nữ |
Độ tương thích | Quái quyệt xấu xí | Kiểm tra mã cho thấy rằng bảng chỉ đơn giản là một tập hợp các thẻ được lồng nhau cẩn thận. Quá trình xây dựng một bảng không phải là khó khăn, nhưng nó đòi hỏi một số suy nghĩ trước. |
-
Việc phác thảo bảng trên giấy đầu tiên là một ý tưởng hay, đặc biệt nếu nó phức tạp.
Bắt đầu bảng bằng thẻ
-
.
Cặpbao quanh toàn bộ bảng.
-
.
để đính kèm mỗi hàng dữ liệu. Tựa đề với
-
. Thông thường, hàng trên cùng (và có thể là cột bên trái nhất) chứa tiêu đề. Sử dụng cặp
để biểu thị văn bản cần được coi như là một tiêu đề ô. Theo mặc định, các tế bào như vậy thường mạnh hơn và tập trung hơn, nhưng có thể thay đổi bằng CSS. Chỉ định các ô dữ liệu thông thường với cặp
-
. Giữ số lượng tế bào thống nhất giữa các hàng.
-
Khi bạn trở nên quen thuộc với các bảng HTML5, bạn có thể tìm cách để mở rộng một ô trên nhiều hàng hoặc cột.
Thêm CSS nếu cần.
-
Các bảng có một định dạng cơ bản, bạn có thể thay đổi bằng CSS - ví dụ để thêm các đường viền.
Mặc dù người dùng HTML5 đã phát triển cách sử dụng các bảng cho các mục đích bố trí, CSS cung cấp tất cả các kỹ thuật bố cục trang mà bạn cần, do đó sử dụng bảng HTML5 cho mục đích dự định của chúng: trình bày dữ liệu dạng bảng.
