HTML – Bảng

102
HTML - Bảng

Bảng HTML cho phép 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 được định nghĩa bằng thẻ <table>.

Bảng được chia thành các hàng (table rows) bằng thẻ <tr>.

Các hàng đó được chia thành các cột dữ liệu (table data) bằng thẻ <td>.

Một hàng cũng có thể chia thành các cột tiêu đề (table headings) bằng thẻ <th>.

Ví 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>

Kết quả:

HTML - Bảng - 01

Border ở đây là một thuộc tính của thẻ <table> và nó được sử dụng để đặt đường viền bao quanh các ô. Nếu bạn không cần đường viền, thiết lập border=”0″ là xong.

Tiêu đề bảng <th> (Table Heading)

Tiêu đề bảng có thể được định nghĩa bằng thẻ <th>. Thẻ <th> này được đặt để thay thế cho thẻ <td>, được sử dụng để đại diện cho ô dữ liệu thực tế. Thông thường bạn sẽ đặt nó vào dòng đầu tiên làm tiêu đề của bảng như dưới đây, hoặc bạn có thể sử dụng thẻ <th> ở bất kì dòng nào.

Ví 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>

Kết quả :

HTML - Bảng - 02

Thuộc tính cellpadding và cellspacing

Thuộc tính cellpadding và cellspacing được sử dụng để điều chỉnh khoảng trắng trong các ô của bảng. Thuộc tính cellspacing định nghĩa độ rộng của đường viền, cellpadding đại diện cho khoảng cách giữa các đường viền của các ô với nội dung của một ô.

Ví 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>

Kết quả:

HTML - Bảng - 03

Thuộc tính Colspan và Rowspan

Bạn sẽ sử dụng thuộc tính colspan nếu bạn muốn ghép 2 hay nhiều cột thành một cột. Tương tự, bạn sử dụng rowspan nếu bạn muốn ghép (merge) 2 hay nhiều dòng.

Ví 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>

Kết quả:

HTML - Bảng - 04

Background của bàng

Bạn có thể thiết lập nền của bảng bằng một trong 2 cách sau :

  • Thuộc tính bgcolor: Bạn có thể thiết lập màu nền cho toàn bộ bảng hoặc chỉ một ô.
  • Thuộc tính background: Bạn có thể thiết lập hình nền cho toàn bộ bảng hoặc chỉ một ô.

Bạn cũng có thể thiết lập màu của đường viền sử dụng thuộc tính bordercolor.

Ví 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>

Kết quả:

HTML - Bảng - 05

Đây là một ví dụ sử dụng thuộc tính background. Ví dụ bên dưới sử dụng một ả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.jpg">
<tr>
<th>Column 1</th>
<th>Column 2</th>
h>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ả:

HTML - Bảng - 06

Kích thước của bảng

Bạn có thể thiết lập độ rộng và chiều cao của bảng bằng cách sử dụng thuộc tính width và height. Bạn có thể chỉ định chiều cao, chiều rông bằng pixels hoặc tỷ lệ % diện tích màn hình.

Ví 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>

Kết quả:

HTML - Bảng - 07

Tựa đề (Caption)

Thẻ caption sẽ hoạt động như tiêu đề hoặc phần giải thích cho bảng, nó được hiển thị ở phần trên cùng của bảng. Thẻ này không hoạt động trong phiên bản mới của HTML/XHTML.

Ví 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>

Kết quả:

HTML - Bảng - 08

Đầu, thân và chân bảng

Bảng có thể được chia ra thành 3 phần : header, body, foot.

Phần head và foot giống với phần header và footer trong tài liệu word, nó tồn tại giống nhau trên tất cả các trang, trong khi đó body là phần nội dung chính của bảng.

3 phần ấy là:

  • <thead> dùng để tạo tiêu đề bảng (table header) tách biệt
  • <body> dùng để tạo phần thân của bảng
  • <tfoot> dùng để tạo một footer bảng tách biệt

Một bảng có thể chứa vài phần tử <tbody> để chỉ cách trang khác nhau hoặc nhóm dữ liệu.

Nhưng lưu ý rằng thẻ <thead> và <tfoot> sẽ xuất hiện trước <tbody>

Ví 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>

Kết quả:

HTML - Bảng - 09

Bảng lồng nhau (Nested Tables)

Một bảng có thể được lồng vào trong một bảng khác. Không chỉ bảng mà bạn có thể sử dụng hầu như tất cả các thẻ bên trong thẻ <td> của bảng.

Ví dụ:

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

Kết quả:

HTML - Bảng - 10