Table HTML là một phần tử HTML giúp bạn thể hiện dữ liệu một cách trực quan, dễ đọc và dễ hiểu đến với người dùng. Cấu trúc dữ liệu bảng cũng là một lựa chọn phù hợp để bạn chắt lọc, lựa chọn và hiển thị nội dung nổi bật trên trang web theo cách ngắn gọn nhất. Vậy Table HTML là gì và cách sử dụng cấu trúc dữ liệu này như thế nào?

Đọc bài viết dưới đây để tìm hiểu về:

  • Cấu trúc dữ liệu bảng trong HTML
  • Một số thuộc tính và thẻ tags phổ biến trong dữ liệu bảng
  • Cách sử dụng dữ liệu bảng và ví dụ phân tích cụ thể

Giới thiệu về Table trong HTML

Bảng (Table) là phần tử HTML thể hiện dữ liệu được sắp xếp theo hàng và cột tương tự như một bảng tính. Trong HTML, cấu trúc bảng có thể giúp bạn dễ dàng sắp xếp các thành phần từ đơn giản đến phức tạp theo một cách hoàn chỉnh với đầy đủ về tiêu đề hàng, cột, tiêu đề hợp nhất,… 

Nội dung hay dữ liệu của bảng sẽ được bao bọc bởi cặp thẻ chính là:

<table> và </table>

Bên trong đó là các cặp thẻ như:

<tr></tr> (tạo hàng)
<td></td> (tạo cột)

Ví dụ cách áp dụng Table HTML:

<table>

  <tr>
    <td>Ô 1</td>
    <td>Ô 2</td>
    <td>Ô 3</td>
  </tr>

  <tr>
    <td>Ô 4</td>
    <td>Ô 5</td>
    <td>Ô 6</td>
  </tr>

</table>

Hiển thị trên web như sau:

Ô 1

Ô 2 Ô 3
Ô 4 Ô 5

Ô 6

Hiện nay, sử dụng Table HTML trong các trang web trở nên phổ biến hơn nhờ lượng thông tin được hiển thị rõ ràng, dễ hiểu và ngắn gọn.

Một số thẻ (tag) phổ biến của Table HTML

Để lập trình cơ bản dữ liệu Table trong HTML thì bên cạnh cặp thẻ <table>, bạn cũng cần sử dụng đến một số cặp thẻ như sau: 

  • <th>: Xác định tiêu đề (headings) trong bảng, được sử dụng bên trong cặp thẻ <tr></tr>.
  • <tr>: Xác định một hàng (row) trong bảng
  • <td>: Xác định 1 ô trong bảng và được đặt nằm trong cặp thẻ <tr></tr>. 
  • <caption>: Ghi chú thích cho bảng
  • <colgroup>: Chỉ định một nhóm (gồm một hoặc nhiều cột) trong bảng
  • <col>: Được đặt trong thẻ <colgroup> và dùng để quy định thuộc tính cho cột. 
  • <thead>: Xác định nội dung các tiêu đề trong một bảng
  • <tbody>: Chứa các nội dung chính trong bảng
  • <tfoot>: Tạo nội dung ở chân trang (footer) cho bảng

Xem thêm Việc làm Lập trình viên Front-End tại TP. Hồ Chí Minh

Xem thêm Việc làm Lập trình viên Front-End tại Hà Nội

Cách tạo cấu trúc dữ liệu bảng bằng HTML

Khởi tạo bảng (Table)

Đầu tiên, bạn khởi tạo bảng bằng cách khai báo cặp thẻ <table></table> ở trong file HTML, sau đó đặt các thẻ thành phần như <tr>, <td> vào bên trong thẻ <table>. Để tạo một bảng đơn giản, bạn có thể tham khảo qua ví dụ sau:

<table>

  <td>Ô đầu tiên</td>
  <td>Ô thứ hai</td>
  <td>Ô thứ hai</td>
  <td>Ô thứ tư</td>

</table>

Với cú pháp như ví dụ trên, bảng sẽ được tạo với một hàng đầu tiên với mỗi phần tử <td> sẽ tạo một ô và được tự động căn chỉnh với nhau trên cùng một hàng, như sau:

Ô đầu tiên

Ô thứ hai

Ô thứ ba

Ô thứ tư

Nếu bạn muốn tạo thêm 1-2 hàng nữa thì chỉ cần sử dụng thêm phần tử <tr> (table row), mỗi hàng sẽ được bao bọc trong một phần tử <tr> với mỗi ô chứa trong một <td>. Ví dụ: 

<table>

  <tr>
    <td>Ô đầu tiên</td>
    <td>Ô thứ hai</td>
    <td>Ô thứ ba</td>
    <td>Ô thứ tư</td>
  </tr>

  <tr>
    <td>Hàng thứ hai, ô đầu tiên</td>
    <td>Hàng thứ hai, ô thứ 2</td>
    <td>Hàng thứ hai, ô thứ 3</td>
    <td>Hàng thứ hai, ô thứ 4</td>
  </tr>

</table>

Ô đầu tiên

Ô thứ hai Ô thứ ba Ô thứ tư
Hàng thứ hai, ô đầu tiên Hàng thứ hai, ô thứ 2 Hàng thứ hai, ô thứ 3

Hàng thứ hai, ô thứ 4

Khởi tạo bảng với phần tử <td> và <tr>

Thêm các ô tiêu đề (Table Header)

Table Header <th> được dùng để định dạng một ô trở thành header, nằm trong thẻ <tr> và có chức năng tương tự với cặp thẻ <td>. Thông thường, các ô heading sẽ được điều chỉnh căn giữa và in đậm để giúp chúng nổi bật hơn đối với người dùng.

<table>

  <tr>
    <th>Họ</th>
    <th>Tên</th>
    <th>Số điện thoại</th>
  </tr>

  <tr>
   <td>Nguyễn</td>
   <td>Thảo</td>
   <td>0123456789</td>
  </tr>

  <tr>
    <td>Lê</td>
    <td>Tuấn</td>
    <td>0987654321</td>
  </tr>

</table>
Họ Tên Số điện thoại

Nguyễn

Thảo 0123456789
Tuấn

0987654321

Kết quả của ví dụ về tiêu đề bảng trong HTML

Thêm Header, Body và Footer 

Khi cấu trúc bảng có hơi phức tạp và nhiều thông tin thì bạn có thể sử dụng các thuộc tính <thead>, <tbody> và <tfoot> để đánh dấu phần đầu của cột, phần cuối cũng như nội dung chính cho bảng.

Bên cạnh đó, <thead> còn có chức năng giúp quản lý thông tin trong bảng một cách dễ dàng hơn, cố định phần tiêu đề khi bảng có chứa dữ liệu lớn.

Hay <tbody> giúp tự động tạo scroll, tách biệt với phần <thead> để dễ dàng tiếp cận thông tin và <tfoot> khi số lượng dòng vượt quá chiều cao của bảng.

Để sử dụng các thuộc tính này trong table HTML, bạn có thể tham khảo cách như sau:

  • <thead> có nhiệm vụ gom nhóm tiêu đề bảng, thường sẽ là hàng đầu tiên. Nếu bạn có đang sử dụng thuộc tính <col> hoặc <colgroup> thì <thead> sẽ ở ngay bên dưới thuộc tính này. 
  • Đối với <tfoot> sẽ bao gồm các nội dung ở phía cuối của bảng, thường sẽ là các cột mang nội dung thành tiền hoặc là đếm tổng. 
  • <tbody> sẽ bao bọc các phần nội dung của bảng, sẽ xuất hiện ở ngay bên dưới nội dung của <thead>. 

Lưu ý:

Trong code table HTML dù bạn có thay đổi vị trí của các thẻ <tbody> hoặc <thead> (ví dụ bạn viết <tbody> trên cùng, còn <thead> ở giữa) thì khi hiển thị trên trang web, nội dung của thẻ <tbody> vẫn sẽ nằm đúng ở vị trí ngay giữa.

Điều này nghĩa là nếu bạn đặt các nhóm này ở đâu thì khi hiển thị vẫn theo đúng trình tự <thead>, <tbody> và <tfoot>. 

Cùng xem qua ví dụ về cách sử dụng các thẻ <thead>, <tbody> và <tfoot>:

<table>

  <thead>
    <tr>
      <th colspan="2">Công ty A</th>
      <th colspan="2">Công ty B</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Số lượng nhân viên</td>
      <td>Điểm hài lòng</td>
      <td>Số lượng nhân viên</td>
      <td>Điểm hài lòng</td>
    </tr>

    <tr>
      <td>200</td>
      <td>4.3</td>
      <td>1000</td>
      <td>3.7</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan= "4">Số liệu được cập nhật lần cuối: 31/03/2024</th>
    </tr>
  </tfoot>

</table>
Công ty A Công ty B

Số lượng nhân viên

