Tiêu đề và kích thước table html

27/09
Thạch
HTML
0
1326

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Kích thước bảng HTML

Bảng HTML có thể có các kích thước khác nhau cho từng cột, hàng hoặc toàn bộ bảng.

Sử dụng stylethuộc tính với thuộc tính widthhoặc height để chỉ định kích thước của bảng, hàng hoặc cột.

Chiều rộng bảng HTML

Để đặt chiều rộng của bảng, hãy thêm style thuộc tính vào <table>phần tử:

Thí dụ

Đặt chiều rộng của bảng thành 100%:

<table style="width:100%">
  <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>

Lưu ý: Sử dụng tỷ lệ phần trăm làm đơn vị kích thước cho chiều rộng có nghĩa là phần tử này sẽ rộng như thế nào so với phần tử mẹ của nó, trong trường hợp này là <body> phần tử.

Chiều rộng cột bảng HTML

Để đặt kích thước của một cột cụ thể, hãy thêm style thuộc tính trên một <th>hoặc <td>phần tử:

Thí dụ

Đặt chiều rộng của cột đầu tiên thành 70%:

<table style="width:100%">
  <tr>
    <th style="width:70%">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>

Chiều cao hàng trong bảng HTML

Để đặt chiều cao của một hàng cụ thể, hãy thêm style thuộc tính vào phần tử hàng trong bảng:

Thí dụ

Đặt chiều cao của hàng thứ hai thành 200 pixel:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <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 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.

	THỨ HAI	Ba	THỨ TƯ	Năm	Sáu
8h00
9:00
10h00
11:00
12:00

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:

Tên đầu tiên	Họ	Tuổi
Jill	Ung	50
Thạch	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		Tuổi
Jill	Ung	50
Thạch	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ả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 hai	$ 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>

Bài tiếp theo NEXT