Làm thế nào để Xây dựng các bảng trong HTML5 - núm vú

Đô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. 

Lập kế hoạch cho bảng của bạn để bạn biết có bao nhiêu cột bạn muốn, và các hàng hoặc cột nào sẽ là tiêu đề.

1. 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ẻ

2. .

   Cặp

   bao quanh toàn bộ bảng.

   Tạo một hàng của bảng với cặp

3. .

   Một bảng chỉ là một dãy hàng. Bạn cần cặp

   để đính kèm mỗi hàng dữ liệu. Tựa đề với

4. . 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

5. . Giữ số lượng tế bào thống nhất giữa các hàng.

6. 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.

7. 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.