Đây là hướng dẫn về Bảng lồng nhau trong HTML. Ở đây chúng ta thảo luận về cách tạo một bảng trong bảng cùng với các ví dụ tương ứng.

Bạn đang xem : bảng song song html

Bảng lồng nhau trong HTML

Giới thiệu về Bảng lồng nhau trong HTML

‘Bảng lồng nhau’ là một trong những khái niệm quan trọng nhất khi sử dụng bảng trong mã hóa HTML. Các bảng lồng nhau hoặc ‘bảng trong bảng’ là một khái niệm được sử dụng trong khi tạo các bảng lớn hơn và phức tạp. Hầu hết các bảng phức tạp và lớn có thể bao gồm lồng các bảng trong bảng chính để có thể kiểm soát tốt hơn trong việc viết mã. Việc sử dụng các bảng lồng nhau có thể giúp tạo ra những hình ảnh và giao diện đẹp mắt, thú vị nhưng có thể tạo ra các lỗi kết thúc lỏng lẻo.

Chắc chắn, việc này sẽ trở nên phức tạp hơn khi bạn bắt đầu sử dụng các bảng lồng nhau vì tất cả các thẻ và phần tử bạn cần để viết mã cũng như duy trì và xử lý khi tạo bảng trong bảng. Nhưng một khi bạn nắm được khái niệm như vậy và đi sâu vào sự phức tạp như vậy, việc sắp xếp các thẻ bên trong sẽ dễ dàng hơn rất nhiều.

Start Your Khóa học phát triển phần mềm miễn phí

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Làm cách nào để tạo một bảng trong một bảng?

Có thể tạo một bảng trong một bảng khác bằng cách sử dụng các thẻ bảng như & lt; table & gt ;, & lt; tr & gt ;, & lt; td & gt ;, v.v., để tạo bảng lồng nhau của chúng tôi. Vì các bảng lồng nhau có thể dẫn đến mức độ phức tạp cao hơn, hãy nhớ bắt đầu và kết thúc các bảng lồng trong cùng một ô. Bạn có thể tạo các bảng lồng nhau theo bất kỳ số cấp độ nào; chỉ cần nhớ tạo một bảng bên trong cùng một ô.

Dưới đây là phần diễn giải các bảng lồng nhau. Hình ảnh dưới đây cho thấy các bảng lồng nhau theo năm cấp, với màu ‘Xanh lam’ là ngoài cùng hoặc bảng vùng chứa có các bảng lồng nhau được biểu thị bằng các màu Trắng, Đỏ, Vàng và Xanh lục.

Bảng lồng nhau trong đầu ra HTML 2

Lần này, chúng tôi sẽ thử tạo một ví dụ khác về các bảng lồng nhau.

  • Đầu tiên, chúng ta cần bảng chính, vùng chứa để chúng ta bắt đầu lồng ghép.
  • Thứ hai, quyết định hàng hoặc cột hoặc ô nào bạn muốn một bảng khác tồn tại. Sau khi quyết định, hãy chuyển sang bước tiếp theo
  • & lt; td & gt; là phần tử nơi một bảng hoàn toàn mới sẽ được tạo. Đi theo thứ bậc, & lt; bảng & gt;….
    & lt; tr & gt;….
    & lt; td & gt;
    (bảng lồng nhau ở đây)
    & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / table & gt;
  • Bảng lồng nhau bên trong phải được đóng hoàn toàn với tất cả các quy tắc tiêu chuẩn để đóng & lt; tr & gt; và & lt; td & gt; các yếu tố.
  • Định dạng bảng lồng nhau đơn giản và tương tự như bất kỳ phần tử nào khác của HTML.
Xem Thêm  Hàm print () trong Python - chữ in có nghĩa là gì trong python

Ví dụ trên có vùng chứa chính, một bảng có hai cột và một bảng được lồng trong hai hàng và hai cột.

Bây giờ, hãy quan sát ví dụ dưới đây về các bảng lồng nhau. Những gì chúng ta đã thảo luận để giải thích các cấp độ lồng nhau ở trên, chúng ta sẽ cố gắng tạo một ví dụ như vậy thông qua mã hóa bên dưới.

Mã:

  & lt; body & gt;
& lt; table border = "10" bordercolor = "# 0B1941" & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; table border = "10" bordercolor = "# F8F3F3" & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; table border = "10" bordercolor = "# C74D4F" & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; table border = "10" bordercolor = "# DCE127" & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; table border = "10" bordercolor = "# 3CAB16" & gt;
& lt; tr & gt; & lt; td & gt; & lt; / td & gt; & lt; / tr & gt;
& lt; / table & gt; & lt; / td & gt; & lt; / tr & gt;
& lt; / table & gt; & lt; / td & gt; & lt; / tr & gt;
& lt; / table & gt; & lt; / td & gt; & lt; / tr & gt;
& lt; / table & gt; & lt; / td & gt; & lt; / tr & gt;
& lt; / table & gt;  

Đoạn mã trên xuất ra màn hình sau đây cho biết 5 cấp độ lồng vào các bảng của chúng ta được phân biệt qua các màu khác nhau. Quan sát vị trí của các bảng bên trong nhau, nghĩa là lồng vào bên trong:

Bảng lồng nhau trong đầu ra HTML 3

Khái niệm lồng trong các bảng trở nên thú vị hơn bằng hình ảnh khi lập trình viên sử dụng các bảng để định dạng trang web hoàn chỉnh. Sau đó, bảng có thể được định dạng giống như bất kỳ bảng nào khác và các phần tử HTML khác mà lập trình viên có thể lồng vào bên trong.

Ví dụ về Bảng lồng nhau trong HTML

Dưới đây là các ví dụ được đề cập:

Ví dụ # 1

Quan sát ví dụ dưới đây về bảng lồng nhau, chỉ một bảng trong bảng chính. Để phân biệt bảng chính và bảng lồng trong, chúng tôi đã sử dụng bán kính đường viền và màu đường viền khác nhau của bảng.

Mã:

  & lt; body & gt;
& lt; table border = "5px" bordercolor = "# 8707B0" & gt;
& lt; tr & gt;
& lt; td & gt; Phía bên trái của bảng chính & lt; / td & gt;
& lt; td & gt;
& lt; table border = "5px" bordercolor = "# F35557" & gt;
& lt; h4 align = "center" & gt; Bảng lồng nhau & lt; / h4 & gt;
& lt; tr & gt;
& lt; td & gt; bảng lồng nhau C1 & lt; / td & gt;
& lt; td & gt; bảng lồng nhau C2 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; bảng lồng nhau & lt; / td & gt;
& lt; td & gt; bảng lồng nhau & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;  

Đầu ra:

Xem Thêm  Cách tạo liên kết tải xuống - liên kết tải xuống tự động html

Bảng lồng nhau trong đầu ra HTML 1

Lưu ý: Việc lồng một bảng trong bảng vùng chứa chính. Bảng lồng vào bên trong bảng chính là bảng có viền màu đỏ. Nó được thêm vào & lt; td & gt; phần tử của bảng vùng chứa.

Ví dụ # 2

Đoạn mã sau đây của chúng tôi sẽ trình bày cách lồng các phần tử HTML khác vào các bảng lồng nhau bên trong bảng vùng chứa chính của chúng tôi.

Mã:

  & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; NestedTables & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; caption title = "Bảng Vùng chứa" & gt; Bảng Vùng chứa & lt; / caption & gt;
