| 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ẻ <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>| 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ẻ <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:
| C1 | C2 | C3 |
| Abc1 | Abc2 | Abc3 |
| Abc4 | Abc5 | Abc6 |
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>| C1 | C2 | C3 |
| Abc1 | Abc2 | Abc3 |
| Abc5 | Abc6 |
Ô 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>| C1 | C2 | C3 |
| Abc1 | Abc2 | Abc3 |
| Abc4 | Abc5 | Abc6 |
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 caption-side bằng top hoặc bottom
<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| C1 | C2 | C3 |
| Abc1 | Abc2 | Abc3 |
| Abc4 | Abc5 | Abc6 |
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>| C1 | C2 | C3 |
| Abc1 | Abc2 | Abc3 |
| Abc4 | Abc5 | Abc6 |
| 1 | Mặt hàng A | 1000 | 1 | 1000 | |
| 2 | Mặt hàng B | 2000 | 2 | 4000 | |