Ví dụ về bảng trong HTML
Vị trí | Tên quốc gia | Dân số | Thời điểm thống kê |
---|---|---|---|
1 | Trung Quốc | 1.355.692.576 | Tháng 7, 2014 |
2 | Ấn Độ | 1.236.344.631 | Tháng 7, 2014 |
3 | Hoa Kỳ | 318.892.103 | Tháng 7, 2014 |
4 | Indonesia | 253.609.643 | Tháng 7, 2014 |
Tạo bảng trong HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <body> <table style="width:100%"> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Giải thích ví dụ:
Tạo bảng bằng thẻ <table>.
Bảng được chia thành các dòng, định nghĩa bằng thẻ <tr>.
Trong các dòng có chứa nhiều cột, định nghĩa bằng thẻ <td>.
Dòng trong bảng cũng có thể chứa tiêu đề, được định nghĩa bằng thẻ <th>.
Thuộc tính Border trong bảng
Nếu bạn không thêm thuộc tính border vào bảng, bảng đó sẽ hiển thị mà không có đường viền.
Bạn có thể thêm đường viền cho bảng bằng cách sử dụng thuộc tính Border:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <body> <table border="1" style="width:100%"> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Để thêm đường viền bằng CSS, bạn sử dụng thuộc tính border:
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 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table style="width:100%"> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Bạn hãy nhớ tạo đường viền cho cả bảng và các ô trong bảng.
Gộp đường viền trong bảng
Nếu bạn muốn gộp nhiều đường viền thành một đường viền, hãy thêm thuộc tính border-collapse trong CSS:
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 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table style="width:100%"> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Khoảng cách từ viền đến nội dung trong bảng
Padding là thuộc tính quy định khoảng cách từ đường viền của ô đến nội dung bên trong.
Nếu bạn không quy định thuộc tính padding, các ô trong bảng sẽ hiển thị nội dung sát với viền.
Để thiết lập padding bằng CSS chúng ta sử dụng:
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 35 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } </style> </head> <body> <table style="width:100%"> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Tạo tiêu đề trong bảng
Các tiêu đề trong bảng được tạo bằng thẻ <th>
Mặc định, trình duyệt sẽ hiển thị các tiêu đề in đậm và căn giữa:
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 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } </style> </head> <body> <table style="width:100%"> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Để căn trái tiêu đề, bạn sử dụng thuộc tính text-align trong CSS:
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 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } th { text-align: left; } </style> </head> <body> <table style="width:100%"> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Khoảng cách giữa các ô trong bảng
Để thiết lập khoảng cách giữa các ô trong bảng, bạn sử dụng thuộc tính border-spacing trong CSS:
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 35 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; padding: 5px; } table { border-spacing: 15px; } </style> </head> <body> <table style="width:100%"> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Gộp nhiều cột trong bảng
Để gộp nhiều cột trong bảng thành một ô, bạn sử dụng thuộc tính colspan:
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 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <h2>2 cột dưới đây đã được gộp thành 1 ô:</h2> <table style="width:100%"> <tr> <th>Tên</th> <th colspan="2">Điện thoại</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html> |
Gộp nhiều dòng trong bảng
Để gộp nhiều dòng trong bảng thành một ô, bạn sử dụng thuộc tính rowspan:
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 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <h2>2 dòng dưới đây đã được gộp thành 1 ô:</h2> <table style="width:100%"> <tr> <th>Tên:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Điện thoại:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> |
Chú thích cho bảng
Để tạo ghi chú cho bảng, bạn sử dụng thẻ <caption>
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 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <caption>Thống kê dân số các nước</caption> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Trang trí bảng theo nhiều cách
Hầu hết các ví dụ bên trên sử dụng một kiểu trang trí (width=”100%”) để quy định chiều rộng cho bảng.
Bạn có thể sử dụng CSS bên trong thẻ <head>, tuy nhiên nếu không cẩn thận việc này có thể ảnh hưởng đến tất cả các bảng có trong trang.
Để định nghĩa một kiểu riêng biệt cho mỗi bảng, bạn thêm thuộc tính id vào bảng:
1 2 3 4 5 6 7 8 9 10 11 12 |
<table id="table1"> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> </table> |
Giờ bạn có thể viết CSS áp dụng cho từng bảng riêng biệt
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#table1 { width: 100%; background-color: #f1f1c1; } </style> </head> <body> <table style="width:100%"> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> <br> <table id="table1"> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Thêm một số thuộc tính để trang trí 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 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!DOCTYPE html> <html> <head> <style> table { width:100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#table1 tr:nth-child(even) { background-color: #eee; } table#table1 tr:nth-child(odd) { background-color:#fff; } table#table1 th { background-color: black; color: white; } </style> </head> <body> <table> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> <br> <table id="table1"> <tr> <th>Tên quốc gia</th> <th>Dân số</th> <th>Thời điểm thống kê</th> </tr> <tr> <td>Trung Quốc</td> <td>1.355.692.576</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Ấn Độ</td> <td>1.236.344.631</td> <td>Tháng 7, 2014</td> </tr> <tr> <td>Hoa Kỳ</td> <td>318.892.103</td> <td>Tháng 7, 2014</td> </tr> </table> </body> </html> |
Tổng kết bài học
- Sử dụng thẻ <table> để tạo bảng trong HTML
- Sử dụng thẻ <tr> để tạo một dòng trong bảng
- Sử dụng thẻ <td> để tạo một cột trong một dòng
- Sử dụng thẻ <th> để tạo tiêu đề cho bảng
- Sử dụng thẻ <caption> để tạo chú thích cho bảng
- Sử dụng thuộc tính border trong CSS để tạo đường viền
- Sử dụng thuộc tính border-collapse trong CSS để gộp đường viền
- Sử dụng thuộc tính padding trong CSS để quy định khoảng cách từ đường viền tới nội dung
- Sử dụng thuộc tính text-align trong CSS để căn lề nội dung trong ô
- Sử dụng thuộc tính border-spacing trong CSS để quy định khoảng cách giữa các ô trong bảng
- Sử dụng thuộc tính colspan để gộp nhiều cột thành một ô
- Sử dụng thuộc tính rowspan để gộp nhiều dòng thành một ô
- Sử dụng thuộc tính id để tạo định danh cho một bảng