Bảng HTML được tạo ra bằng cách sử dụng thẻ trong đó: thẻ được sử dụng để tạo các hàng và thẻ được sử dụng để tạo các ô.. Thông thường bạn sẽ đặt hàng đầu tiên của bảng là tiêu đề nh
Trang 1Bảng trong HTML
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 link… vào các ô trong bảng
Bảng HTML được tạo ra bằng cách sử dụng thẻ <table> trong đó: thẻ <tr> được sử dụng
để tạo các hàng và thẻ <td> được sử dụng để tạo các ô
Ví dụ bảng trong HTML
<!DOCTYPE html> <html> <head> <title>Vi du bang trong HTML</title> </head>
<body> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column
2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr>
</table> </body> </html>
Chạy đoạn mã trên sẽ tạo bảng sau:
Tại đây border là một thuộc tính của thẻ <table> và được sử dụng để đặt Border (đường
viền) dọc tất cả các ô Nếu bạn không cần Border, bạn có thể sử dụng border="0"
Tiêu đề bảng trong HTML
Tiêu đề bảng có thể được xác định bằng thẻ <th> Thẻ này để thế chỗ cho thẻ <td> , mà
đượ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 dưới, ngoài ra bạn có thể sử dụng phần tử <th> trong bất kỳ hàng nào
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du tieu de bang</title> </head> <body>
<table border="1"> <tr> <th>Ten nhan vien</th> <th>Luong</th> </tr> <tr>
<td>Minh Chinh</td> <td>5000</td> </tr> <tr> <td>Duy Manh</td> <td>7000</td>
</tr> </table> </body> </html>
Kết quả hiển thị là:
5000
7000
Trang 2Hai thuộc tính cellpadding và cellspacing trong HTML
Hai thuộc tính này bạn sử dụng để điều chỉnh khoảng trống trắng trong các ô bảng Thuộc
tính cellspacing xác định độ rộng của Border, trong khi thuộc tính cellpadding thay cho
khoảng cách giữa Border ô và nội dung trong một ô
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du the cellpadding va cellspacing trong HTML</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5">
<tr> <th>Ten nhan vien</th> <th>Luong</th> </tr> <tr> <td>Minh Chinh</td>
<td>5000</td> </tr> <tr> <td>Duy Manh</td> <td>7000</td> </tr> </table> </body>
</html>
Kết quả như sau:
5000
7000 Thuộc tính colspan và rowspan trong HTML
Bạn sử dụng thuộc tính colspan để nhập hai hay nhiều cột vào một cột Tương tự là thuộc tính rowspan để nhập hai hay nhiều hàng vào một hàng
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du the colspan va rowspan trong
HTML</title> </head> <body> <table border="1"> <tr> <th>Column 1</th>
<th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell
1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell
2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr>
</table> </body> </html>
Kết quả hiển thị là:
Xác định background 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 của bảng:
Trang 3• Thuộc tính bgcolor - Bạn sử dụng để thiết lập màu nền cho cả bảng hoặc chỉ cho
một ô
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ínhbordercolor
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du tao background cho bang trong
HTML</title> </head> <body> <table border="1" bordercolor="green"
bgcolor="yellow"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th>
</tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td
colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>
Nó sẽ tạo ra kết quả sau:
Dưới đây là một ví dụ về sử dụng thuộc tính background Tại đây chúng tôi sử dụng một
hình có trong thư mục ảnh
<!DOCTYPE html> <html> <head> <title>Vi du tao background cho bang trong
HTML</title> </head> <body> <table border="1" bordercolor="green"
background="/images/test.png"> <tr> <th>Column 1</th> <th>Column 2</th>
<th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell
2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell
3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>
Kết quả hiển thị là Ở đây ảnh nền không áp dụng cho Tiêu đề bảng
Trang 4Chiều cao và độ rộng bảng trong HTML
Bạn sử dụng thuộc tính width và height để 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 khu vực đặt hình
Ví dụ
<!DOCTYPE html> <html> <head> <title>Chieu cao va do rong bang trong
HTML</title> </head> <body> <table border="1" width="400" height="150"> <tr>
<td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column
1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>
Nó sẽ tạo ra kết quả sau:
Phụ đề bảng trong HTML
Thẻ caption đượ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/XHTML
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du phu de bang trong HTML</title>
</head> <body> <table border="1" width="100%"> <caption>Vi du phu de
bang</caption> <tr> <td>row 1, column 1</td><td>row 1, columnn 2</td> </tr>
<tr> <td>row 2, column 1</td><td>row 2, columnn 2</td> </tr> </table> </body>
</html>
Đoạn mã này sẽ tạo ra kết quả sau:
Đầu, thân và chân bảng trong HTML
Bảng có thể được chia làm 3 phần: một tiêu đề, phần thân chứa dữ liệu và một phần 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 Dưới đây là 3 phần tử riêng rẽ trong một bảng:
• <thead> - Tạo một tiêu đề bảng riêng biệt
Trang 5• <tbody> - Chỉ nội dung chính của bảng
• <tfoot> - Tạo một phần chân bảng riêng biệt
Một bảng có thể chứa nhiều phần tử <tbody> để chỉ các vùng, nhóm của dữ liệu Tuy nhiên điều lưu ý là các thẻ <thead> và <tfoot> sẽ xuất hiện trước các thẻ <tbody>
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du bang trong HTML</title> </head>
<body> <table border="1" width="100%"> <thead> <tr> <td colspan="4">Day la phan tieu de bang</td> </tr> </thead> <tfoot> <tr> <td colspan="4">Day la phan chan bang</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell
3</td> <td>Cell 4</td> </tr> </tbody> </table> </body> </html>
Kết quả là:
Lồng bảng vào trong bảng trong HTML
Bạn có thể lồng một bảng vào trong một bảng khác Bạn có thể sử dụng hầu hết tất cả các thẻ bên trong thẻ <td>
Ví dụ
Ví dụ dưới đây sử dụng một bảng khác và các thẻ khác bên trong một ô bảng
<!DOCTYPE html> <html> <head> <title>Vi du bang trong HTML</title> </head>
<body> <table border="1" width="100%"> <tr> <td> <table border="1"
width="100%"> <tr> <th>Ten nhan vien</th> <th>Luong</th> </tr>
<tr> <td>Minh Chinh</td> <td>5000</td> </tr> <tr> <td>Duy
Manh</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body>
</html>
Nó sẽ cho kết quả như sau:
Luong
5000
7000
Loạt bài hướng dẫn học lập trình HTML cơ bản và nâng cao của chúng tôi dựa trên
Trang 6Follow https://www.facebook.com/vietjackteam/ để tiếp tục theo dõi các loạt bài mới nhất
về Java,C,C++,Javascript,HTML,Python,Database,Mobile mới nhất của chúng tôi
khóa học trực tuyến về tất cả các ngôn ngữ lập trình, thiết kế web, photoshop tại tổ hợp công nghệ giáo dục TOPICA, cũng như để ủng hộ cho website vietjack.com