Tạo Bảng Biểu Trong HTML

• Tạo bảng biểu với thẻ <table>
• Thẻ <td> (table data)
• Thẻ <tr> (table row)
• colspan, rowspan
• Thẻ <th>
• Thẻ <caption>
• Thẻ <thead> <tfoot>
• 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ẻ <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
Abc4	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>

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

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>

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

Ví dụ bảng biểu HTML

ĐƠ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

<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> Mục lục bài viết Tạo bảng biểu với thẻ <table>Thẻ <td> (table data)Thẻ <tr> (table row)colspan, rowspanThẻ <th>Thẻ <caption>Thẻ <thead> <tfoot>Ví dụ bảng biểu HTML ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới