[HTML/HTML5] Phần 16: Bảng biểu trong HTML | DAMMIO

Posted on by mtoplistChuyên mục:Top List

Định nghĩa 1 bảng HTML
Để xây dựng bảng biểu trong HTML, bạn có thể dùng thẻ table. Mỗi bảng chứa nhiều dòng, mỗi dòng được định nghĩa bằng thẻ tr. Nếu là dòng tiêu đề bảng thì dùng thẻ th. Mặc định, các tiêu đề bảng được in đậm và canh giữa. Dữ liệu bảng/ô dùng thẻ td.

<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
  <tr>
    <th>Họ</th>
    <th>Tên</th> 
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>Dammio</td>
    <td>Ta</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td> 
    <td>33</td>
  </tr>
</table>
</body>
</html>

Trong ví dụ trên, chúng ta có 1 bảng với 3 cột và 2 dòng dữ liệu (không tính dòng tiêu đề) ghi thông tin Họ, Tên, Tuổi của 2 người.

Thêm viền cho bảng
Nếu bạn không mô tả gì khung viền cho bảng, bảng sẽ hiển thị mặc định không có viền. Để thêm viền, bạn có thể dùng thuộc tính border như sau:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Họ</th>
    <th>Tên</th> 
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>Dammio</td>
    <td>Ta</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td> 
    <td>33</td>
  </tr>
</table>
</body>
</html>

Hoặc dùng trực tiếp thuộc tính border với giá trị là 1.

<table style="width:100%;" border="1">
...
</table>

Hoặc dùng phong cách nội dòng (inline style)

<table style="width:100%;border:1px solid black">
...
</table>

Đường viền thu gọn
Nếu bạn muốn viền thu hẹp lại chỉ trong 1 viền duy nhất, hãy thêm thuộc tính border-collapse.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Họ</th>
    <th>Tên</th> 
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>Dammio</td>
    <td>Ta</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td> 
    <td>33</td>
  </tr>
</table>
</body>
</html>

Thêm khoảng cách giữa các ô (cell padding)
Cell padding định nghĩa khoảng cách giữa các ô và viền. Để thêm cell padding, hãy dùng thuộc tính padding.

th, td {
    padding: 15px;
}

Tiêu đề canh trái
Theo mặc định, tiêu đề bảng được in đậm và canh giữa. Nếu bạn muốn canh trái hoặc phải tiêu đề, hãy dùng thuộc tính text-align.

th {
    text-align: left; //right
}

Thêm khoảng trống viền
Khoảng trống viền mô tả khoảng cách giữa các ô trong bảng. Để thiết lập khoảng trống viền, bạn chỉ cần thêm thuộc tính border-spacing.

table {
    border-spacing: 5px;
}

Lưu ý: Nếu bảng đã có thuộc tính border-collapse: collapse; thì thuộc tính border-spacing bị vô hiệu.

Ô chứa nhiều cột
Để tạo 1 ô trong bảng chứa nhiều hơn 1 cột, bạn dùng thuộc tính colspan.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Tên</th>
    <th colspan="2">Điện thoại</th>
  </tr>
  <tr>
    <td>Dammio</td>
    <td>123456789</td>
    <td>987654321</td>
  </tr>
</table>
</body>
</html>

Ô chứa nhiều dòng
Để tạo 1 ô chứa hơn 1 dòng, bạn có thể thuộc tính rowspan.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Tên:</th>
    <td>Dammio</td>
  </tr>
  <tr>
    <th rowspan="2">Điện thoại:</th>
    <td>123456789</td>
  </tr>
  <tr>
    <td>123456789</td>
  </tr>
</table>
</body>
</html>

Thêm nhãn (caption)
Bạn có thể dùng thẻ caption để thêm nhãn nội dung cho bảng.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
  <caption>Chi tiêu hàng tháng</caption>
  <tr>
    <th>Tháng</th>
    <th>Chi tiêu</th>
  </tr>
  <tr>
    <td>Tháng 1</td>
    <td>100.000 VND</td>
  </tr>
  <tr>
    <td>Tháng 2</td>
    <td>200.000 VND</td>
  </tr>
</table>
</body>
</html>

Nhãn caption phải được chèn ngay lập tức sau thẻ table. Để định nghĩa phong cách cho 1 bảng, bạn thêm thuộc tính id.

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Đến bước này bạn có thể định nghĩa phong cách cho bảng.

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}

Thêm các phong cách khác.

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Kết luận: Bạn đã học cách tạo 1 bảng trong HTML thông qua các ví dụ trong bài viết này. Mời bạn tiếp tục theo dõi các bài tiếp theo để học thêm nhiều kiến thức về HTML.

mtoplist