colspan,
rowspanBả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: Show
Tạo bảng biểu với thẻ <table>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ẻ <table> Trong thẻ <table> 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 <table border="1"> <!-- các phần tử trong bảng --> </table> Thẻ <td>Trong nội dung bảng, phần tử nhỏ nhất để chứa dữ liệu là <td> (table data), ví dụ có ba ô bảng (cell), hiện thị dữ liệu: <table border="1"> <td>C1</td> <td>C2</td> <td>C3</td> <td>Abc1</td> <td>Abc2</td> <td>Abc3</td> <td>Abc4</td> <td>Abc5</td> <td>Abc6</td> </table>
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ẻ <td> 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ẻ <tr>Để nhóm các phần tử <td> thuộc về một dòng, thì dùng thẻ <tr>, ví dụ 9 phần tử <td> phía trên sẽ nhóm thành ba dòng thì như sau: <table border="1"> <tr> <td>C1</td> <td>C2</td> <td>C3</td> </tr> <tr> <td>Abc1</td> <td>Abc2</td> <td>Abc3</td> </tr> <tr> <td>Abc4</td> <td>Abc5</td> <td>Abc6</td> </tr> </table> Kết quả là bảng có ba dòng như sau:
Thuộc tính colspan, rowspan của <td>colspan trong <td> có thể gán một giá trị số nguyên dương (mặc định là 1), rowspan trong <td> 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ụ: <table border="1"> <tr> <td>C1</td> <td>C2</td> <td>C3</td> </tr> <tr> <td>Abc1</td> <td colspan="2">Abc2</td> <td rowspan="2">Abc3</td> </tr> <tr> <td>Abc4</td> <td>Abc5</td> <td>Abc6</td> </tr> </table>
Ô bảng Abc2 tương đương 2 cột, ô bảng Abc3 chiếm 2 dòng Thẻ <th>Thẻ <th> tương tự như thẻ <td> (nằm trong thẻ <tr>) được dùng để đánh dấu tiêu đề của một nhóm ô bảng (cell) <table border="1"> <tr> <th></th> <th>Cột 1</th> <th>Cột 2</th> <th>Cột 3</th> </tr> <tr> <th>Dòng 1</th> <td>C1</td> <td>C2</td> <td>C3</td> </tr> <tr> <th>Dòng 2</th> <td>Abc1</td> <td>Abc2</td> <td>Abc3</td> </tr> <tr> <th>Dòng 3</th> <td>Abc4</td> <td>Abc5</td> <td>Abc6</td> </tr> </table>
Thẻ <caption>Thẻ <caption> thường tạo ngay sau khi mở thẻ <table> để 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 <table border="1"> <caption style="caption-side: top">BẢNG DỮ LIỆU</caption> <tr> <td>C1</td> <td>C2</td> <td>C3</td> </tr> <tr> <td>Abc1</td> <td>Abc2</td> <td>Abc3</td> </tr> <tr> <td>Abc4</td> <td>Abc5</td> <td>Abc6</td> </tr> </table>BẢNG DỮ LIỆU
Thẻ <thead> <tfoot>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ẻ <thead>, ý nghĩa tương tứ nhóm dòng là phần cuối của cột dùng thẻ <tfoot> <table border="1"> <thead style="background: red"> <tr> <th></th> <th>Cột 1</th> <th>Cột 2</th> <th>Cột 3</th> </tr> </thead> <tr> <th>Dòng 1</th> <td>C1</td> <td>C2</td> <td>C3</td> </tr> <tr> <th>Dòng 2</th> <td>Abc1</td> <td>Abc2</td> <td>Abc3</td> </tr> <tr> <th>Dòng 3</th> <td>Abc4</td> <td>Abc5</td> <td>Abc6</td> </tr> </table>
<table border="1"> <caption style="caption-side: top">ĐƠN HÀNG</caption> <thead> <tr> <th>STT</th> <th>Mặt hàng</th> <th>Đơn giá</th> <th>Số lượng</th> <th>Thành tiền</th> <th>Ghi chú</th> </tr> </thead> <tr> <td>1</td> <td>Mặt hàng A</td> <td>1000</td> <td>1</td> <td>1000</td> <td></td> </tr> <tr> <td>2</td> <td>Mặt hàng B</td> <td>2000</td> <td>2</td> <td>4000</td> <td></td> </tr> <tfoot> <tr> <th colspan="4">Thành tiền đơn hàng</th> <th colspan="2">4000</th> </tr> </tfoot> </table> |