Để tạo bảng trong HTML, chúng ta sử dụng bảng thẻ. Bảng được tạo bởi các dòng [hàng] và các cột [cột]. Để tạo hàng chúng ta sử dụng thẻ tr và để tạo bảng chúng ta sử dụng thẻ td
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
HTML Tables
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
- Nếu như chúng ta không muốn có đường viền trong bảng thì chúng ta thiết lập thuộc tính border = 0
2. bảng tiêu đề
Chúng ta tạo tiêu đề cho bảng bằng cách sử dụng thẻ thứ như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
HTML Table Header
Name
Salary
Ramesh Raman
5000
Shabbir Hussein
7000
3. Khoảng cách dòng và cột
Chúng ta có thể thiết lập khoảng cách giữa các ô trong bảng bằng cách sử dụng 2 thuộc tính cellpadding và cellspacing
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
HTML Table Cellpadding
Name
Salary
Ramesh Raman
5000
Shabbir Hussein
7000
4. Sắp xếp các dòng và cột
Chúng ta có thể hợp nhất các dòng và cột bằng cách sử dụng thuộc tính colspan và rowspan như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
HTML Table Colspan/Rowspan
Column 1
Column 2
Column 3
Row 1 Cell 1
Row 1 Cell 2
Row 1 Cell 3
Row 2 Cell 2
Row 2 Cell 3
Row 3 Cell 1
5. Thiết lập chiều cao và chiều dài cho bảng
Chúng ta sử dụng thuộc tính chiều rộng và chiều cao để xác định chiều cao và chiều rộng cho bảng
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
HTML Table Width/Height
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
6. Tiêu đề cho bảng
Chúng ta có thể thêm tiêu đề cho bảng bằng thuộc tính chú thích như sau
HTML Tables
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
0
HTML Tables
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
1Chúng ta sử dụng thead để tạo tiêu đề trong bảng, tbody để chỉ nội dung bên trong bảng và tfoot để tạo chân trang
Các bảng HTML cho phép lập trình viên sắp xếp các dữ liệu như văn bản, hình ảnh, đường liên kết… vào các ô trong bảng
Bảng HTML được tạo ra bằng cách sử dụng thẻ
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
0 là thuộc tính của thẻ
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
1Bảng tiêu đề trong HTML
Bảng tiêu đề có thể được xác định bằng thẻ
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
2
Vi du tieu de bang
. Thẻ này để thay thế cho thẻ, được sử dụng để đại diện cho các ô dữ liệu. Thông thường, bạn sẽ đặt hàng đầu tiên của bảng là tiêu đề như hình bên dưới, ngoài ra bạn có thể sử dụng phần tử trong bất kỳ hàng nào. Ten nhan vienLuongMinh Chinh5000Duy Manh7000
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
3
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
4
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
5 xác định độ rộng của Border, trong khi thuộc tính
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
6 thay cho khoảng cách giữa Border ô và nội dung trong một ô
Ví dụ
Vi du the cellpadding va cellspacing trong HTML
Ten nhan vien
Luong
Minh Chinh
5000
Duy Manh
7000
Kết quả như sau
Thuộc tính colspan và rowspan trong HTML
Bạn sử dụng thuộc tính
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
7 để nhập hai hoặc nhiều cột vào một cột. Tương tự là thuộc tính
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
8 để nhập hai hoặc nhiều hàng vào một hàngVí dụ
Vi du the colspan va rowspan trong HTML
Column 1
Column 2
Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
Kết quả hiển thị là
Xác định nền cho bảng trong HTML
Bạn có thể sử dụng một trong hai cách sau để thiết lập nền tảng của bảng
- Thuộc tính
Vi du bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
9 - Bạn sử dụng để thiết lập màu nền cho cả bảng hoặc chỉ cho một ô - Thuộc tính
Vi du tieu de bang
0 - Bạn sử dụng để thiết lập ảnh nền cho cả bảng hoặc chỉ cho một ô
Bên cạnh đó, bạn có thể thiết lập màu cho Border bằng cách sử dụng thuộc tính
Vi du tieu de bang
1Ví dụ
Vi du tao background cho bang trong HTML
Column 1
Column 2
Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
Nó sẽ tạo ra kết quả sau
Dưới đây là một ví dụ về việc sử dụng thuộc tính
Vi du tieu de bang
0. Tại đây, tôi sử dụng một hình có trong thư mục ảnh
Vi du tao background cho bang trong HTML
Column 1
Column 2
Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
Kết quả hiển thị là. Ở đây ảnh nền không áp dụng cho bảng Tiêu đề
Chiều cao và chiều rộng của bảng trong HTML
Bạn sử dụng các thuộc tính
Vi du tieu de bang
3 và
Vi du tieu de bang
4 để thiết lập độ rộng và chiều cao của bảng. Bạn có thể thiết lập nó bằng Pixel hoặc phần trăm của vùng đặt cấu hìnhVí dụ
Chieu cao va do rong bang trong HTML
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
Nó sẽ tạo ra kết quả sau
Bảng tiêu đề phụ trong HTML
Thẻ
Vi du tieu de bang
5 được sử dụng để lưu giữ một tiêu đề hoặc lời giải thích cho bảng và nó được hiển thị trên đầu của bảng. Thẻ này là thẻ cũ trong các phiên bản mới của HTML/XHTMLVí dụ
Vi du phu de bang trong HTML
Vi du phu de bang
row 1, column 1row 1, columnn 2
row 2, column 1row 2, columnn 2
Đoạn mã này sẽ tạo ra kết quả sau
Đầu, thân và bảng trong HTML
Table can be chia làm 3 phần. một tiêu đề, phần thân chứa dữ liệu và một bảng cuối bảng chứa dòng tổng kết. Đầu và chân bảng thì tương tự như đầu trang và chân trang trong các tài liệu văn bản, trong khi phần thân là nội dung chính được hiển thị trong bảng