ขนาดตาราง HTML
ตาราง HTML สามารถมีขนาดแตกต่างกันสำหรับแต่ละคอลัมน์ แถว หรือทั้งตาราง
ใช้styleแอตทริบิวต์ที่มี the
widthหรือheight
คุณสมบัติ เพื่อระบุขนาดของตาราง แถว หรือคอลัมน์
ความกว้างของตาราง HTML
ในการตั้งค่าความกว้างของตาราง ให้เพิ่มstyle
แอตทริบิวต์ให้กับ<table>องค์ประกอบ:
ตัวอย่าง
กำหนดความกว้างของตารางเป็น 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>
หมายเหตุ:การใช้เปอร์เซ็นต์เป็นหน่วยขนาดสำหรับความกว้างหมายความว่าองค์ประกอบนี้จะกว้างเพียงใดเมื่อเปรียบเทียบกับองค์ประกอบหลัก ซึ่งในกรณีนี้คือ<body>
องค์ประกอบ
ความกว้างคอลัมน์ตาราง HTML
ในการกำหนดขนาดของคอลัมน์เฉพาะ ให้เพิ่มstyle
แอตทริบิวต์ใน a <th>หรือ
<td>องค์ประกอบ:
ตัวอย่าง
กำหนดความกว้างของคอลัมน์แรกเป็น 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>
ความสูงของแถวตาราง HTML
ในการตั้งค่าความสูงของแถวเฉพาะ ให้เพิ่มstyle
แอตทริบิวต์ในองค์ประกอบแถวของตาราง:
ตัวอย่าง
ตั้งค่าความสูงของแถวที่สองเป็น 200 พิกเซล:
<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>