Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
1- HTML Table
Để tạo ra một bảng [Table] trong HTML bạn cần sử dụng một vài thẻ [tag], chúng bao gồm:
Danh sách tên của các thẻ và từ viết tắt của chúng:
Tag Stands For Table Head Table Body Table Foot Table Row Table Cell of . Table Data [Table Cell of ] Về cơ bản một bảng được phân chia làm 4 khúc [Section]:
A Caption
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish 318 million Bạn có thể không cần các thẻ , , , và ví dụ trên có thể được viết ngắn gọn hơn:
A Caption
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish 318 million 2- Colspan, Rowspan
Colspan
Thuộc tính colspan của thẻ hoặc
giúp bạn hợp nhất [merge] các ô [cell] liên tiếp nhau trên cùng một hàng [row]. colspan-example.html
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish 318 million colspan-example2.html
Invoice
Item / Desc. Qty. @ Price Paperclips [Box] 100 1.15 115.00 Paper [Case] 10 45.99 459.90 Wastepaper Baskets 2 17.99 35.98 Subtotal 610.88 Tax 7% 42.76 Total 653.64 Rowspan
Thuộc tính rowspan của thẻ hoặc
giúp bạn hợp nhất [merge] các ô [cell] liên tiếp nhau trên cùng một cột [column]. rowspan-example.html
Favorite and Least Favorite Things
Bob Alice Favorite Color Blue Purple Flavor Banana Chocolate Least Favorite Color Yellow Pink Flavor Mint Walnut Complex example:
Một ví dụ phức tạp với colspan, rowspan:
complex-table-example.html
A complex table
Invoice #123456789 14 January 2025 Pay to:
Acme Billing Co.
123 Main St.
Cityville, NA 12345Customer:
John Smith
321 Willow Way
Southeast Northwestershire, MA 54321Name / Description Qty. @ Cost Paperclips 1000 0.01 10.00 Staples [box] 100 1.00 100.00 Subtotal 110.00 Tax 8% 8.80 Grand Total $ 118.80 3- Công cụ tạo bảng trực tuyến
Có thể bạn sẽ gặp khó khăn khi muốn tạo ra một bảng với cấu trúc phức tạp, nhưng bạn không cần lo lắng vì điều đó, có một vài công cụ trực tuyến giúp bạn tạo ra một bảng một cách trực quan và phát ra [generate] mã HTML cho bạn. Chẳng hạn:
4- Col, Colgroup
Thẻ và đại diện cho một cột và một nhóm cột của một bảng. Bạn có thể tìm hiểu về chúng trong bài viết dưới đây:
5- CSS Border
Theo mặc định bảng không có viền [border], bạn có thể sử dụng thuộc tính border để thiết lập viền cho nó.
border-example-0.html
Table without border
First Name Last Name John Smith Peter Smith Table with border
First Name Last Name John Smith Peter Smith Chú ý: HTML5 thực sự không hỗ trợ thuộc tính border của
, mặc dù tất cả các trình duyệt vẫn hỗ trợ nó. HTML5 khuyên bạn sử dụng CSS để thiết lập viền [border] cho bảng.
- Thiết lập viền cho
.
- Thiết lập viền cho các ô [cell] của bảng, cụ thể là các thẻ ,
. table { border: 1px solid red; } th, td { border: 1px solid blue; }
css-border-example.html
Table Border table { border: 1px solid red; } th, td { border: 1px solid blue; }
Table CSS border
First Name Last Name John Smith Peter Smith border-collapse
CSS border-collapse được sử dụng cho thẻ
để quyết định xem 2 ô [Cell] gần nhau sẽ sử dụng chung 1 đường viền hay sử dụng 2 đường viền tách biệt nhau.
border-collapse Mô tả separate Hai ô gần nhau sẽ sử dụng 2 đường viền tách biệt. [Mặc định]. collapse Hai ô gần nhau sẽ sử dụng chung 1 đường viền. inherit Thừa kế border-collapse từ phần tử cha.
border-collapse-example.html
Table border-collapse table, th, td { border: 1px solid black; } #table1 { border-collapse: separate; } #table2 { border-collapse: collapse; }
border-collapse: separate [Default]
First Name Last Name John Smith Peter Smith border-collapse: collapse
First Name Last Name John Smith Peter Smith 6- CSS Width
Sử dụng CSS width để thiết lập chiều rộng [width] cho bảng:
table { width: 100%; } table { width: 500px; }
width-example.html
CSS Width table { width: 100%; } table, th, td { border: 1px solid black; }
CSS width:100%;
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish 7- CSS border-spacing
CSS border-spacing thiết lập khoảng không gian giữa 2 ô của bảng.
table, th, td { border: 1px solid black; } table { border-spacing: 25px; }
border-spacing-example.html
Table CSS border-spacing table, th, td { border: 1px solid black; } table { border-spacing: 25px; }
Table CSS border-spacing
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish 8- CSS padding
Table padding
table-padding-example.html
CSS Table padding table { padding: 25px; } table, th, td { border: 1px solid black; }
CSS Table padding
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish Table padding & border-spacing
padding-border-spacing-example.html
Table CSS border-spacing, padding table, th, td { border: 1px solid black; } table { border-spacing: 25px; padding: 30px; }
Table CSS border-spacing, Table padding
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish Cell padding
Bạn có thể thiết lập CSS padding cho các ô [cell] của bảng, cụ thể là sét đặt CSS padding cho các thẻ
, . td { padding: 25px; } th { padding: 25px; }
cell-padding-example.html
Table CSS Cell padding table, th, td { border: 1px solid black; } td { padding: 25px; }
Table CSS Cell padding
Countries Capitals Population Language USA Washington, D.C. 309 million English Sweden Stockholm 9 million Swedish 9- CSS text-align, vertical-align
CSS text-align có thể được sử dụng cho ,
để căn chỉnh [align] theo phương ngang vị trí của nội dụng [Content] bên trong thẻ hoặc . CSS text-align có thể được sử dụng cho ,
để căn chỉnh [align] theo phương thẳng đứng vị trí của nội dung [Content] bên trong thẻ hoặc . Ví dụ sử dụng CSS text-align, CSS vertical-align với các thẻ ,
: align-example.html
Table align table, th, td { border: 1px solid black; } th, td { padding: 10px; }
th, td [text-align, vertical-align]
Average Red eyes height weight Males 1.9 0.003 40% Females 1.7 0.002 43% 10- CSS nowrap
Khi chiều rộng của bảng càng bé, các nội dung văn bản trong các ô có xu hướng hiển thị trên nhiều dòng [line].
Nếu bạn muốn tránh vấn đề trên hãy sử dụng CSS white-space:nowrap.
nowrap-example.html
CSS white-space:nowrap table, th, td { border: 1px solid black; } th, td { padding: 5px; }
CSS white-space:nowrap
Full Name Gender Job Hire Date Salary Joanna Smith Female Database Administrator 2000-10-11 5000 Peter White Male Administrative Support 2010-10-21 7000 Chủ Đề
- Thiết lập viền cho các ô [cell] của bảng, cụ thể là các thẻ ,