Bảng trong HTML

Các bảng HTML cho phép sắp xếp dữ liệu như văn bản, hình ảnh, liên kết, các bảng khác, v.v. thành các hàng và cột của các ô.

Các bảng HTML được tạo bằng cách sử dụng thẻ <table> trong đó thẻ <tr> được sử dụng để tạo các hàng của bảng và thẻ <td> được sử dụng để tạo các ô dữ liệu. Các phần tử trong <td> là thường xuyên và được căn trái theo mặc định
Hàng 1, Cột 1 Hàng 1, Cột 2
Hàng 2, Cột 1 Hàng 2, Cột 2
<!DOCTYPE html>
<html>
<head>
<title> Bảng HTML </title>
</head>
<body>
<table border = "1">
<tr>
<td> Hàng 1, Cột 1 </td>
<td> Hàng 1, Cột 2 </td>
</tr>
<tr>
<td> Hàng 2, Cột 1 </td>
<td> Hàng 2, Cột 2 </td>
</tr>
</table>
</body>
</html>
Trong ví dụ trên, border là thuộc tính của thẻ <table> và nó được sử dụng để đặt đường viền trên tất cả các ô. Nếu bạn không cần viền, thì bạn có thể sử dụng border = "0".

Tiêu đề bảng

Tiêu đề bảng có thể được xác định bằng cách sử dụng thẻ <th>. Thẻ này sẽ được sử dụng để thay thế thẻ <td>. Thông thường, bạn sẽ đặt hàng trên cùng của mình làm tiêu đề bảng như bên dưới, nếu không bạn có thể sử dụng phần tử <th> trong bất kỳ hàng nào. Các tiêu đề, được xác định trong thẻ <th> được đặt ở giữa và in đậm theo mặc định.
Tên Mức lương
hieulv68 5000
Tulin 7000
<!DOCTYPE html>
<html>
<head>
<title> Tiêu đề bảng HTML </title>
</head>
<body>
<table border = "1" >
<tr>
<th> Tên </th>
<th> Mức lương </th>
</tr>
<tr>
<td> hieulv68 </td>
<td> 5000 </td>
</tr>
<tr>
<td> Tulin </td>
<td> 7000 </td>
</tr>
</table>
</body>
</html>

Thuộc tính Cellpadding và Cellspacing

Có hai thuộc tính được gọi là cellpadding và cellspacing bạn sẽ sử dụng để điều chỉnh khoảng trắng trong các ô của bảng. Thuộc tính cellspacing xác định không gian giữa các ô của bảng, trong khi cellpadding mô tả khoảng cách giữa các viền ô và nội dung trong một ô.
Tên Mức lương
hieulv68 5000
Tulin 7000
<!DOCTYPE html>
<html>
<head>
<title> HTML Table Cellpadding </title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5" >
<tr>
<th> Tên </th>
<th> Mức lương </th>
</tr>
<tr>
<td> hieulv68 </td>
<td> 5000 </td>
</tr>
<tr>
<td> Tulin </td>
<td> 7000 </td>
</tr>
</table>
</body>
</html>
Thuộc tính Colspan và Rowspan
Bạn sử dụng thuộc tính colspan nếu bạn muốn hợp nhất hai hoặc nhiều cột thành một cột. Cách tương tự bạn sẽ sử dụng thuộc tính rowspan nếu bạn muốn hợp nhất hai hoặc nhiều hàng.
Cột 1 Cột 2 Cột 3
Hàng 1 Ô 1 Hàng 1 Ô 2 Hàng 1 Ô 3
Hàng 2 Ô 2 Hàng 2 Ô 3
Hàng 3 Ô 1
<!DOCTYPE html>
<html>
<head>
<title> Colspan/Rowspan trong bảng HTML </title>
</head>
<body>
<table border = "1" >
<tr>
<th> Cột 1 </th>
<th> Cột 2 </th>
<th> Cột 3 </th>
</tr>
<tr>
<td rowspan = "2" > Hàng 1 Ô 1 </td>
<td> Hàng 1 Ô 2 </td>
<td> Hàng 1 Ô 3 </td>
</tr>
<tr>
<td> Hàng 2 Ô ​​2 </td>
<td> Hàng 2 Ô 3 </td>
</tr>
<tr>
<td colspan = "3" > Hàng 3 Ô 1 </td>
</tr>
</table>
</body>
</html>

Màu nền bảng

Bạn có thể đặt màu nền bảng bằng một trong hai cách sau:
  • Thuộc tính bgcolor - Bạn có thể đặt màu nền cho toàn bộ bảng hoặc chỉ cho một ô.
  • Thuộc tính background - Bạn có thể đặt hình nền cho toàn bộ bảng hoặc chỉ cho một ô.
  • Bạn cũng có thể đặt màu đường viền bằng cách sử dụng thuộc tính bordercolor .
