Tạo bảng biểu trong HTML

Tạo danh sách với <ul> <ol> <li> (Bài trước)

(Bài tiếp) Phần tử cấp độc block và inline

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	cell = 2 cột + 2 dòng

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>

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	Abc3

Ô 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
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>

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Tạo danh sách với <ul> <ol> <li> (Bài trước)

(Bài tiếp) Phần tử cấp độc block và inline