Nội dung bài viết
Trong quá trình học và làm việc với lập trình web HTML, chắc hẳn các bạn sẽ cần sử dụng thẻ tạo bảng table rất nhiều. Vì vậy đòi hỏi người học lập trình web HTML như chúng ta phải nắm vững các loại thẻ cũng như cách sử dụng với mỗi loại thẻ và các thuộc tính để thao tác với bảng table trong lập trình web HTML.
Trong phạm vi bài viết này, anh sẽ trình bày và hướng dẫn các bạn các cách sử dụng phổ biến và quan trọng của thẻ tạo bảng table trong lập trình web HTML bao gồm cách làm như thế nào để tạo bảng, tiêu đề bảng, khoảng cách dòng và cột, trộn các dòng, cột cũng như cách thiết lập chiều cao, chiều dài và header, footer cho bảng. Để thao tác với bảng table trong HTML, chúng ta sẽ sử dụng các thẻ và các thuộc tính như thẻ table, thẻ tr, thẻ td, thẻ th, thuộc tính cellpadding, cellspacing, thuộc tính colspan, rowspan, width, height, thuộc tính caption, thead, toddy.
Cụ thể cách sử dụng thẻ tạo bảng table và các thuộc tính như thế nào để thao tác với bảng table trong lập trình web HTML? Những chia sẻ dưới đây sẽ giúp bạn giải đáp những thắc mắc trên ngay nhé.
1. Tạo table
Để tạo table trong HTML chúng ta sử dụng thẻ table. Table được cấu tạo bởi các dòng [row] và các cột [column]. Để tạo row chúng ta dùng thẻ tr và để tạo table chúng ta 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ó border trong table thì chúng ta thiết lập thuộc tính border = 0.
2. Tiêu đề table
Chúng ta tạo ra tiêu đề cho table 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 | 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 table 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 | Ramesh Raman | 5000 | Shabbir Hussein | 7000 | |
4. Trộn các dòng và cột
Chúng ta có thể trộn [merge] 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 | Row 1 Cell 2 | Row 1 Cell 3 | Row 2 Cell 2 | Row 2 Cell 3 | |
5. Thiết lập chiều cao và dài cho table
Chúng ta sử dụng thuộc tính width và height để xác định chiều cao và rộng cho table
| 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 table
Chúng ta có thể thêm tiêu đề cho table bằng thuộc tính caption 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 |
HTML Table Caption This is the caption | row 1, column 1 | row 1, column 2 | row 2, column 1 | row 2, column 2 | |
7. Header Body và Footer trong table
Chúng ta sử dụng thead để tạo header trong table, tbody để chỉ nội dung bên trong table và tfoot để tạo ra footer
| 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 31 32 33 34 |
HTML Table | Cell 1 | Cell 2 | Cell 3 | Cell 4 | |
8. Video Demo
9. Thực hành online và source code