Thẻ th trong HTML và 8 thuộc tính cơ bản

Thẻ th trong HTML là một trong những thẻ được sử dụng nhiều nhất khi lập trình web. Vậy cụ thể thẻ <th> được dùng để làm gì và những thuộc tính trong thẻ <th> có tác dụng gì? Mời các bạn cùng theo dõi bài viết dưới đây.

thẻ th trong html dùng để viết nội dung bảng
Nguồn: sickchirpse

1. Thẻ th trong HTML được dùng để làm gì?

Thẻ th trong HTML là 1 trong 4 thẻ được sử dụng để viết nội dung của bảng trên các trang web. Nhiệm vụ của mỗi thẻ như sau:

  • Thẻ table xác định phần tử là một cái bảng (gồm có các hàng và các ô). Cùng với thẻ div thì thẻ table thường được sử dụng để bố cục trang web.
  • Thẻ th trong HTML xác định phần tử là một ô tiêu đề trong một hàng.
  • Thẻ tr xác định phần tử là một hàng trong bảng.
  • Thẻ td xác định phần tử là một ô trong bảng.
thẻ th trong html dùng để viết nội dung tiêu đề ô trong bảng
the-th-trong-html-002

Ví dụ cách sử dụng thẻ th trong HTML để lập một bảng data như sau:

<table style=”width:100%”>

 <tr>

  <th>STT</th>

  <th>Tên</th>

  <th>Mã đơn hàng</th>

 </tr>

 <tr>

  <td>001</td>

  <td>Minh</td>

  <td>122</td>

 </tr>

 <tr>

  <td>002</td>

  <td>Phương</td>

  <td>233</td>

 </tr>

</table> 

Ta sẽ được một bảng như dưới đây

STTTênMã đơn hàng
001Minh122
002Phương233

2. Thẻ th trong HTML có các thuộc tính thường dùng nào

Thẻ <th> có 8 thuộc tính thường hay được sử dụng nhất bao gồm:

2.1. Thuộc tính align 

Đây là thuộc tính dùng để căn lề nội dung của ô trong bảng theo chiều ngang. Thuộc tính align trong thẻ <th> gồm có 4 giá trị cơ bản bao gồm: left, right, center và justify (lần lượt là căn lề trái, căn lề phải, căn lề giữa và căn đều hai bên lề). Tương tự với thuộc tính align trong thẻ <th> thì ta có thể sử dụng text-align trong CSS.

2.2. Thuộc tính valign

Đây là thuộc tính giúp căn lề nội dung của ô trong bảng theo chiều dọc. Thuộc tính này gồm 3 giá trị cơ bản là top, bottom và middle (lần lượt là căn trên, căn dưới và căn đều chính giữa). Tương tự với thuộc tính valign, trong CSS ta có thể dùng thuộc tính vertical – align. 

2.3. Thuộc tính colspan

Thuộc tính này xác định số lượng ô mà người dùng muốn gộp chung lại với nhau theo chiều ngang.

thẻ th trong html có 8 thuộc tính cơ bản
Nguồn: sickchirpse

2.4. Thuộc tính rowspan 

Xác định số lượng ô muốn gộp chung theo chiều dọc. 

2.5. Thuộc tính width 

Xác định chiều rộng của ô. Chú ý khi sử dụng thuộc tính này cần chọn đúng loại đơn vị đo. Có thể chọn px (pixel) hoặc tính theo % chiều rộng của phần tử cha của phần tử đang xác định thuộc tính. 

2.6. Thuộc tính height

Xác định chiều cao của ô. 

2.7. Thuộc tính bgcolor

Xác định màu nền (background color) của ô. 

2.8. Thuộc tính nowrap

Xác định việc nội dung trong ô được hiển thị trên một dòng

Để xây dựng dữ liệu dạng bảng trong website, thẻ <th> là một thẻ không thể thiếu. Để sử dụng thẻ th trong HTML, bạn cần chú ý xác định đúng ô tiêu đề và các hàng trong bảng để viết câu lệnh cho chính xác. Tìm đọc các bài viết khác trên blog Got It Vietnam để tìm hiểu các kiến thức hữu ích liên quan.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

https://d1iv5z3ivlqga1.cloudfront.net/wp-content/uploads/2021/04/29235048/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 06, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Những code HTML cơ bản nhất

Những code HTML cơ bản nhất

Loại code HTML cơ bản dễ học nhất hiện nay là gì? Những người lập trình viên mới vào nghề thường khá lúng túng không biết nên bắt đầu học từ đâu và học gì dễ hiểu dễ thực hành nhất. Bài viết này sẽ chia sẻ đến bạn những thẻ HTML đơn giản và […]
Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Cấu trúc HTML mạch lạc, khoa học giúp cho website hoạt động ổn định. Hiện nay, mỗi website đều được xây dựng với những cấu trúc khác nhau. Vậy khi phát triển website, lập trình viên nên xây dựng cấu trúc ngôn ngữ web HTML như thế nào? Got It sẽ chia sẻ những thông […]
Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Những thông tin giới thiệu về HTML sẽ giúp những người mới học lập trình trau dồi kiến thức cơ bản. Hiện nay có rất nhiều loại ngôn ngữ web mới với những ưu điểm nổi bật, nhưng HTML vẫn là loại ngôn ngữ được nhiều lập trình viên ưu tiên sử dụng. Cùng tìm […]
Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]
Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]
Hướng dẫn cách chèn thẻ video trong HTML

Hướng dẫn cách chèn thẻ video trong HTML

Thẻ video trong HTML là câu lệnh được sử dụng để chèn “trình xem phim” cho một website nào đó. Dòng lệnh này không quá khó để thực hiện. Tuy nhiên, chúng vẫn cần độ chính xác cao nhằm tối ưu hóa website của bạn một cách tốt nhất. Cách chèn thẻ video trong HTML […]