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

Tiêu đề bảng HTML


Bảng HTML có thể có tiêu đề cho mỗi cột hoặc hàng hoặc cho nhiều cột / hàng.


EMIL TOBIAS LINUS
     
     
     
     
     
8h00    
9:00    
10h00    
11:00    
12h00    
13:00    
THỨ HAI TUE THỨ TƯ THU FRI
8h00          
9:00          
10h00          
11:00          
12h00          
THÁNG 12
     
     
     
     
     

Tiêu đề bảng HTML

Tiêu đề bảng được định nghĩa bằng thcác phần tử, mỗi thphần tử đại diện cho một ô trong bảng.

Thí dụ

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Tiêu đề bảng dọc

Để sử dụng cột đầu tiên làm tiêu đề bảng, hãy xác định ô đầu tiên trong mỗi hàng dưới dạng thphần tử:

Thí dụ

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>


Căn chỉnh tiêu đề bảng

Theo mặc định, tiêu đề bảng được in đậm và căn giữa:

Họ Họ Già đi
Jill thợ rèn 50
đêm Jackson 94

Để căn trái các tiêu đề bảng, hãy sử dụng thuộc tính CSS text-align:

Thí dụ

th {
  text-align: left;
}

Tiêu đề cho nhiều cột

Bạn có thể có một tiêu đề kéo dài trên hai hoặc nhiều cột.

Tên Già đi
Jill thợ rèn 50
đêm Jackson 94

Để thực hiện việc này, hãy sử dụng colspanthuộc tính trên <th>phần tử:

Thí dụ

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Bạn sẽ tìm hiểu thêm về colspan và rowspan trong chương Bảng colspan & rowspan .


Bảng chú thích

Bạn có thể thêm chú thích đóng vai trò như một tiêu đề cho toàn bộ bảng.

Tiết kiệm hàng tháng
Tháng Tiết kiệm
Tháng một $ 100
tháng 2 $ 50

Để thêm chú thích vào bảng, hãy sử dụng <caption>thẻ:

Thí dụ

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Lưu ý: Thẻ <caption>phải được chèn ngay sau <table>thẻ.


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 chú thích bảng có nội dung "Tên".

<bàn>
  
  <tr>
    <th> Tên </th>
    <th> Họ </th>
    <th> Điểm </th>
  </tr>
  <tr>
    <td> Jill </td>
    <td> Smith </ td>
    <td> 50 </td>
  </tr>
</table>