Bài 16: Bảng trong HTML


Ví dụ về bảng trong HTML

Thứ tự Tên Họ Điểm
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Định nghĩa về bảng trong HTML

Ví dụ 1:

<table style=“width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Xem kết quả

Giải thích ví dụ:

Bảng được định nghĩa bởi thẻ <table> .

Bảng được chia thành nhiều hàng, mỗi hàng được xác định bởi thẻ <tr>.

Các dữ liệu trong mỗi hàng của bảng được xác định bởi thẻ<td>.

Mỗi hàng của bảng  cũng có thể được chia thành các tiêu đề của bảng bằng cách dùng thẻ  <th>.

Note Thẻ <td> là nơi chứa dữ liệu của bảng.
Chúng có thể chứa tất cả các loại phần tử của HTML như văn bản, hình ảnh, danh sách, các bảng khác,…

Thuộc tính Border với bảng trong HTML

Nếu bạn không xác định một đường viền cho bảng, nó sẽ được hiển thị mặc định không có đường viền.

Một đường viền có thể được thêm bằng cách sử dụng thuộc tính border:

Ví dụ 2:

<table border=“1” style=“width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Xem kết quả

Note Thuộc tính border sử dụng kiểu đường chuẩn của HTML! Sẽ tốt hơn nếu sử dụng với CSS.

Thêm borders, sử dụng thuộc tính border của CSS:

Ví dụ 3:

table, th, td {
border: 1px solid black;
}

Xem kết quả

Luôn ghi nhớ việc đặt đường viền cho các bảng và các ô trong bảng.


Bảng trong HTML với Collapsed Borders

Nếu bạn muốn thu nhỏ các đường viền vào thành một, Hãy thêm border-collapse trong CSS:

Ví dụ 4:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Xem kết quả


Bảng trong HTML với Cell Padding

Cell padding xác định khoảng trống ở giữa nội dung các ô trong bảng và đường viền xung quanh nó.

Nếu bạn không xác định padding, các ô của bảng sẽ hiển thị không có khoảng trống.

Để tạo khoảng trống, sử dụng thuộc tính padding trong CSS:

Ví dụ 5:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}

Xem kết quả


Tiêu đề của bảng trong HTML

Tiêu đề của bảng được xác định bởi thẻ<th>

Mặc định, tất cả các trình duyệt đều hiển thị tiêu đề của bảng là chữ  in đậm và ở giữa ô.

Ví dụ 6:

<table style=“width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Xem kết quả

Để tiêu đề của bảng nằm về phía bên trái, sử dụng thuộc tính text-align trong CSS:

Ví dụ 7:

th {
text-align: left;
}

Xem kết quả


Bảng trong HTML với Border Spacing

Border spacing xác định khoảng trống giữa các ô trong bảng.

Để thiết lập khoảng trống xung quanh cho một bảng, sử dụng thuộc tính border-spacing trong CSS:

Ví dụ 8:

table {
border-spacing: 5px;
}

Xem kết quả

Note Nếu bảng không có đường viền, thì border-spacing không có tác dụng

Các ô trong bảng đươc chia thành nhiều cột

Để một ô trong bảng có thể chia nhiều hơn một cột, sử dụng thuộc tính colspan:

Ví dụ 9:

<table style=“width:100%”>
<tr>
<th>Name</th>
<th colspan=“2”>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

Xem kết quả


Các ô trong bảng được chia thành nhiều hàng

Để các ô trong bảng có thể chia nhiều hơn 1 hàng, sử dụng thuộc tính rowspan:

Ví dụ 10:

<table style=“width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=“2”>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

Xem kết quả


Lời chú thích với bảng trong HTML

Để thêm chú thích cho bảng, sử dụng thẻ <caption>:

Ví dụ 11:

<table style=“width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

Xem kết quả

Note Thẻ <caption> phải được chèn vào ngay sau thẻ <table>.

Định kiểu đặc biệt cho một bảng

Để định một kiểu đặc biệt cho một bảng, ta thêm thuộc tính id cho bảng:

Ví dụ 12:

<table id=“t01”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Bây giờ bạn có thể tạo kiểu đặc biệt cho bảng này:

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

Xem kết quả

Và thêm nhiều kiểu đặc biệt hơn cho các hàng dữ liệu và hàng tiêu đề:

Ví dụ 13:

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;
}

Xem kết quả


Tóm tắt bài học

  • Trong HTML sử dụng thẻ <table> để tạo một bảng
  • Trong HTML sử dụng thẻ <tr> để tạo một hàng của một bảng
  • Trong HTML sử dụng thẻ <td> để tạo dữ liệu cho một bảng
  • Trong HTML sử dụng thẻ <th> để tạo tiêu đề cho bảng
  • Trong HTML sử dụng thẻ <caption> để tạo chú thích cho bảng
  • Trong CSS sử dụng thuộc tính border để tạo đường viền
  • Trong CSS sử dụng thuộc tính border-collapse để thu nhỏ đường viền của các ô
  • Trong CSS sử dụng thuộc tính padding để thêm khoảng trống trong các ô
  • Trong CSS sử dụng thuộc tính text-align để căn lề văn bản
  • Trong CSS sử dụng thuộc tính border-spacing để thiết lập khoảng trắng giữa các ô
  • Sử dụng thuộc tính colspan để chia một ô thành nhiều cột
  • Sử dụng thuộc tính rowspan để chia một ô thành nhiều hàng
  • Sử dụng thuộc tính id để xác định duy nhất một bảng

Các thẻ cho bảng trong HTML

Thẻ Mô tả
<table> Xác định một bảng
<th> Xác định tiêu đề cho các ô trong bảng
<tr> Xác định hàng trong bảng
<td> Xác định cột trong bảng
<caption> Xác định chú thích cho bảng
<colgroup> Xác định nhóm của một hoặc nhiều cột trong một bảng để định dạng
<col> Xác định thuộc tính column cho mỗi cột bằng phần tử <colgroup>
<thead> Nhóm nội dung các header trong một bảng
<tbody> Nhóm nội dung các body trong một bảng
<tfoot> Nhóm  nội dung các footer trong một bảng

 

Có thể bạn sẽ thích…

Trả lời