- Tạo bảng biểu với thẻ
- Thẻ
[table data] - Thẻ
[table row] - colspan, rowspan
- Thẻ
- Thẻ
- Thẻ
- Ví dụ bảng biểu HTML
Bảng biểu [table] trong HTML để trình bày dữ liệu gồm có các dòng [row], các ô bảng [cell], phần tiêu đề bảng [heading]. Một ô bảng được chỉ ra gồm có dòng và cột - tại đó để hiện thị dữ liệu, bạn có thể mở rộng một ô bảng tương ứng với nhiều dòng, nhiều cột [nhóm nhiều ô bảng thành một ô bảng] để hiện thị dữ liệu. Ví dụ đây là bảng:
cell cell cell cell cell = gộp 2 cột cell = 2 cột + 2 dòng cell cell Tạo bảng biểu với thẻ
Bảng là cấu trúc phức tạp, toàn bộ nội dung của bảng được đặt vào thẻ
Trong thẻ
có thuộc tính border để thiết lập độ rộng của các dòng kẻ của bảng [hiện giờ nên dùng CSS]. Độ rộng tính bằng pixel - nếu bằng không thì bảng không có các đường kẻ. Ví dụ - có các đường kẻ lưới rộng 1px
Thẻ
Trong nội dung bảng, phần tử nhỏ nhất để chứa dữ liệu là
[table data], ví dụ có ba ô bảng [cell], hiện thị dữ liệu: C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 Các ô bảng này khi hiện thị sẽ xuất hiện liền kề nhau theo chiều ngang trên cùng một dòng.
Thẻ
là nơi chứa dữ liệu của bảng, nó có thể chứa các thẻ HTML khác như văn bản, hình ảnh, danh sách thậm chí chứa một bảng khác. Thẻ
Để nhóm các phần tử
thuộc về một dòng, thì dùng thẻ , ví dụ 9 phần tử phía trên sẽ nhóm thành ba dòng thì như sau: C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 Kết quả là bảng có ba dòng như sau:
C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 Thuộc tính colspan, rowspan của
colspan trong
có thể gán một giá trị số nguyên dương [mặc định là 1], rowspan trong
có thể gán một giá trị số nguyên dương [mặc định là 1], cho biết cell [ô bảng] đó tương đương bao nhiêu dòng. Ví dụ:
C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 Ô bảng Abc2 tương đương 2 cột, ô bảng Abc3 chiếm 2 dòng
Thẻ
Thẻ tương tự như thẻ
[nằm trong thẻ ] được dùng để đánh dấu tiêu đề của một nhóm ô bảng [cell] Cột 1 Cột 2 Cột 3 Dòng 1 C1 C2 C3 Dòng 2 Abc1 Abc2 Abc3 Dòng 3 Abc4 Abc5 Abc6 Cột 1Cột 2Cột 3 Dòng 1 C1 C2 C3 Dòng 2 Abc1 Abc2 Abc3 Dòng 3 Abc4 Abc5 Abc6 Thẻ
Thẻ thường tạo ngay sau khi mở thẻ
để thiết lập tiêu đề của bảng. Vị trí tiêu đề có thể thiết lập bằng CSS với thuộc tính
caption-sidebằngtophoặcbottomBẢNG DỮ LIỆU
BẢNG DỮ LIỆUC1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6 Thẻ
Nếu muốn nhóm các dòng đánh dấu là phần đầu của các cột thì dùng thẻ , ý nghĩa tương tứ nhóm dòng là phần cuối của cột dùng thẻ
Cột 1 Cột 2 Cột 3 Dòng 1 C1 C2 C3 Dòng 2 Abc1 Abc2 Abc3 Dòng 3 Abc4 Abc5 Abc6
ĐƠN HÀNGCột 1Cột 2Cột 3 Dòng 1 C1 C2 C3 Dòng 2 Abc1 Abc2 Abc3 Dòng 3 Abc4 Abc5 Abc6 STTMặt hàngĐơn giáSố lượngThành tiềnGhi chú 1 Mặt hàng A 1000 1 1000 2 Mặt hàng B 2000 2 4000 Thành tiền đơn hàng4000 ĐƠN HÀNG
STT Mặt hàng Đơn giá Số lượng Thành tiền Ghi chú 1 Mặt hàng A 1000 1 1000 2 Mặt hàng B 2000 2 4000 Thành tiền đơn hàng 4000 Chủ Đề
- Thẻ