Trong bài viết trước Taimienphi. vn đã giới thiệu cho bạn về thẻ img trong HTML. Trong bài viết tiếp theo bên dưới Taimienphi. vn sẽ giới thiệu tiếp cho bạn về bảng [table] trong HTML
Trong HTML, table [table] verify by tag table. Tham khảo tiếp bài viết dưới đây của Taimienphi. vn để tìm hiểu chi tiết bảng [table] trong HTML
Table [bảng] trong HTML
1. Table [bảng] trong HTML
Như đã đề cập ở trên, bảng trong HTML được xác định bằng thẻ bảng
Mỗi hàng trong bảng được xác định bằng thẻ tr. Bảng tiêu đề được xác định bằng thẻ thứ. Mặc định các bảng tiêu đề được in đậm và căn giữa. Dữ liệu / ô của bảng được xác định bằng thẻ td
Ví dụ. ví dụ dưới đây bảng minh họa trong HTML
Kết quả trả về có dạng như dưới đây
Lưu ý. Các phần tử td là các phần tử chứa dữ liệu của bảng. Các phần tử này có thể chứa tất cả các loại phần tử HTML, văn bản, hình ảnh, danh sách,.
2. Thêm đường viền cho bảng trong HTML
Để thiết lập đường viền cho bảng trong HTML, chúng ta sử dụng đường viền thuộc tính trong CSS
Ví dụ. trong ví dụ dưới đây chúng ta sẽ thêm đường viền cho bảng trong HTML
Kết quả trả về sau khi áp dụng thuộc tính rowspan để xác định 1 ô trong bảng mở rộng thêm bao nhiêu hàng có dạng như dưới đây
Công tyLiên hệQuốc giaAlfreds FutterkisteMaria AndersĐứcTrung tâm thương mại MoctezumaFrancisco ChangMexicoErnst HandelRoland MendelÁoThương mại trên đảoHelen BennettVương quốc AnhHầm rượu vang Laughing BacchusYoshi TannamuriCanadaMagazzini Alimentari RiunitiGiovanni RovelliÝ
Tự mình thử »Xác định một bảng HTML
Một bảng trong HTML bao gồm các ô của bảng bên trong các hàng và cột
Thí dụ
Một bảng HTML đơn giản
ô bảng
Mỗi ô của bảng được xác định bởi một và một thẻ
Mọi thứ ở giữa và là nội dung của ô bảng
Thí dụ
Ghi chú. Một ô của bảng có thể chứa tất cả các loại phần tử HTML. văn bản, hình ảnh, danh sách, liên kết, bảng khác, v.v.
hàng bảng
Mỗi hàng của bảng bắt đầu bằng a và kết thúc bằng thẻ
Thí dụ
Bạn có thể có bao nhiêu hàng tùy thích trong một bảng;
Ghi chú. Đôi khi một hàng có thể có ít hoặc nhiều ô hơn hàng khác. Bạn sẽ tìm hiểu về điều đó trong một chương sau
Tiêu đề bảng
Đôi khi bạn muốn các ô của mình là các ô tiêu đề của bảng. Trong những trường hợp đó, hãy sử dụng thẻ thay vì thẻ
Table [hay còn gọi là bảng] thường được sử dụng trong HTML để sắp xếp và hiển thị dữ liệu. Chúng giúp chuyển thông tin đến người dùng của trang web một cách dễ dàng hơn
Trong bài viết hôm nay, mình sẽ trình bày những kiến thức cơ bản về bảng trong HTML, bao gồm cách tạo bảng trong HTML, cách sử dụng các thẻ bắt buộc và kiểu CSS của bảng trong HTML
>> Xem ngay Tài liệu Java Core giúp bạn “Nâng cấp” kỹ năng lập trình
Khái niệm cơ bản về bảng trong HTML
Table is a data file has a structure is being sort by the rows and column. Bảng được sử dụng rộng rãi để trình bày dữ liệu và phân tích dữ liệu, và chúng được sử dụng thường xuyên trong sách, tạp chí khoa học và trang web
HTML, viết tắt của Ngôn ngữ đánh dấu siêu văn bản, là một ngôn ngữ đánh dấu siêu văn bản được sử dụng để hướng dẫn các trình duyệt web cách chúng hiển thị các trang web. Phiên bản mới nhất của HTML [HTML5] đi kèm với sự hỗ trợ mạnh mẽ để hiển thị dữ liệu bằng cách sử dụng các bảng phức tạp hoặc đơn giản
Khi chúng tôi xác định một bảng phần tử, chúng tôi sẽ sử dụng các thẻ sau
- . định nghĩa một bảng trong HTML
. định nghĩa từng hàng trong bảng - . định nghĩa từng hàng trong bảng
- . định nghĩa từng tiêu đề trong bảng
. định nghĩa từng bảng dữ liệu hoặc ô trong bảng Lưu ý: tất cả các phần tử được in đậm và căn giữa và các phần tử văn bản
được căn trái theo mặc định. , , mà chúng ta sẽ thảo luận sau.
FirstnameLastnameAgeMarkRuffallo54ReeseWitherspoon48
Code language: HTML, XML [xml]Firstname Lastname Age Mark Ruffallo 54 Reese Witherspoon 48Có nhiều phần tử HTML khác có thể được sử dụng để tùy chỉnh hình thức và cấu trúc của bảng. Chúng bao gồm ,
Điều quan trọng cần lưu ý là các bảng phải có chức năng. Điều đó có nghĩa là dữ liệu hoặc thông tin được hiển thị trong bảng của bạn phải dễ đọc và dễ hiểu. Nếu bạn không có ý tưởng về cách định dạng bảng của mình, bạn có thể phác thảo trên giấy. Điều này sẽ giúp bạn cấu hình dung và sắp xếp bảng trước khi viết mã
Chú thích bảng và tiêu đề
Hầu hết các bảng cần một số loại văn bản mô tả mục đích của bảng. Chúng ta có thể sử dụng để giải quyết vấn đề này. Điều này sẽ giúp người dùng dễ sử dụng hơn rất nhiều.
Code language: HTML, XML [xml]Neonates Immunization TablePhần tử xác định một tập hợp các hàng đại diện cho đầu các cột của bảng.
.Thẻ đánh dấu một ô làm tiêu đề bảng và nó thường ở đầu hàng hoặc cột. Thẻ luôn được sử dụng trong thẻ
và chúng có một số kiểu mặc định để giúp chúng nổi bật.
Code language: HTML, XML [xml]Name Sex Weight[kg] Immunization Dosesbảng tóm tắt
Phần tử là phần tử tùy chọn xác định một tập hợp các hàng tóm tắt các cột của bảng. Nó thường nằm sau thẻ
Code language: HTML, XML [xml]Mean Weight [kg] 2.9Thêm đường bao vào một ô trong bảng
Trước đây, các đường viền có thể được thêm vào bảng trong HTML của bạn bằng cách sử dụng đường viền thuộc tính, lấy một số tự động tính bằng pixel
Jerry HolmesM503. 5
Code language: HTML, XML [xml]Jerry Holmes M 5 0 3.5Hành vi này không được chấp nhận trong HTML5 do đường viền CSS thuộc tính. Với sự thay đổi này, bây giờ người ta có thể thêm đường viền trên bảng hoặc cho các phần tử riêng lẻ. Nếu bạn không muốn các ô của mình có các đường viền riêng biệt, bạn nên đặt thuộc tính border-collapse. sự sụp đổ. Nếu không, các ô liền kề sẽ có các đường viền riêng biệt
Jerry HolmesM503. 5
Code language: CSS [css]table { border-collapse: collapse; } td, th { border: 1px solid rgba[0, 0, 0, 0.5]; }Trong phần tiếp theo, mình sẽ chỉ cho bạn cách tạo bảng với bố cục phức tạp, trong đó các ô của bảng có thể kéo dài nhiều hàng hoặc một số cột
Kéo dài nhiều hàng và cột
Trong bảng chúng ta đang xây dựng, hãy lưu ý rằng ô “Mean Weight” kéo dài nhiều hơn một ô và “Liều lượng Chủng ngừa” có vẻ giống như một “Super Heading” với các tiêu đề phụ [được lấy và sang trái]
Hành vi này có thể thực hiện được với các thuộc tính colspan và rowspan. Cả hai thuộc tính đều chấp nhận một giá trị số, là số hàng hoặc cột bạn muốn kéo dài
Code language: HTML, XML [xml]Name Sex Immunization Doses Weight[kg] Taken LeftThuộc tính rowspan cho phép nội dung của một ô trong bảng trải dài nhiều hàng. Trong đoạn mã ở trên, chúng tôi đã tạo các tiêu đề 'Tên', 'Giới tính' và 'Trọng lượng' kéo dài hai hàng
colspan tạo cho một ô duy nhất có chiều rộng lớn hơn một cột hoặc các ô dữ liệu. Sử dụng thuộc tính colspan, chúng ta tạo tiêu đề 'Liều lượng Chủng ngừa' kéo dài hai cột [và một hàng duy nhất]. Sau đó, bằng cách thêm các tiêu đề phụ vào hàng tiếp theo, chúng sẽ tự động được thêm vào trong “Liều lượng Chủng ngừa”
Create table type with CSS
Một số thuộc tính tạo kiểu bảng không được hỗ trợ trong HTML5; . Một số thuộc tính này bao gồm
align. sử dụng CSSmargin-left,margin-righthoặc
0
Code language: HTML, XML [xml]Neonates Immunization Table
1. CSS thuộc tính tương tự
Code language: HTML, XML [xml]Neonates Immunization Table
2
Code language: HTML, XML [xml]Neonates Immunization Table
3. đường viền thuộc tính CSS tương tự
Code language: HTML, XML [xml]Neonates Immunization Table
4. chiều rộng thuộc tính CSS tương tự
Code language: HTML, XML [xml]Neonates Immunization Table
Cellspacing và cellpadding có thể đạt được bằng cách sử dụng border-spacing và padding tương ứng. border-spacing không có bất kỳ ảnh hưởng nào nếu border-collapse. sự sụp đổ
Màu sắc và các thuộc tính khác của văn bản trong ô có thể được sửa đổi bằng cách chỉ xác định giá trị của các thuộc tính có liên quan, chẳng hạn như màu sắc, cỡ chữ và họ phông chữ
Dưới đây là mã của bảng mục trong HTML ngày hôm nay
Kết luận
Trên đây là những điều chúng ta cần biết để bắt đầu khai thác các bảng trong HTML. Bạn có thể lấy những gì bạn đã học ở đây và kiến thức HTML và CSS hiện có của bạn, để bắt đầu thiết kế và phát triển khai thác các bảng chức năng và đẹp mắt
Chủ Đề