Điểm hài lòng Số lượng nhân viên Điểm hài lòng
200 4.3 1000 3.7

Số liệu được cập nhật lần cuối: 31/03/2024

Kết quả của bảng code Table HTML

Theo ví dụ trên, có thể thấy được tiêu đề (header) của bảng được hiển thị bằng các công ty trong danh sách sẵn có, phần số lượng nhân viên và điểm hài lòng cho phần thân (body) và câu cuối cùng chính là phần chân trang (footer) của bảng. 

Thêm chú thích (caption)

Công dụng chính của việc thêm chú thích là cung cấp mô tả về dữ liệu được trình bày trong bảng, giúp người dùng dễ dàng nắm bắt được nội dung chính.

Để chèn chú thích vào bảng, bạn hãy sử dụng cặp thẻ <caption> và thường được tạo ngay sau cặp thẻ <table> được tạo. Chú thích thường được đặt ở đầu bảng và luôn được căn giữa.

<table>

  <caption>Thông tin về các tháng trong năm 2024</caption>

  <tr>
    <th>Tháng</th>
    <th>Số ngày</th>
    <th>Nhiệt độ trung bình</th>
  </tr>

  <tr>
    <td>1</td>
    <td>31</td>
    <td>25</td>
  </tr>

  <tr>
    <td>2</td>
    <td>29</td>
    <td>27</td>
  </tr>

  <tr>
    <td>3</td>
    <td>31</td>
    <td>28</td>
  </tr>

</table>

Thông tin về các tháng trong năm 2024

Tháng Số ngày Nhiệt độ trung bình

1

31 25
2 29 27
3 31

28

Kết quả của cấu trúc chèn chú thích trong Table HTML

Sử dụng thuộc tính phạm vi (Scope Attribute) trong Table HTML

Thuộc tính Scope được sử dụng để liên kết các ô nội dung với ô tiêu đề tương ứng. Đối với một bảng đơn giản, thuộc tính scope sẽ giúp cho thông tin về mối quan hệ giữa các tiêu đề và dữ liệu được rõ ràng. Từ đó, nâng cao khả năng nhận biết cho các công cụ đọc màn hình và các công nghệ hỗ trợ người khuyết tật.

Ngoài ra, thuộc tính scope có thể chứa bất kỳ một trong bốn thuộc tính: col, row, rowgroup hay colgroup để chỉ một tiêu đề cột, hàng hoặc là một nhóm tiêu đề cột và hàng tương ứng.

<table>

  <tr>
    <th></th>
    <th scope="col">Tên</th>
    <th scope="col">Điểm</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Anh</td>
    <td>10</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Ánh</td>
    <td>9.5</td>
  </tr>

  <tr>
    <td>3</td>
    <td>Bình</td>
    <td>9.5</td>
  </tr>

</table>
Tên Điểm

1

Anh 10
2 Ánh 9.5
3 Bình

9.5

Kết quả của đoạn code HTML thuộc tính scope

Sử dụng Cell Spanning

Tùy theo tình huống mà đôi khi bạn sẽ cần hợp nhất một số dòng hoặc cột trong bảng để hiển thị thông tin được đầy đủ và chính xác hơn. Nếu trong các phần mềm như MS Word hoặc Excel thì bạn có thể sử dụng chức năng “merge” để hợp nhất các ô.

Tương tự, với HTML, bạn sẽ sử dụng hai thuộc tính là <colspan> để hợp nhất các ô theo hàng và <rowspan> để hợp nhất các ô theo cột. Giá trị của hai thuộc tính này được gán số lớn hơn 0, tương đương với số lượng ô bạn muốn hợp nhất. 

Theo ví dụ dưới đây, sử dụng thuộc tính <colspan>, <rowspan> để hợp nhất 2 ô theo chiều ngang và 3 ô theo chiều dọc. Ngoài ra, khi sử dụng hai thuộc tính này, bạn nên kiểm tra kỹ các giá trị được gán vào chính xác để tránh các ô bị chồng chéo vào nhau.

<table>

  <tr>
    <th>Tên</th>
    <th>Môn</th>
    <th>Điểm</th>
  </tr>

  <tr>
    <td rowspan = "2">Nam</td>
    <td>Nhập môn HTML</td>
    <td>75</td>
  </tr>

  <tr>
    <td>Nhập môn JavaScript</td>
    <td>60</td>
  </tr>

  <tr>
    <td rowspan = "2">Tâm</td>
    <td>Nhập môn HTML</td>
    <td>80</td>
  </tr>

  <tr>
    <td>Nhập môn JavaScript</td>
    <td>75</td>
  </tr>

  <tr>
    <td colspan="3">Trung bình: 72.5</td>
  </tr>

</table>
Tên Môn Điểm

Nam

Nhập môn HTML 75
Nhập môn JavaScript 60
Tâm Nhập môn HTML 80
Nhập môn JavaScript 75

Trung bình: 72.5

Kết quả của cấu trúc cell spanning

Cách định dạng bảng trong HTML

Định dạng bảng với thuộc tính <col> và <colgroup>

Nếu như bạn muốn highlight một số thông tin quan trọng hoặc đơn giản là thêm màu sắc cho bảng thì có thể định dạng chúng bằng thuộc tính <col> và <colgroup>. Lúc này, các phần tử <col> sẽ nằm bên trong thẻ <colgroup> và đặt ngay bên dưới thẻ <table>. Cụ thể như sau:

<table>

  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>

  <tr>
    <th>Tên</th>
    <th>Tuổi</th>
  </tr>

  <tr>
    <td>Thanh</td>
    <td>33</td>
  </tr>

  <tr>
    <td>Lâm</td>
    <td>25</td>
  </tr>

</table>

table html - bảng html - itviec blog

Với cấu trúc trên, bạn có thể ứng dụng để định dạng kiểu dáng cho một cột có chứa thông tin hoặc nội dung quan trọng. Thẻ <col> sẽ giúp bạn định dạng kiểu dáng cho tất cả các ô của cột cùng một lúc, thay vì phải định dạng theo từng cột riêng lẻ.

Ngoài ra, nếu như bạn muốn highlight cả hai cột thì chỉ cần chèn thêm thuộc tính span vào <col> và giá trị của span sẽ là số lượng cột bạn muốn áp dụng định dạng, cụ thể như:

Cấu trúc định dạng 2 cột có màu trong Table HTML:

<colgroup>

     <col style="background-color: yellow" span="2" />

</colgroup>

Tương tự với <colspan> và <rowspan>, span chỉ nhận một giá trị số, không có đơn vị chỉ số cột mà bạn muốn định dạng kiểu dáng.

Border 

Để tạo đường viền cho bảng, bạn hãy sử dụng thuộc tính border chèn trong các thẻ <table>, <th> và <td>. Một số kiểu định dạng bảng bằng thuộc tính border cụ thể như sau:

  • Border-collapse: thu gọn đường viền thành một đường viền đơn. 
  • Border-radius: bo tròn đường viên bảng. 
  • Border-color: Điều chỉnh màu sắc cho đường viền.
  • Border-style: định dạng kiểu đường viền như dotted, dashed, solid, double, groove, ridge, none, hidden,… 

Ví dụ như:

<style>

th, td {
  border-style:solid;
  border-radius: 10px;
  border-color: #96D4D4;
}

</style>

Kết quả cho ví dụ về các chức năng của thuộc tính border kể trên (Nguồn: w3school.com) 

Cellpadding & Cellspacing

Cellpadding là thuộc tính xác định khoảng cách giữa các nội dung trong ô và đường viền ô và có giá trị đo lường mặc định là pixels. Để thêm khoảng cách giữa các ô, bạn có thể sử dụng các thuộc tính như padding-top, padding-bottom, padding-left và padding-right.

Ví dụ:

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

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

Kết quả cho ví dụ cách sử dụng thuộc tính Cell Padding kể trên (Nguồn: w3school.com)

Bên cạnh đó, Cellspacing giúp xác định khoảng cách giữa các ô và cũng có giá trị mặc định là pixels. Để thay đổi khoảng cách giữa các ô, bạn có thể sử dụng thuộc tính border-spacing trong thẻ <table>, cụ thể như sau:

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

table {
  border-spacing: 30px;
}

Kết quả cho ví dụ của thuộc tính Cell Spacing kể trên (Nguồn: w3school.com)

Width và Height 

