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 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 bao nhiêu 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 vào 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>