Kích thước bảng HTML
Các bảng HTML có thể 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 thuộc tính style
với thuộc tính width
hoặ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 độ rộng của bảng, hãy thêm thuộc tính style
vào phần tử <table>
:
Ví 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>
Hãy tự mình thử » 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 đến mức nào so với phần tử gốc của nó, trong trường hợp này là phần tử <body>
.
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 thuộc tính style
trên phần tử <th>
hoặc <td>
:
Ví 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>
Hãy tự mình thử » Chiều cao hàng của bảng HTML
Để đặt chiều cao của một hàng cụ thể, hãy thêm thuộc tính style
trên thành phần hàng của bảng:
Ví 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>
Hãy tự mình thử »