Width và Height là hai thuộc tính dùng để xác định chiều rộng và chiều cao của bảng. Giá trị của hai đơn vị này có thể được xác định theo pixel (px) hay phần trăm (%). Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Bảng bên dưới có chiều rộng bằng 100% chiều rộng phần nội của phần tử body</p>

    <table border="1" width="100%">
        <tr>
            <th>Họ và tên</th>
            <th>Năm sinh</th>
            <th>Giới tính</th>
            <th>Quê quán</th>
        </tr>

        <tr>
            <td>Nguyễn Thành A</td>
            <td>1993</td>
            <td>Nam</td>
            <td>Cần Thơ</td>
        </tr>

        <tr>
            <td>Trần Văn B</td>
            <td>1985</td>
            <td>Nam</td>
            <td>Vĩnh Long</td>
        </tr>

        <tr>
            <td>Lê Thị C</td>
            <td>1990</td>
            <td>Nữ</td>
            <td>Sóc Trăng</td>
        </tr>

    </table>

    <p>- Bảng bên dưới có chiều rộng bằng 500 pixel</p>

    <table border="1" width="500px">
        <tr>
            <th>Họ và tên</th>
            <th>Năm sinh</th>
            <th>Giới tính</th>
            <th>Quê quán</th>
        </tr>

        <tr>
            <td>Nguyễn Thành A</td>
            <td>1993</td>
            <td>Nam</td>
            <td>Cần Thơ</td>
        </tr>

        <tr>
            <td>Trần Văn B</td>
            <td>1985</td>
            <td>Nam</td>
            <td>Vĩnh Long</td>
        </tr>

        <tr>
            <td>Lê Thị C</td>
            <td>1990</td>
            <td>Nữ</td>
            <td>Sóc Trăng</td>
        </tr>

    </table>
</body>
</html>

table html - bảng html - itviec blog

Ví dụ của thuộc tính Width và Height

Một số ví dụ về cách sử dụng Table HTML

Ví dụ table HTML 1

Để hiểu rõ hơn về các thuộc tính cũng như cách sử dụng Table trong HTML, bạn có thể tham khảo qua một số ví dụ như sau: 

<!DOCTYPE html>
<html>

<style>
table, th, td {

  border:1px solid black;

}
</style>

<body>

<h2>Một table HTML cơ bản</h2>

<table style="width:100%">

  <tr>
    <th>Tên</th>
    <th>Giới tính</th>
    <th>Quốc tịch</th>
  </tr>

  <tr>
    <td>Linh</td>
    <td>Nữ</td>
    <td>Việt Nam</td>
  </tr>

  <tr>
    <td>John</td>
    <td>Nam</td>
    <td>Hoa Kỳ</td>
  </tr>

</table>

<p>Thêm đường viền vào bảng để hiểu ví dụ tốt hơn.</p>

</body>
</html>

table html - bảng html - itviec blog

Kết quả của cấu trúc dữ liệu Table HTML

Theo ví dụ trên, có thể thấy:

  • Mỗi ô của bảng được xác định bằng cặp thẻ <td> và </td>. Mỗi thứ giữa cặp thẻ này đều là nội dung của bảng.
  • <tr> chính là các hàng của bảng. Bạn có thể để bao nhiêu hàng tùy ý trong một bảng và số ô trong mỗi hàng giống nhau. 
  • <th> là tiêu đề của bảng, nếu bạn muốn các ô đều là ô tiêu đề bảng thì hãy sử dụng thẻ <th> thay vì <td>.

Ví dụ table HTML 2

<table style="width:100%">

  <thead>

<tr>
   <th scope="col" rowspan="2">Tên</th>
   <th scope="col" rowspan="2">Tuổi</th>
   <th scope="col" colspan="2">Trình độ học vấn</th>
   <th scope="col" rowspan="2">Bằng cấp tiếng Anh</th>
</tr>

<tr>
   <th scope="col">Bằng cấp cao nhất</th>
   <th scope="col">Cấp năm</th>
</tr>

  </thead>

  <tbody>

<tr>
   <th scope="row">Nguyên</th>
   <td>32</td>
   <td>Đại học</td>
   <td>2014</td>
   <td>Không có</td>
</tr>

<tr>
   <th scope="row">Lý</th>
   <td>29</td>
   <td>Cao đẳng</td>
   <td>2017</td>
   <td>Không có</td>
</tr>

<tr>
   <th scope="row">Tiên</th>
   <td>28</td>
   <td>Đại học</td>
   <td>2018</td>
   <td>IELTS</td>
</tr>

  </tbody>

</table>

table html - bảng html - itviec blog

Kết quả của cấu trúc dữ liệu bảng HTML

Với ví dụ số 2, có thể thấy hàng đầu tiên của bảng với các <th> là “Tên”, “Tuổi”, “Trình độ học vấn” và “Bằng cấp tiếng Anh”. Trong đó “Trình độ học vấn” có hai tiêu đề phụ là “Bằng cấp cao nhất” và “Cấp năm”. Cú pháp này được thực hiện như sau:

  • “Tên”, “Tuổi” và “Bằng cấp tiếng Anh” được hợp nhất trên cả hai hàng tiêu đề của bảng bằng cách sử dụng thuộc tính <rowspan>. 
  • Hàng “Trình độ học vấn” trải dài hai cột bằng cách sử dụng thuộc tính <colspan>.
  • “Bằng cấp cao nhất” và “Cấp năm” được định vị chính xác dưới tiêu đề “Trình độ học vấn” nên sẽ sử dụng cú pháp scope=”col”>Bằng cấp cao nhất. 

Ví dụ table HTML 3

Tiếp tục với ví dụ số 2, bạn có thể thêm chú thích cho bảng để người dùng hiểu được nội dung bảng muốn truyền tải bằng thẻ <caption>. Cùng với đó, tính trung bình của cột “Bằng cấp tiếng Anh” với thẻ <tfoot>. Cụ thể như sau: 

<table style="width:100%">

  <caption>
Trình độ học vấn của nhân sự công ty A
  </caption>

  <thead>

<tr>
   <th scope="col" rowspan="2">Tên</th>
   <th scope="col" rowspan="2">Tuổi</th>
   <th scope="col" colspan="2">Trình độ học vấn</th>
   <th scope="col" rowspan="2">Bằng cấp tiếng Anh</th>
</tr>

<tr>
   <th scope="col">Bằng cấp cao nhất</th>
   <th scope="col">Cấp năm</th>
</tr>

  </thead>

  <tbody>

<tr>
   <th scope="row">Nguyên</th>
   <td>32</td>
   <td>Đại học</td>
   <td>2014</td>
  <td>Không có</td>
</tr>

<tr>
   <th scope="row">Lý</th>
   <td>29</td>
   <td>Cao đẳng</td>
   <td>2017</td>
   <td>Không có</td>
</tr>

<tr>
   <th scope="row">Tiên</th>
   <td>28</td>
   <td>Đại học</td>
   <td>2018</td>
   <td>IELTS</td>
</tr>

  </tbody>

   <tfoot>
<tr>
   <th colspan= "4">Trung bình nhân sự có Bằng cấp tiếng Anh</th>
   <th>33.33%</th>
</tr>

  </tfoot>

</table>

table html - bảng html - itviec blog

Thêm chú thích bằng thẻ <caption> và trung bình nhân sự có bằng cấp tiếng Anh bằng thẻ <tfoot>

Cuối cùng, để định dạng kiểu chữ hay thêm màu nền các dòng tiêu đề thêm phần nổi bật thì bạn có thể sử dụng thêm phần tử background-color trong cặp thẻ <style></style>.

Cụ thể: 

table {

  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

table html - bảng html - itviec blog

Định dạng bảng trong HTML

Xem thêm: Nguồn tài liệu học lập trình Front-End đầy đủ

Khi nào cần sử dụng dữ liệu Table HTML?

Tùy theo tình huống và mục đích mà bạn sử dụng dữ liệu bảng HTML để phát triển dự án của mình. Một số trường hợp bạn cần sử dụng đến cấu trúc dữ liệu bảng như:

  • Khi bạn muốn so sánh điểm khác biệt giữa các số liệu. Ví dụ như điểm số của đội A và đội B hay sự khác biệt giữa vấn đề C và D. 
  • Cung cấp góc nhìn tổng quan về một dữ liệu số, chẳng hạn như bảng điểm tổng kết của học sinh. 
  • Tóm tắt, highlight một số dữ liệu quan trọng. Chẳng hạn bạn có một danh sách dài và nhiều thông tin thì bạn có thể sử dụng bảng biểu để thể hiện thông tin theo cách ngắn gọn, dễ hiểu nhất. 

Tổng kết table HTML

Table HTML là một cách tuyệt vời giúp bạn biểu diễn cấu trúc dữ liệu bảng trên website một cách rõ ràng và hiệu quả. Bên cạnh các phần tử và thuộc tính cơ bản thì bạn cũng có thể thiết kế một số kiểu dáng để bảng biểu thêm phần đẹp mắt và dễ nhìn với sự trợ giúp của CSS. Hiểu biết cơ bản về HTML sẽ là một lựa chọn an toàn đem đến cho bạn những cơ hội việc làm với mức lương hấp dẫn. Theo dõi ITviec để đón đọc thêm các tin tức mới nhất về lĩnh vực Công nghệ thông tin bạn nhé!

robby-2

Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.

Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!