& lt; table border = "5px" bordercolor = "red" & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; bảng & gt;
& lt; tr & gt; & lt; th colspan = "2" & gt; Bảng lồng nhau 2 & lt; / th & gt; & lt; / tr & gt;
& lt; tr & gt; & lt; th & gt; Cột 1 & lt; / th & gt; & lt; th & gt; Cột 2 & lt; / th & gt; & lt; / tr & gt;
& lt; tr & gt; & lt; td & gt; Bảng đầu tiên của chúng tôi & lt; / td & gt;
& lt; td & gt; Được lồng trong & lt; / td & gt; & lt; / tr & gt;
& lt; / table & gt;
& lt; / td & gt;
& lt; td & gt;
& lt; bảng & gt;
& lt; tr & gt; & lt; th & gt; Bảng lồng nhau 2 & lt; / th & gt; & lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; ul & gt;
& lt; li & gt; Liệt kê Đối tượng 1 & lt; / li & gt;
& lt; li & gt; Liệt kê Đối tượng 2 & lt; / li & gt;
& lt; li & gt; Liệt kê Đối tượng 3 & lt; / li & gt;
& lt; / ul & gt;
& lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt; & lt; / td & gt; & lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; bảng & gt;
& lt; tr & gt; & lt; th colspan = "2" align = "center" & gt; Bảng lồng nhau 3 & lt; / th & gt; & lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; a href = "" & gt; Bảng lồng nhau & lt; / a & gt; & lt; / td & gt;
& lt; td & gt; Demo Tiếp tục & lt; / td & gt; & lt; / tr & gt;
& lt; / table & gt; & lt; / td & gt;
& lt; td & gt;
& lt; bảng & gt;
& lt; tr & gt; & lt; th & gt; Bảng 4 & lt; / th & gt; & lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; img src = "images.png" height = "120px" width = "120px" alt = "Xin lỗi Không thể hiển thị hình ảnh" & gt; & lt; / td & gt; & lt; / tr & gt; & lt; / table & gt;
& lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đoạn mã trên giải thích cách một bảng có thể chứa nhiều bảng khác bên trong chính nó, bảng này có thể chứa bất kỳ loại nội dung nào bạn thường thêm vào một trang HTML đơn giản. Mã trên cho cùng một mã không có đường viền.

Lưu ý : Trong ví dụ trên, các phần tử HTML được thêm vào như tệp png, siêu liên kết, bảng hoặc danh sách các đối tượng có thể được thêm vào một trong các & lt ; td & gt; các yếu tố. Theo cách hiểu ở trên, tôi đã đăng xuất khỏi tất cả các đường viền của các bảng được lồng bên trong.

Xem Thêm  Làm cách nào để thay đổi kích thước hình ảnh trong HTML? - phần trăm kích thước hình ảnh html

Vui lòng quan sát rằng các bảng khi đường viền của chúng được hiển thị. Bảng vùng chứa là một bảng có đường viền màu đỏ với các bảng lồng nhau có đường viền màu xanh lam, vàng, xanh lục và đen.

Việc sử dụng các bảng để định dạng một trang web hoàn toàn là điều tốt, nhưng một điều cần nhớ là, việc lồng vào nhau càng phức tạp thì trang của bạn càng tải chậm hơn vì trình duyệt của bạn thực hiện hiển thị thực sự phức tạp. .

Các bài báo được đề xuất

Đây là hướng dẫn về Bảng lồng nhau trong HTML. Ở đây chúng ta thảo luận về cách tạo một bảng trong bảng cùng với các ví dụ tương ứng về Bảng lồng nhau trong HTML. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề bảng bên cạnh html

[Học HTML – 05] Các thẻ định dạng văn bản

alt

  • Tác giả: Thạch Phạm
  • Ngày đăng: 2015-04-18
  • Đánh giá: 4 ⭐ ( 3807 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu các thẻ đinh dạng văn bản và chữ viết trong HTML như thẻ tạo tiêu đề, thẻ trích dẫn, thuộc tính style để trang trí chữ viết,…
    Xem toàn bộ serie tại http://thachpham.com/series/html-co-ban

Bảng (table) trong HTML, cú pháp và ví dụ minh họa

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 4674 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: bang table trong html, Bảng (table) trong HTML, cú pháp và ví dụ minh họa

HTML là gì? Các loại Tag HTML cơ bản nhất bạn cần Nắm Rõ!!

  • Tác giả: hostingviet.vn
  • Đánh giá: 4 ⭐ ( 3992 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Table trong html, Tạo bảng trong html

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 4 ⭐ ( 4980 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Table trong html, Tạo bảng trong html. Các bảng HTML cho phép lập trình viên sắp xếp các dữ liệu như văn bản, hình ảnh, đường link… vào các ô trong bảng.

Bảng trong HTML

  • Tác giả: camranh.khanhhoa.gov.vn
  • Đánh giá: 5 ⭐ ( 5269 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: blank page

[HTML/HTML5] Phần 24: Bố cục trang web HTML cơ bản

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 8543 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bảng trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 5953 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bảng trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php