Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Bảng HTML


Bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành các hàng và cột.


Thí dụ

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Xác định một bảng HTML

Một bảng trong HTML bao gồm các ô bảng bên trong các hàng và cột

Thí dụ

Một bảng HTML đơn giản:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Ô bảng

Mỗi ô trong bảng được xác định bởi một <td>và một </td>thẻ.

td là viết tắt của dữ liệu bảng.

Mọi thứ giữa <td></td>là nội dung của ô trong bảng.

Thí dụ

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Lưu ý: các phần tử dữ liệu bảng là vùng 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ử HTML; văn bản, hình ảnh, danh sách, các bảng khác, v.v.



Hàng bảng

Mỗi hàng trong bảng bắt đầu bằng một <tr>và kết thúc bằng một </tr>thẻ.

tr là viết tắt của hàng trong bảng.

Thí dụ

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Bạn có thể có bao nhiêu hàng tùy thích trong bảng, chỉ cần đảm bảo rằng số ô trong mỗi hàng là như nhau.

Lưu ý: Đôi khi một hàng có thể có ít hơn hoặc nhiều ô hơn một hàng khác. Bạn sẽ tìm hiểu về điều đó trong chương sau.


Tiêu đề bảng

Đôi khi bạn muốn các ô của mình là tiêu đề, trong những trường hợp đó, hãy sử dụng <th>thẻ thay vì <td>thẻ:

Thí dụ

Đặt hàng đầu tiên là tiêu đề bảng:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Theo mặc định, văn bản trong <th>các phần tử được in đậm và căn giữa, nhưng bạn có thể thay đổi điều đó bằng CSS.


Bài tập HTML

Kiểm tra bản thân với các bài tập

Bài tập:

Thêm một hàng trong bảng có hai tiêu đề bảng.

Hai tiêu đề bảng phải có giá trị "Tên" và "Tuổi".

<bàn>
  
    
    
  
  <tr>
    <td> Jill Smith </td>
    <td> 50 </td>
  </tr>
</table>


Thẻ bảng HTML

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .