Ở đây, tôi gộp 4 cột lại với nhau tạo thành hàng “TỔNG LƯƠNG” và gộp 2 cột lại với nhau tạo thành cột “TỔNG LƯƠNG”
2.5 Tạo kiểu cho bảng
Để tạo kiểu cho bảng ta sử dụng thuộc tính :nth-child[]
Ví dụ:
See the Pen
Untitled by sonson [@sonsonct]
on CodePen.
Ở đây, tôi sử dụng thuộc tính even để tô màu hàng 2,4,6,…; bạn cũng có thể đổi thành odd để tô màu các dòng 1,3,5,…
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 dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về bảng [table] trong HTML.
Trong HTML, bảng [table] xác định bằng thẻ 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.
Bảng [table] trong HTML
1. Bảng [table] trong HTML
Như đã đề cập ở trên, bảng trong HTML được xác định bằng thẻ table.
Mỗi hàng trong bảng được xác định bằng thẻ tr. Tiêu đề bảng được xác định bằng thẻ th. Mặc định các tiêu đề bảng đượ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 minh họa bảng 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 thuộc tính border 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:
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
Bảng là một tập hợp dữ liệu có cấu trúc được sắp xếp theo hàng và cột. 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 HyperText Markup Language, 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 ta xác định một phần tử bảng, chúng ta 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 dữ liệu bảng 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ể vẽ phác thảo trên giấy. Điều này sẽ giúp bạn 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 DosesTóm tắt bảng
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 viền 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 thuộc tính border, 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 vì thuộc tính CSS border. Với 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: collapse. 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à “Immunization Doses” 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 ta đã tạo các ô tiêu đề ‘Name’, ‘Sex’ và ‘Weight’ kéo dài hai hàng.
colspan tạo cho một ô bảng duy nhất có chiều rộng của nhiều 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 đề ‘Immunization Doses’ 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 “Immunization Doses”.
Tạo kiểu bảng với CSS
Một số thuộc tính tạo kiểu bảng không còn được hỗ trợ trong HTML5; các thuộc tính CSS tương ứng đã thay thế chúng. 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: tương tự thuộc tính CSS
Code language: HTML, XML [xml]Neonates Immunization Table
2
Code language: HTML, XML [xml]Neonates Immunization Table
3: tương tự thuộc tính CSS border
Code language: HTML, XML [xml]Neonates Immunization Table
4: tương tự thuộc tính CSS width
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: collapse.
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ỉ định giá trị của thuộc tính có liên quan, chẳng hạn như color, font-size và font-family.
Dưới đây là code của phần bảng trong HTML ngày hôm nay:
Kết luận
Trên đây là những gì chúng ta cần biết để bắt đầu triển khai 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à triển khai các bảng chức năng và đẹp mắt.
Chủ Đề