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.

branding
branding
February 06, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Những điều cần biết về thẻ em trong HTML

Những điều cần biết về thẻ em trong HTML

Nếu là một người thường xuyên soạn thảo văn bản cho website, chắc chắn bạn đã quen thuộc với thẻ em trong HTML. Tuy nhiên, liệu bạn đã hiểu rõ về loại thẻ định dạng này, cũng như cách sử dụng chính xác? Hãy cùng giải đáp những thắc mắc trên qua bài viết dưới […]
Tìm hiểu về thẻ strong trong HTML

Tìm hiểu về thẻ strong trong HTML

Thẻ strong trong HTML là một trong những thẻ định dạng cần có khi soạn thảo nội dung cho website. Các thẻ định dạng được tạo ra nhằm tận dụng hiệu quả các công cụ định dạng văn bản được cung cấp. Vậy thẻ strong là gì và có vai trò như thế nào? Mục […]
Thẻ code trong HTML và lí do sử dụng thẻ code?

Thẻ code trong HTML và lí do sử dụng thẻ code?

Thẻ code trong HTML là thẻ được gắn vào một đoạn code, giúp trình duyệt web đọc hiểu được đoạn dữ liệu đó một cách chính xác nhất. Cùng tìm hiểu định nghĩa cụ thể cũng như công dụng của thẻ <code> trong bài viết sau đây. Mục lục1. Thẻ code trong HTML là gì?2. […]
Thẻ th trong HTML và 8 thuộc tính cơ bản

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. Mục lục1. Thẻ th trong HTML […]
Thẻ p trong HTML. Các cách kết hợp với thẻ p

Thẻ p trong HTML. Các cách kết hợp với thẻ p

Chữ cái “p” trong thẻ <p> là viết tắt của paragraphs – đoạn văn. Thẻ p trong HTML giúp trình duyệt nhận dạng được đoạn văn bản trong HTML. Bài viết dưới đây sẽ giúp bạn phân biệt được các thẻ được dùng và không được dùng với thẻ <p> khi code HTML.  Mục lục1. […]
Div là gì? Cách dùng thẻ div trong HTML từ A đến Z

Div là gì? Cách dùng thẻ div trong HTML từ A đến Z

Mỗi thẻ (hay mỗi phần tử) trong HTML đều có chức năng và nhiệm vụ riêng. Trong đó, thẻ div là thẻ được sử dụng khá nhiều. Vậy cụ thể thẻ div là gì và nó có nhiệm vụ thế nào trong HTML? Mục lục1. Định nghĩa thẻ div là gì? 2. Tác dụng của thẻ […]