Bảng trong HTML – Hướng dẫn cách tạo và các thuộc tính – Học HTML

0
2120

Bảng trong HTML. Hướng dẫn cách sử dụng thẻ <table> trong HTML.Tạo đường viền cho bảng, cách chia cột, chia ô, chia hàng,sử dụng thẻ tr, td và các thuộc tính colspan, rowspan,…

Ví dụ về bả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ị tríTên quốc giaDân sốThời điểm thống kê
1Trung Quốc1.355.692.576Tháng 7, 2014
2Ấn Độ1.236.344.631Tháng 7, 2014
3Hoa Kỳ318.892.103Tháng 7, 2014
4Indonesia253.609.643Tháng 7, 2014

Cách tạo bảng trong HTML

<!DOCTYPE html>
<html>
<body>
 
<table style="width:100%">
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>
 
<table border="1" style="width:100%">
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>
 
<table style="width:100%">
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>
 
<table style="width:100%">
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>
 
<table style="width:100%">
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>
 
<table style="width:100%">
<tr>
<th>Tên quốc gia</th>
<th>Dân số</th>
<th>Thời điểm thống kê</th>
</tr>
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

Để 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>
 
<table style="width:100%">
<tr>
<th>Tên quốc gia</th>
<th>Dân số</th>
<th>Thời điểm thống kê</th>
</tr>
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>
 
<table style="width:100%">
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>
<table style="width:100%">
<tr>
<th>Tên</th>
<th colspan="2">Điện thoại</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
 
</body>
</html>

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>
<table style="width:100%">
<tr>
<th>Tên:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Điện thoại:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
 
</body>
</html>

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>
 
<table style="width:100%">
<caption>Thống kê dân số các nước</caption>
<tr>
<th>Tên quốc gia</th>
<th>Dân số</th>
<th>Thời điểm thống kê</th>
</tr>
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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:

<table id="table1">
   <tr>
      <th>Tên quốc gia</th>
      <th>Dân số</th>
      <th>Thời điểm thống kê</th>
   </tr>
   <tr>
      <td>Trung Quốc</td>
      <td>1.355.692.576</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>
 
<table style="width:100%">
<tr>
<th>Tên quốc gia</th>
<th>Dân số</th>
<th>Thời điểm thống kê</th>
</tr>
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
<br>
 
<table id="table1">
<tr>
<th>Tên quốc gia</th>
<th>Dân số</th>
<th>Thời điểm thống kê</th>
</tr>
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

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>Tên quốc gia</th>
<th>Dân số</th>
<th>Thời điểm thống kê</th>
</tr>
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
<br>
 
<table id="table1">
<tr>
<th>Tên quốc gia</th>
<th>Dân số</th>
<th>Thời điểm thống kê</th>
</tr>
<tr>
<td>Trung Quốc</td>
<td>1.355.692.576</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Ấn Độ</td>
<td>1.236.344.631</td>
<td>Tháng 7, 2014</td>
</tr>
<tr>
<td>Hoa Kỳ</td>
<td>318.892.103</td>
<td>Tháng 7, 2014</td>
</tr>
</table>
 
</body>
</html>

Tổng kết:

Qua bài viết này chúng ta đã biết đượ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

Nếu có bất kỳ thắc mắc hay góp ý cho bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn học tốt với HTML Online ^^.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây