Thẻ HTML nào dùng để chứa nội dung trong một ô của bảng?
|
Việc thông thạo các bảng HTML (Ngôn ngữ đánh dấu siêu văn bản) không còn quan trọng như trước đây. Trong những ngày trước CSS (Cascading Style Sheets), các bảng không chỉ được sử dụng để hiển thị các hàng và cột dữ liệu mà còn để kiểm soát bố cục của toàn bộ trang web. Trên thực tế, phiên bản trước của trang web này đã sử dụng các bảng lồng nhau để quản lý bố cục trang bằng cách tạo các ô bảng cho các phần biểu ngữ, điều hướng, nội dung và chân trang Show
Trong hướng dẫn này, tôi sẽ giới thiệu cho bạn các thẻ HTML được liên kết với các bảng, một số (nhưng không phải tất cả) thuộc tính được liên kết với các thẻ này và cách sử dụng CSS để gán giá trị cho các thuộc tính này Nếu bạn định tạo tài liệu HTML của riêng mình để tạo lại các hiệu ứng được minh họa ở đây, tôi khuyên bạn nên tạo một tệp CSS riêng và gọi nó vào tài liệu HTML của mình bằng cách đặt dòng mã sau vào phần HEAD của tài liệu HTML của bạn Sau đây là các thẻ bảng HTML sẽ được sử dụng trong quá trình hướng dẫn này Thẻ TABLE xác định phạm vi của bảng bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng. Thẻ TABLE có một số thuộc tính được liên kết với nó để kiểm soát giao diện tổng thể của bảng. Các thuộc tính này được áp dụng cho toàn bộ bảng. Thẻ CAPTION được sử dụng để thêm khu vực tiêu đề ở đầu bảng. Nếu thẻ CAPTION được sử dụng, nó phải ngay sau thẻ TABLE được liên kết. Lưu ý rằng một bảng chỉ có thể có một thẻ CAPTION. TR hoặc thẻ hàng của bảng được sử dụng để xác định một hàng trong bảng. Rõ ràng một bảng có thể chứa nhiều thẻ TR. Thẻ tiêu đề bảng (TH) được sử dụng để xác định ô tiêu đề trong một hàng. Nó được sử dụng giống như thẻ TD - dữ liệu bảng - ngoại trừ văn bản bên trong ô tiêu đề bảng sẽ được hiển thị dưới dạng văn bản in đậm và sẽ được căn giữa trong cột được liên kết. TD hoặc thẻ dữ liệu bảng được sử dụng để chỉ định từng ô dữ liệu riêng lẻ trong một hàng. Lý tưởng nhất là mỗi hàng của bảng sẽ chứa cùng một số thẻ dữ liệu bảng. Đối với một hàng có ít ô dữ liệu hơn, bạn sẽ cần sử dụng thuộc tính colspan để kiểm soát cách trình bày các ô TD trên hàng đóBảng 1 dưới đây sẽ là điểm xuất phát của chúng ta. Đây là một bảng đơn giản không có kiểu dáng hoặc thuộc tính được đặt Bảng 1. bảng chưa được tạo kiểu Mặc dù không có gì nhiều để xem, nhưng bảng này rất đơn giản để tạo. Mã HTML được sử dụng để tạo bảng này là Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/ Lưu ý rằng đối với mỗi thẻ mở, có một thẻ đóng được liên kết. Luôn đóng thẻ của bạn Một bảng như trên không hấp dẫn lắm. Quan trọng hơn, nó không dễ đọc lắm. Chúng ta có thể sử dụng CSS để kiểm soát hình thức của bảng và cải thiện cách trình bày dữ liệu trong đó. Tại thời điểm này, tôi giả định rằng bạn đã có một số tiếp xúc với việc sử dụng CSS và phần nào quen thuộc với cú pháp CSS Chỉ định chiều rộng bảng và thêm đường viền vào bảngNhư bạn có thể thấy trong Bảng 1, chiều rộng của bảng theo mặc định là 100 phần trăm diện tích có sẵn trong vùng chứa chứa bảng. Trong trường hợp này, vùng chứa là bộ phận của trang web chứa nội dung. Chúng tôi sẽ chỉ định một giá trị bằng pixel để tự xác định độ rộng của bảng. Tôi cũng muốn vẽ một đường viền xung quanh bên ngoài của bảng Để hoàn thành hai nhiệm vụ này, chúng ta sẽ tạo định nghĩa cho thẻ bảng trong tệp CSS. Để thực hiện việc này, hãy thêm mục sau vào tệp CSS của bạn table {width:460px; border: 1px solid #c1c1c1;}trong đó cú pháp của câu lệnh CSS là tag {attribute:value; attribute: value value value;}Thuộc tính Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/3 được sử dụng để chỉ định độ rộng của bảng đối với vùng chứa chứa nó. Trong trường hợp này, chúng tôi chỉ định rằng bảng có chiều rộng chính xác là 460 pixel. Một cách khác để đặt chiều rộng là chỉ định tỷ lệ phần trăm. Ví dụ: Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/4 làm cho chiều rộng của bảng phụ thuộc vào chiều rộng của thùng chứa nó. Trong trường hợp này, bảng sẽ bằng 80 phần trăm chiều rộng của vùng chứa mà nó nằm trong đó. Thuộc tính Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/5 chỉ định rằng bảng phải có một đường viền xung quanh lề ngoài của nó và đường viền này sẽ là một đường liền nét rộng 1 pixel có màu tương ứng với mã màu RGB hex đã cho. Mặc dù có một số cách khác nhau để chỉ định màu, nhưng tôi luôn sử dụng mã màu RGB hex đầy đủ. Định dạng là #rrggbb trong đó rr chỉ định giá trị của thành phần màu đỏ, gg giá trị của thành phần màu xanh lục và bb giá trị của thành phần màu xanh lam. Để xem cách chỉ định màu này so với các phương pháp khác như thế nào, sau đây là ba cách khác nhau để chỉ định màu đỏđỏ- ngôn ngữ tự nhiênrgb(255,0,0)- giá trị RGB thập phân#FF0000- giá trị RGB hex Lưu ý rằng nếu bạn muốn sử dụng tên của một màu, tổ chức tiêu chuẩn web W3C đã quy định rằng chỉ có 16 tên màu sẽ vượt qua các bài kiểm tra xác nhận của họ. Tính đến tháng 3 năm 2007, 16 màu này đã được. nước, đen, xanh dương, hoa vân anh, xám, xanh lá cây, vôi, màu hạt dẻ, hải quân, ô liu, tím, đỏ, bạc, mòng két, trắng và vàng Sau đây là cách bảng xuất hiện sau khi thêm kích thước bảng và định nghĩa đường viền vào tệp CSS ban 2. Kích thước bảng có viền bảng Thêm đường viền vào mỗi ô dữ liệu của bảngBây giờ để thêm một đường viền cho các ô riêng lẻ. Thêm phần sau vào tệp CSS của bạn td, th {border: 1px solid #8C1717; }Thuộc tính Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/5 chỉ định rằng mỗi tiêu đề bảng và thành phần dữ liệu bảng phải có đường viền xung quanh lề ngoài của nó là một đường liền nét rộng 1 pixel. Lưu ý các đường viền này sẽ được tô màu đỏ để chúng ta phân biệt giữa đường viền của bảng và đường viền của các ô trong bảng. Kết quả được thể hiện trong Bảng 3 bàn số 3. Đã thêm đường viền bảng TH và TD Thu gọn Đường viền Đôi thành Đường viền ĐơnLưu ý rằng bảng hiện có đường viền kép. một xung quanh bàn và một xung quanh mỗi ô của bảng. Đó là sự lựa chọn của bạn về việc bạn có thích hiệu ứng này hay không. Để sửa nó để chỉ có một đường viền duy nhất được vẽ, hãy thêm thuộc tính thu gọn đường viền vào mục nhập bảng CSS hiện tại của bạn như sau table {width:460px; border: 1px solid #c1c1c1;
border-collapse: collapse;}
và quan sát trong Bảng 4 sự khác biệt mà điều này tạo ra Bảng 4. Biên giới bảng được thu gọn Cải thiện khả năng đọc bằng cách thêm khoảng trắngĐể cải thiện khả năng đọc dữ liệu của chúng tôi, chúng tôi sẽ thêm một số khoảng trắng để di chuyển văn bản ra khỏi đường viền. Để thêm khoảng trắng xung quanh dữ liệu bên trong các ô, chúng tôi sẽ sửa đổi định nghĩa hiện tại của chúng tôi cho các thẻ TD và TH bằng cách thêm thuộc tính đệm. Sửa đổi mục TD, TH CSS của bạn như sau để thêm bốn pixel đệm vào mỗi ô dữ liệu td, th {border: 1px solid #8C1717; padding: 4px;}Bảng 5. Đã thêm phần đệm cho khoảng trắng Tạo kiểu cho chú thích bảngBây giờ hãy tạo kiểu cho chú thích bảng. Để làm như vậy, chúng tôi sẽ thêm một mục cho thẻ CAPTION vào tệp CSS. Thêm phần sau vào tệp CSS của bạn caption { font-weight:bold; color:#8C1717; background-color: #a0a0a0;}Thuộc tính Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/7 chỉ định rằng văn bản phải được in đậm. Thuộc tính Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/8 chỉ định màu sắc của văn bản. Thuộc tính Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/9 chỉ định màu sẽ được sử dụng cho nền của khu vực chú thích. Sản phẩm của sự thay đổi này được thể hiện trong Bảng 6 Bảng 6. Chú thích bảng được tạo kiểu Tạo kiểu cho tiêu đề cộtBây giờ cho các tiêu đề cột. Hãy sửa đổi CSS của chúng ta chỉ cho thẻ TH bằng cách thêm định nghĩa mới sau vào tệp CSS th { color:#8C1717; background-color: #b0b0b0;}Lưu ý rằng chúng tôi hiện có hai định nghĩa cho thẻ tiêu đề bảng trong tệp CSS của chúng tôi. một định nghĩa các thuộc tính mà tiêu đề bảng sẽ có chung với ô dữ liệu của bảng và một thuộc tính mới chỉ ảnh hưởng đến thẻ tiêu đề bảng. Bảng 7 cho thấy kết quả của sự bổ sung này Bảng 7. Tiêu đề bảng theo kiểu Căn giữa bảng trên trangBảng sẽ trông đẹp hơn nếu nó được căn giữa trang. Để làm điều đó, chúng tôi sẽ thêm hai thuộc tính mới vào mục nhập bảng trong tệp CSS của chúng tôi.table {width:94%; border: 1px solid #c1c1c1;
border-collapse: collapse;
margin-left: auto; margin-right: auto;}
Ghép nối các thuộc tính table {width:460px; border: 1px solid #c1c1c1;}0 và table {width:460px; border: 1px solid #c1c1c1;}1 với giá trị auto có nghĩa là các lề ở bên trái và bên phải của bảng sẽ được cân bằng dẫn đến một bảng ở giữa. Xem Bảng 8 để biết kết quảBảng 8. Căn giữa bảng Ối. tôi nghĩ có gì đó không ổn. Bảng trung tâm của chúng tôi hiển thị như sau trong Internet Explorer 6 Hình ảnh 1. Bảng như được hiển thị bởi Internet Explorer 6 Nhưng trong Firefox 1. 5 bảng của chúng tôi hiển thị như sau Hình ảnh 2. Bảng như được hiển thị bởi Firefox 1. 5 Bạn có để ý khu vực chú thích không? . Điều này là do Firefox đang tuân thủ nghiêm ngặt các hướng dẫn của chúng tôi. Chúng tôi không chỉ định lề tự động cho chú thích - chỉ bảng. Internet Explorer GIẢ ĐỊNH chúng tôi muốn căn giữa chú thích của mình. Nhưng có lẽ chúng tôi không muốn tập trung vào chú thích của mình. Cá nhân tôi muốn trình duyệt không đưa ra các giả định thay cho tôi Vì vậy, hãy làm điều này đúng. Thêm thuộc tính lề và tùy chọn tự động vào thẻ chú thích của chúng tôi trong tệp CSS như sau Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/0 và bây giờ cả chú thích và bảng của chúng ta đều được căn giữa Bảng 8a. Căn giữa chú thích và bảng Căn chỉnh văn bảnMột cách khác để cải thiện hình thức của bảng là sắp xếp văn bản trong các ô dữ liệu riêng biệt thành một hàng đẹp mắt. Đối với căn chỉnh theo chiều dọc, chúng ta có thể thực hiện việc này bằng cách quay lại định nghĩa CSS TH và TD của mình và thêm thuộc tính table {width:460px; border: 1px solid #c1c1c1;}2 và chỉ định giá trị của top sẽ buộc văn bản trong tất cả các ô được căn chỉnh với phần trên cùng của ô chứa dữ liệu. Sau đây là định nghĩa đã sửa đổi cho mục TH và TD CSSTable caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/1 Bảng 9. Văn bản trong bảng được căn chỉnh theo chiều dọc Đường viền cho chú thíchMột điều còn thiếu là một đường viền xung quanh chú thích của chúng tôi. Hãy tạo đường viền kép này và cho nó cùng màu với các đường viền ô khác. Sửa đổi mục CSS hiện tại cho thẻ chú thích để nó khớp với mục sau Table caption using the caption tag column 1 headingcolumn 2 heading row 1 column 1row 1 column 2 row 2 column 1row 2 column 2 with extra long text inside This_is_a_link_to_http://artsnova.com/blog/2 Hãy nhìn vào bảng 10 để xem kết quả Bảng 10. Đường viền được thêm vào chú thích của bảng Và Kết ThúcCòn rất nhiều điều có thể được thực hiện với bảng và nội dung của nó. Bạn có thể thay đổi căn chỉnh ngang của văn bản trong các ô. Bạn cũng có thể chỉ định chiều rộng vật lý của các ô trong một cột. Đối với một bảng lớn có nhiều hàng và cột, khả năng đọc có thể được cải thiện bằng cách xen kẽ màu của các hàng riêng lẻ. Nếu bạn đang sử dụng XHTML để tạo các trang web của mình, bạn cũng sẽ có thể sử dụng các thẻ THEAD, TBODY và TFOOT Tóm lại, hướng dẫn này mới chỉ sơ lược về việc kiểm soát sự xuất hiện của các bảng bằng CSS. Hy vọng rằng hướng dẫn này đã đóng vai trò là điểm khởi đầu tốt để bạn khám phá các bảng HTML và CSS |
