Table trong HTML

Table trong HTML

Anh NguyễnBạn nghĩ gì về bài viết này?

Giới thiệu

Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng (hàng * cột). Có thể có nhiều cột trong một hàng.

Các thẻ table trong HTML được sử dụng để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang… Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.

Ví dụ về table trong HTML

Thứ tựTênHọĐiểm
1EveJackson94
2JohnDoe80
3AdamJohnson67
4JillSmith50

Đị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>

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>

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

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

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

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>

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

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

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%">
  <tbody><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>
</tbody></table>

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%">
  <tbody><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>
</tbody></table>

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>
  <tbody><tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</tbody></table>

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>
Firstname Lastname Points
Eve Jackson 94

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

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

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

Kết luận

Qua đây là một số chia sẻ về Table trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

Nguồn: https://timoday.edu.vn/bai-16-bang-trong-html/

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận