Bài viết này giới thiệu về bảng HTML, bao gồm các kỹ thuật viết mã cơ bản và kiểu dáng CSS Giới thiệuxác nhận. — làm thế nào để bạn sử dụng các tiêu chuẩn web để tổ chức hàng loạt dữ liệu? Trong thiết kế web, bảng là một cách hay để tổ chức dữ liệu thành dạng bảng. Bạn luôn thấy chúng trên các trang web, cho dù chúng đang đưa ra bản tóm tắt hay so sánh kết quả bầu cử chính trị, thống kê thể thao, so sánh giá cả, biểu đồ kích thước hoặc dữ liệu khác Quay trở lại Kỷ Jura của Internet, trước khi CSS được phổ biến như một phương pháp tách cách trình bày HTML khỏi cấu trúc, các bảng được sử dụng như một cách để bố trí các trang web — để tạo các cột, hộp và các khu vực chung để sắp xếp trang. . Tất nhiên, đây là cách làm sai; . Ngày nay, bạn chỉ nên sử dụng bảng để trình bày dữ liệu dạng bảng và sử dụng CSS để kiểm soát bố cục trang Từ quan điểm thiết kế thông tin, các bảng luôn thực hiện một trong hai chức năng. chúng phản ánh cấu trúc của dữ liệu có tổ chức hoặc chúng truyền đạt cấu trúc cho dữ liệu không có tổ chức. Nếu một bảng HTML không thực hiện một trong những công việc đó, thì đó có thể không phải là một bảng Bảng cơ bản nhấtHãy bắt đầu với mã HTML ngữ nghĩa cần thiết để hiển thị một bảng cơ bản. Ví dụ này so sánh các vụ phun trào núi lửa gần đây ở khu vực Thái Bình Dương của Bắc Mỹ
Volcano Name
Location
Last Major Eruption
Type of Eruption
Mt. Lassen
California
1914-17
Explosive Eruption
Mt. Hood
Oregon
1790s
Pyroclastic flows and Mudflows
Mt .St. Helens
Washington
1980
Explosive Eruption
Lưu ý rằng các giá trị mặc định của trình duyệt và môi trường kết xuất (chẳng hạn như các giá trị mặc định trong các trang Tài liệu nền tảng web. ) có thể ảnh hưởng đáng kể đến kiểu dáng bảng trực quan, bảng trên có thể hiển thị như thế này ||
Tên núi lửa. Vị trí. Vụ phun trào lớn cuối cùng. Loại phun trào
Mt. Lassen. california. 1914-17. phun trào nổ
Mt. Mui xe. Oregon. những năm 1790. Dòng chảy núi lửa và Dòng chảy bùn
Mt. đường phố. Helens. Hoa Thịnh Đốn. 1980. phun trào nổ Hãy bắt đầu bằng cách chia nhỏ đánh dấu HTML được sử dụng trong đoạn mã trên wrapper element tells the browser that the content is a table.: The element establishes a table row. This allows the browser to organize any content between the and tags in a horizontal fashion; that is, in rows.: The : The : The , and elements: These define the table’s header, body, and footer, respectively. Unless you are coding a really complex table with many columns and rows of data, using these may be overkill. In a complex table, however, they can add useful structure for the developers, and also for browsers and other devices.- The
colspan và rowspan. Thuộc tính colspan tạo một ô trong bảng kéo dài nhiều hơn một cột. Ở đây, chúng tôi muốn ô của bảng chân trang trải dài toàn bộ chiều rộng của bảng, vì vậy chúng tôi đã yêu cầu nó trải dài bốn cột trên một hàng. Ngoài ra, bạn có thể thêm thuộc tính rowspan của ô bảng, ví dụ: cho phép ô của bảng kéo dài một số hàng xuống một cột phần tử cho phép bạn cung cấp cho dữ liệu bảng chú thích. Hầu hết các trình duyệt sẽ căn giữa chú thích và hiển thị chú thích có cùng chiều rộng với bảng theo mặc địnhphần tử xác định ô dữ liệu của bảng hoặc từng “hộp” riêng lẻ cho nội dung trong hàng. Chỉ sử dụng nhiều ô có thể cần cho dữ liệu thực tế. Không sử dụng các ô trống cho khoảng trắng hoặc phần đệm - thay vào đó hãy sử dụng CSS. Đây không chỉ là một cách tốt để tách bản trình bày khỏi cấu trúc, mà việc giữ cho HTML rõ ràng và đơn giản giúp bảng dễ hiểu hơn đối với những người khiếm thị đang sử dụng trình đọc màn hìnhLưu ý rằng không có phần tử "cột bảng" (_______21_______) trong mã mẫu; . Các cột là một cấu trúc logic, không phải là cấu trúc vật lý. Dường như chúng ta thấy các cột trong một bảng được xây dựng đúng, nhưng chúng không thực sự được mã hóa, chúng chỉ được ngụ ý bởi sự liên kết của các ô dữ liệu Các phần tử bảng cơ bản phải được lồng vào nhau như sau
content
content
content
Sắp xếp chúng theo bất kỳ cách nào khác sẽ khiến trình duyệt phun ra thứ tương đương với một quả bóng tóc trên Internet và khiến bảng trở nên kỳ quặc, nếu có. Thêm một số tính năng khácBây giờ bảng cơ bản đã sẵn sàng, chúng ta có thể thêm một số tính năng bảng phức tạp hơn một chút. Trước tiên, chúng tôi sẽ thêm chú thích và tiêu đề bảng để giúp cải thiện dữ liệu, cả về ngữ nghĩa và mức độ dễ đọc cho trình đọc màn hình. Đánh dấu bảng được cập nhật trông như thế này
Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name
Location
Last Major Eruption
Type of Eruption
Mt. Lassen
California
1914-17
Explosive Eruption
Mt. Hood
Oregon
1790s
Pyroclastic flows and Mudflows
Mt. St. Helens
Washington
1980
Explosive Eruption
Mã này (nghĩa là "có thể", một lần nữa tùy thuộc vào môi trường) được hiển thị dưới dạng Tên núi lửaVị tríVụ phun trào lớn gần đây nhấtLoại vụ phun tràoMt. LassenCalifornia1914-17Vụ nổ bùng nổMt. HoodOregonnhững năm 1790Dòng chảy núi lửa và Dòng chảy bùnMt. đường phố. HelensWashington1980Nổ Phun TràoCác yếu tố mới được sử dụng ở đây là phần tử xác định nội dung dưới dạng tiêu đề bảng cho từng phần của bảng, có thể là một cột, một hàng hoặc một nhóm ô. Điều này hữu ích không chỉ giúp mô tả chức năng của nội dung theo ngữ nghĩa mà còn giúp hiển thị nội dung đó chính xác hơn trong nhiều trình duyệt và thiết bị khác nhau. Phần tử này được sử dụng trong một hàng giống như một và các trình duyệt thường hiển thị nội dung của nó được in đậm và căn giữa trong ô dữ liệuCấu trúc bảng hơn nữaLà bước cuối cùng trong việc cấu trúc bảng của chúng ta, chúng ta sẽ xác định phần đầu bảng và phần thân bảng, thêm chân trang và xác định phạm vi của đầu đề hàng và cột. Chúng tôi cũng sẽ thêm thuộc tính
content
content
content
1 để mô tả nội dung của bảng. Đánh dấu cuối cùng trông như thế này
Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name
Location
Last Major Eruption
Type of Eruption
Biên soạn năm 2008 bởi cô JenMt. LassenCalifornia1914-17Vụ nổ bùng nổMt. HoodOregonnhững năm 1790Dòng chảy núi lửa và Dòng chảy bùnMt. đường phố. HelensWashington1980Nổ Phun TràoMã bảng này hiển thị (một lần nữa, "có thể hiển thị") như thế này Các đợt phun trào núi lửa lớn gần đây ở Tây Bắc Thái Bình Dương Tên núi lửa Vị trí Lần phun trào lớn cuối cùng Loại phun trào Mt. LassenCalifornia1914-17Vụ nổ bùng nổMt. HoodOregonnhững năm 1790Dòng chảy núi lửa và Dòng chảy bùnMt. đường phố. HelensWashington1980Explosive EruptionBiên soạn năm 2008 bởi Ms JenCác yếu tố và thuộc tính mới như sau.- Thuộc tính
content
content
content
1. Thuộc tính này được sử dụng để xác định phần tóm tắt nội dung bảng, chủ yếu dành cho trình đọc màn hình (bạn sẽ không thấy thuộc tính này trong phiên bản kết xuất của bảng ở trên). Lưu ý rằng trong các đề xuất cũ hơn của W3C, WCAG 1. 0 và HTML4. 0, bạn có thể sử dụng thuộc tính
content
content
content
1 như hướng dẫn chi tiết ở trên. Tuy nhiên, trong các bản nháp mới hơn của thông số kỹ thuật, thuộc tính
content
content
content
1 không được đề cập. Việc vẫn sử dụng thuộc tính
content
content
content
1 dường như vẫn chưa được quyết định, vì vậy, bây giờ hãy giả sử rằng vẫn an toàn khi sử dụng thuộc tính này. Rốt cuộc, nó không làm hỏng bất cứ thứ gì và nó mang lại lợi thế về khả năng tiếp cận - Thuộc tính
content
content
content
6. Bạn cũng có thể nhận thấy thuộc tính
content
content
content
6 trong thẻ
content
content
content
8 và thực tế là chúng tôi cũng đã xác định tên núi lửa làm tiêu đề, bên trong các hàng dữ liệu. Thuộc tính
content
content
content
6 có thể được sử dụng trong phần tử
content
content
content
8 để cho người đọc màn hình biết rằng nội dung
content
content
content
8 là tiêu đề cho một cột hoặc một hàng CSS để giải cứu. một cái bàn đẹp hơnCác yếu tố và thuộc tính trên là tất cả những gì cần thiết để mã hóa một bảng dữ liệu tốt. Bây giờ cấu trúc HTML đã sẵn sàng, hãy xem một số CSS đơn giản để làm cho bảng trông đẹp hơn một chút body {
background: #ffffff;
margin: 0;
padding: 20px;
line-height: 1.4em;
font-family: tahoma, arial, sans-serif;
font-size: 62.5%;
}
table {
width: 80%;
margin: 0;
background: #FFFFFF;
border: 1px solid #333333;
border-collapse: collapse;
}
td, th {
border-bottom: 1px solid #333333;
padding: 6px 16px;
text-align: left;
}
th {
background: #EEEEEE;
}
caption {
background: #E0E0E0;
margin: 0;
border: 1px solid #333333;
border-bottom: none;
padding: 6px 16px;
font-weight: bold;
}
Khi được áp dụng cho đánh dấu bảng cuối cùng của chúng tôi, bảng trông như thế này (chúng tôi đã sử dụng một hình ảnh ở đây để đánh dấu của chúng tôi không bị ảnh hưởng bởi môi trường kết xuất) Hình 1. Một bảng hấp dẫn trực quan hơn À, tốt hơn nhiều. Bạn có thể chọn tạo kiểu cho bảng theo bất kỳ cách nào bạn muốn, nhưng mẫu ở trên cung cấp đường cơ sở để làm việc với. Bây giờ, hãy phân tích ngắn gọn những gì từng phần của CSS này đang làm - Trong CSS ở trên, chúng tôi đã thêm các thuộc tính để đặt lề (trong trường hợp này là 0), phần đệm để tạo khoảng trống nhỏ, màu nền (màu trắng), kích thước phông chữ và họ phông chữ, cũng như chiều cao của dòng để cung cấp . Hãy thử thay đổi các giá trị thuộc tính trong CSS để xem mọi thứ thay đổi như thế nào
Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name
Location
Last Major Eruption
Type of Eruption
Mt. Lassen
California
1914-17
Explosive Eruption
Mt. Hood
Oregon
1790s
Pyroclastic flows and Mudflows
Mt. St. Helens
Washington
1980
Explosive Eruption
2 tài sản. Để làm cho điều này hoạt động chính xác, chúng tôi cũng phải đặt thuộc tính
Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name
Location
Last Major Eruption
Type of Eruption
Mt. Lassen
California
1914-17
Explosive Eruption
Mt. Hood
Oregon
1790s
Pyroclastic flows and Mudflows
Mt. St. Helens
Washington
1980
Explosive Eruption
3 thành
Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name
Location
Last Major Eruption
Type of Eruption
Mt. Lassen
California
1914-17
Explosive Eruption
Mt. Hood
Oregon
1790s
Pyroclastic flows and Mudflows
Mt. St. Helens
Washington
1980
Explosive Eruption
4, để đặt lại các giá trị đường viền trong bảng và cho phép
Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name
Location
Last Major Eruption
Type of Eruption
Mt. Lassen
California
1914-17
Explosive Eruption
Mt. Hood
Oregon
1790s
Pyroclastic flows and Mudflows
Mt. St. Helens
Washington
1980
Explosive Eruption
5 trở thành một đường thẳng trên toàn bộ hàng thay vì được chia nhỏ ở cuối mỗi bảng . Một
Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name
Location
Last Major Eruption
Type of Eruption
Mt. Lassen
California
1914-17
Explosive Eruption
Mt. Hood
Oregon
1790s
Pyroclastic flows and Mudflows
Mt. St. Helens
Washington
1980
Explosive Eruption
6 của 80% đã được chọn cho ví dụ này (điều này làm cho bảng mở rộng trên 80% chiều rộng màn hình)Phần kết luậnTrong bài viết này chúng tôi đã trình bày tất cả những gì bạn cần biết để tạo bảng dữ liệu HTML cơ bản. Hãy để lại bài viết này với một số suy nghĩ thích hợp
|