Lưu ý - các thuộc tính bgcolor, backgroundbordercolor không dùng trong HTML5. Không sử dụng các thuộc tính này.
Cột 1 Cột 2 Cột 3
Hàng 1 Ô 1 Hàng 1 Ô 2 Hàng 1 Ô 3
Hàng 2 Ô 2 Hàng 2 Ô 3
Hàng 3 Ô 1
<!DOCTYPE html>
<html>
<head>
<title> Màu nền bảng HTML </title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow" >
<tr>
<th> Cột 1 </th>
<th> Cột 2 </th>
<th> Cột 3 </th>
</tr>
<tr>
<td rowspan = "2" > Hàng 1 Ô 1 </td>
<td> Hàng 1 Ô 2 </td>
<td> Hàng 1 Ô 3 </td>
</tr>
<tr>
<td> Hàng 2 Ô 2 </td>
<td> Hàng 2 Ô 3 </td>
</tr>
<tr>
<td colspan = "3" > Hàng 3 Ô 1 </td>
</tr>
</table>
</body>
</html>
Dưới đây là một ví dụ về việc sử dụng thuộc tính background. Ở đây chúng ta sẽ sử dụng một hình ảnh có sẵn trong thư mục /images.
Cột 1 Cột 2 Cột 3
Hàng 1 Ô 1 Hàng 1 Ô 2 Hàng 1 Ô 3
Hàng 2 Ô 2 Hàng 2 Ô 3
Hàng 3 Ô 1
<!DOCTYPE html>
<html>
<head>
<title> Ảnh/màu nền bảng HTML </title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "images/test.png">
<tr>
<th> Cột 1 </th>
<th> Cột 2 </th>
<th> Cột 3 </th>
</tr>
<tr>
<td rowspan = "2"> Hàng 1 Ô 1 </td>
<td> Hàng 1 Ô 2 </td> <td> Hàng 1 Ô 3 </td>
</tr>
<tr>
<td> Hàng 2 Ô ​​2 </td>
<td> Hàng 2 Ô ​​3 </td>
</tr>
<tr>
<td colspan = "3"> Hàng 3 Ô 1 </td>
</tr>
</table>
</body>
</html>

Chiều cao và chiều rộng của bảng

Bạn có thể thiết lập chiều rộng và chiều cao của bảng bằng cách sử dụng thuộc tính widthheight. Bạn có thể chỉ định chiều rộng hoặc chiều cao của bảng theo pixel hoặc theo tỷ lệ phần trăm của diện tích màn hình có sẵn.
Hàng 1, Cột 1 Hàng 1, Cột 2
Hàng 2, Cột 1 Hàng 2, Cột 2
<!DOCTYPE html>
<html>
<head>
<title> Chiều rộng/Chiều cao của Bảng HTML </title>
</head>
<body>
<table border = "1" width = "400" height = "150" >
<tr>
<td> Hàng 1, Cột 1 </td>
<td> Hàng 1, Cột 2 </td>
</tr>
<tr>
<td> Hàng 2, Cột 1 </td>
<td> Hàng 2, Cột 2 </td>
</tr>
</table>
</body>
</html>

Chú thích bảng

Thẻ caption sẽ thực thi như một tiêu đề hoặc giải thích cho bảng và nó hiển thị ở đầu bảng. Thẻ này không được dùng trong phiên bản HTML/XHTML mới hơn.
Đây là chú thích
hàng 1, cột 1 hàng 1, cột 2
hàng 2, cột 1 hàng 2, cột 2
<!DOCTYPE html>
<html>
<head>
<title> Chú thích bảng HTML </title>
</head>
<body>
<table border = "1" width = "100%" >
<caption> Đây là chú thích </caption>
<tr>
<td> hàng 1, cột 1 </td>
<td> hàng 1, cột 2 </td>
</tr>
<tr>
<td> hàng 2, cột 1 </td> <td> hàng 2, cột 2 </td>
</tr>
</table>
</body>
</html>

Header, Body và Footer trong bảng

Các bảng có thể được chia thành ba phần - header, bodyfooter. Phần đầu và phần cuối khá giống với headerfooter của trình soạn thảo Word, trong khi phần thân là phần giữ nội dung chính của bảng.

Ba yếu tố để phân tách đầu, thân và chân của bảng là:
<thead> - để tạo một tiêu đề bảng riêng biệt.
<tbody> - để chỉ nội dung chính của bảng.
<tfoot> - để tạo một chân trang riêng.

Một bảng có thể chứa một số phần tử <tbody> để chỉ ra các trang khác nhau hoặc các nhóm dữ liệu. Nhưng điều đáng chú ý là các thẻ <thead><tfoot> nên xuất hiện trước <tbody>
Đây là đầu bảng
Đây là chân bảng
Ô 1 Ô 2 Ô 3 Ô 4
<!DOCTYPE html>
<html>
<head>
<title> Bảng HTML </title>
</head>
<body>
<table border = "1" width = "100%" >
<thead>
<tr>
<td colspan = "4" > Đây là đầu bảng </td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" > Đây là chân bảng </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> Ô 1 </td>
<td> Ô 2 </td>
<td> Ô 3 </td>
<td> Ô 4 </td>
</tr>
</tbody>
</table>
</body>
</html>

Lồng bảng

Bạn có thể sử dụng một bảng bên trong một bảng khác. Không chỉ các bảng bạn có thể sử dụng hầu hết tất cả các thẻ bên trong thẻ dữ liệu bảng <td>.

Sau đây là ví dụ về việc sử dụng một bảng khác và các thẻ khác trong một ô của bảng.
Tên Mức lương
hieulv68 5000
Tulin 7000
<!DOCTYPE html>
<html>
<head>
<title> Bảng HTML </title>
</head>
<body>
<table border = "1" width = "100%" >
<tr>
<td>
<table border = "1" width = "100%" >
<tr>
<th> Tên </th>
<th> Mức lương </th>
</tr>
<tr>
<td> hieulv68 </td>
<td> 5000 </td>
</tr>
<tr>
<td> Tulin </td>
<td> 7000 </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>