Ví dụ và cách sử dụng cũng như trang trí bảng trong HTML.

Bảng trong HTML

Ví dụ về bảng trong HTML

Vị trí	Tên quốc gia	Dân số	Thời điểm thống kê
1	Trung Quốc	1.355.692.576	Tháng 7, 2014
2	Ấn Độ	1.236.344.631	Tháng 7, 2014
3	Hoa Kỳ	318.892.103	Tháng 7, 2014
4	Indonesia	253.609.643	Tháng 7, 2014

Tạo bảng trong HTML

<!DOCTYPE html>

<html>

<body>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<body>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

<body>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

}

</style>

</head>

<body>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

}

</style>

</head>

<body>

<tr>

<th>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

}

th {

text-align: left;

}

</style>

</head>

<body>

<tr>

<th>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

padding: 5px;

}

table {

border-spacing: 15px;

}

</style>

</head>

<body>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>

<h2>2 cột dưới đây đã được gộp thành 1 ô:</h2>

<tr>

<th colspan="2">Điện thoại</th>

</tr>

<tr>

<td>Bill Gates</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:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>

<h2>2 dòng dưới đây đã được gộp thành 1 ô:</h2>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Điện thoại:</th>

</tr>

<tr>

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>

<caption>Thống kê dân số các nước</caption>

<tr>

<th>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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:

<tr>

<th>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

</table>

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

table#table1 {

width: 100%;

background-color: #f1f1c1;

}

</style>

</head>

<body>

<tr>

<th>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

</table>

<br>

<tr>

<th>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

</table>

</body>

</html>

Demo

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

<!DOCTYPE html>

<html>

<head>

<style>

table {

width:100%;

}

table, th, td {

border: 1px solid black;

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>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

</table>

<br>

<tr>

<th>Thời điểm thống kê</th>

</tr>

<tr>

<td>Trung Quốc</td>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 2014</td>

</tr>

<tr>

<td>Tháng 7, 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ước Bài Tiếp »

WebVN Cộng đồng web Việt Nam

Bảng trong HTML

Ví dụ về bảng trong HTML

Tạo bảng trong HTML

Thuộc tính Border trong bảng

Gộp đường viền trong bảng

Khoảng cách từ viền đến nội dung trong bảng

Tạo tiêu đề trong bảng

Khoảng cách giữa các ô trong bảng

Gộp nhiều cột trong bảng

Gộp nhiều dòng trong bảng

Chú thích cho bảng

Trang trí bảng theo nhiều cách

Tổng kết bài học

Bài tập

Leave a Reply Cancel reply