Menu
GIỚI THIỆU
  • Mỗi table sẽ được chia ra gồm hai thành phần là cột với hàng, và được tạo thành bởi các thẻ table, tr, td, tbody, thead, tfoot. Table là một định dạng dùng để hiển thị dữ liệu ở dạng danh sách.

Bài 05: Định dạng Table với các thẻ trong HTML

Table là một định dạng dùng để hiển thị dữ liệu ở dạng danh sách. Mỗi table sẽ được chia ra gồm hai thành phần là cột với hàng, và được tạo thành bởi các thẻ table, tr, td, tbody, thead, tfoot.

Định nghĩa một bảng HTML

Một bảng HTML được định nghĩa với thẻ <table> .

Mỗi hàng của bảng được định nghĩa bằng thẻ <tr> . Tiêu đề bảng được định nghĩa bằng thẻ <th> . Theo mặc định, các tiêu đề bảng được in đậm và căn giữa. Một bảng dữ liệu / ô được định nghĩa bằng thẻ <td> .

1. Định dạng HTML table

<table style="width:100%">
  <tr>
    <th>Hàng 1 tiêu đề cột 1</th>
    <th>Hàng 2 tiêu đề cột 2</th> 
    <th>Hàng 3 tiêu đề cột 3</th>
  </tr>
  <tr>
    <td>Hàng 2 cột 1</td>
    <td>Hàng 2 cột 2</td> 
    <td>Hàng 2 cột 3</td>
  </tr>
  <tr>
    <td>Hàng 3 cột 1</td>
    <td>Hàng 3 cột 2</td> 
    <td>Hàng 3 cột 3</td>
  </tr>
</table>

Trong đó:

  • Tag <table> được dùng để tạo một bảng HTML.
  • Một tag <table> đơn giản có chứa một hoặc nhiều <tr>, <th> và <td>
  • <tr> xác định hàng của table.
  • <th> xác định phần tử tiêu đề của table
  • <td> xác định phần tử nội dung của table

Một table phức tạp có thể bao gồm nhiều thành phần khác, gồm: <caption>, <col>, <colgroup>, <thead>, <tfoot> và <tbody>.

  • Nếu muốn thêm một cột thì chỉ việc bổ sung một td 
  • Nếu muốn thêm một hàng thì chỉ việc bổ sung một tr

2. Tóm lược các thẻ định dạng table

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

Lưu ý: Nếu bảng đã thu gọn đường viền, khoảng cách biên giới sẽ không có hiệu lực.

3. Nhóm thẻ khác

Ở bài tìm hiểu HTML là gì mình có giới thiệu sơ qua về bổ cục của website gồm có các thành phần như header, content, footer, thead, tbody thì trong table cũng tương tự, người ta sẽ chia ra làm ba thành phần chính đó là header, bodyfooter tương ứng với nhóm thẻ thead, tbodytfoot. Bài Tạo links bằng thẻ a trong HTML chúng ta sẽ học vào bài viết tới.

Chúc bạn thành công!

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 05: Định dạng Table với các thẻ trong HTML

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha