Bảng Trong HTML - WebVN

Trang chủ » Căn Lề Table Trong Html » Bảng Trong HTML - WebVN

Có thể bạn quan tâm

« Bài TrướcBài Tiếp »

Ví dụ về bảng trong HTML

Vị tríTên quốc giaDân sốThời điểm thống kê
1Trung Quốc1.355.692.576Tháng 7, 2014
2Ấn Độ1.236.344.631Tháng 7, 2014
3Hoa Kỳ318.892.103Tháng 7, 2014
4Indonesia253.609.643Tháng 7, 2014

Tạo bảng trong HTML

123456789101112131415161718192021222324 <!DOCTYPE html><html><body> <table style="width:100%"><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

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

Các cột dùng để chứa dữ liệu trong bảng. Chúng có thể chứa tất cả các thành phần của HTML như văn bản, ảnh, bảng khác, v.v…

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:

123456789101112131415161718192021222324 <!DOCTYPE html><html><body> <table border="1"style="width:100%"><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

Thuộc tính border sắp bị loại ra khỏi chuẩn HTML! Tốt hơn hết nên sử dụng CSS

Để thêm đường viền bằng CSS, bạn sử dụng thuộc tính border:

12345678910111213141516171819202122232425262728293031 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;}</style></head><body> <table style="width:100%"><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

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:

1234567891011121314151617181920212223242526272829303132 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;border-collapse:collapse;}</style></head><body> <table style="width:100%"><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

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:

1234567891011121314151617181920212223242526272829303132333435 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;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áng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

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:

12345678910111213141516171819202122232425262728293031323334353637383940 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;border-collapse:collapse;}th, td {padding:5px;}</style></head><body> <table style="width:100%"><tr><th>Tênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

Để căn trái tiêu đề, bạn sử dụng thuộc tính text-align trong CSS:

12345678910111213141516171819202122232425262728293031323334353637383940414243 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;border-collapse:collapse;}th, td {padding:5px;}th {text-align:left;}</style></head><body> <table style="width:100%"><tr><th>Tênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

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:

1234567891011121314151617181920212223242526272829303132333435 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;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áng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

Nếu bảng đã thiết lập thuộc tính gộp đường viền (border-collapse) thì thuộc tính border-spacing sẽ không có tác dụng.

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:

12345678910111213141516171819202122232425262728293031 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;border-collapse:collapse;}th, td {padding:5px;text-align:left;}</style></head><body> <h2>2cộtdướiđâyđãđượcgộpthành1ô:</h2><table style="width:100%"><tr><th>Tên</th><th colspan="2">Điệnthoại</th></tr><tr><td>Bill Gates</td><td>55577854</td><td>55577855</td></tr></table> </body></html>

Demo

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:

123456789101112131415161718192021222324252627282930313233 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;border-collapse:collapse;}th, td {padding:5px;text-align:left;}</style></head><body> <h2>2dòngdướiđâyđãđượcgộpthành1ô:</h2><table style="width:100%"><tr><th>Tên:</th><td>Bill Gates</td></tr><tr><th rowspan="2">Điệnthoại:</th><td>55577854</td></tr><tr><td>55577855</td></tr></table> </body></html>

Demo

Chú thích cho bảng

Để tạo ghi chú cho bảng, bạn sử dụng thẻ <caption>

123456789101112131415161718192021222324252627282930313233343536373839404142 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;border-collapse:collapse;}th, td {padding:5px;text-align:left;}</style></head><body> <table style="width:100%"><caption>Thốngkêdânsốcácnước</caption><tr><th>Tênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

Thẻ <caption> cần phải được chèn ngay ở dưới thẻ <table>.

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:

123456789101112 <table id="table1"><tr><th>Tênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr></table>

Giờ bạn có thể viết CSS áp dụng cho từng bảng riêng biệt

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 <!DOCTYPEhtml><html><head><style>table, th, td {border:1pxsolidblack;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ênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> <br> <table id="table1"><tr><th>Tênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

Thêm một số thuộc tính để trang trí cho bảng

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 <!DOCTYPEhtml><html><head><style>table {width:100%;}table, th, td {border:1pxsolidblack;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ênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> <br> <table id="table1"><tr><th>Tênquốcgia</th><th>Dânsố</th><th>Thờiđiểmthốngkê</th></tr><tr><td>Trung Quốc</td><td>1.355.692.576</td><td>Tháng7,2014</td></tr><tr><td>ẤnĐộ</td><td>1.236.344.631</td><td>Tháng7,2014</td></tr><tr><td>HoaKỳ</td><td>318.892.103</td><td>Tháng7,2014</td></tr></table> </body></html>

Demo

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

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5 Bài tập 6 « Bài TrướcBài Tiếp »

Từ khóa » Căn Lề Table Trong Html