HTML - Bảng
Các bảng HTML cho phép các tác giả web 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 bảng HTML được tạo bằng cách sử dụng <table> trong đó thẻ <tr> được sử dụng để tạo các hàng trong bảng và <td>được sử dụng để tạo các ô dữ liệu. Các phần tử dưới <td> là đều đặn và được căn trái theo mặc định
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</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>Điều này sẽ tạo ra kết quả sau:
Đây, borderlà một 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>nhãn. Thẻ này sẽ được đặt để thay thế thẻ <td>, được sử dụng để đại diện cho ô dữ liệu thực tế. 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ư hình dưới đây, 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 căn giữa và in đậm theo mặc định.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính Cellpadding và Cellspacing
Có hai thuộc tính được gọi là cellpadding và cellspacing mà bạn sẽ sử dụng để điều chỉnh khoảng trắng trong các ô bảng của mình. Thuộc tính cellspacing xác định khoảng cách giữa các ô trong bảng, trong khi cellpadding biểu thị khoảng cách giữa các đường viền ô và nội dung trong một ô.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính Colspan và Rowspan
Bạn sẽ sử dụng colspannếu bạn muốn hợp nhất hai hoặc nhiều cột thành một cột duy nhất. Cách tương tự bạn sẽ sử dụngrowspan nếu bạn muốn hợp nhất hai hoặc nhiều hàng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</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>Điều này sẽ tạo ra kết quả sau:
Hình nền bảng
Bạn có thể đặt nền bảng bằng một trong hai cách sau:
bgcolor Thuộc tính - Bạn có thể đặt màu nền cho toàn bộ bảng hoặc chỉ cho một ô.
background Thuộc tính - 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 viền cũng bằng cách sử dụng bordercolor thuộc tính.
Note- Các thuộc tính bgcolor , background và bordercolor không được dùng trong HTML5. Không sử dụng các thuộc tính này.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</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>Điều này sẽ tạo ra kết quả sau:
Đây là một ví dụ về việc sử dụng backgroundthuộc tính. Ở đây chúng ta sẽ sử dụng một hình ảnh có sẵn trong thư mục / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</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>Điều này sẽ tạo ra kết quả sau. Ở đây hình nền không áp dụng cho tiêu đề của bảng.
Chiều cao và chiều rộng bảng
Bạn có thể đặt chiều rộng và chiều cao của bảng bằng cách sử dụng width và heightthuộc tính. Bạn có thể chỉ định chiều rộng hoặc chiều cao của bảng theo pixel hoặc theo phần trăm diện tích màn hình có sẵn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</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>Điều này sẽ tạo ra kết quả sau:
Bảng chú thích
Các captionthẻ sẽ đóng vai trò 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 nữa trong phiên bản HTML / XHTML mới hơn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</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>Điều này sẽ tạo ra kết quả sau:
Đầu trang, Nội dung và Chân trang của Bảng
Các bảng có thể được chia thành ba phần - phần đầu, phần thân và phần chân. Phần đầu và phần cuối khá giống với phần đầu và chân trang trong tài liệu được xử lý bằng văn bản, vẫn giữ nguyên cho mọi trang, trong khi phần thân là phần chứa nội dung chính của bảng.
Ba yếu tố để tách phần đầu, phần thân và phần 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 bảng riêng biệt.
Một bảng có thể chứa một số phần tử <tbody> để chỉ ra các trang hoặc nhóm dữ liệu khác nhau . Nhưng đáng chú ý là thẻ <thead> và <tfoot> phải xuất hiện trước <tbody>
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</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>Điều này sẽ tạo ra kết quả sau:
Bảng lồng nhau
Bạn có thể sử dụng một bảng bên trong một bảng khác. Không chỉ bảng, bạn có thể sử dụng hầu hết các thẻ bên trong thẻ dữ liệu bảng <td>.
Thí dụ
Sau đây là ví dụ về việc 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>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau: