ตาราง (Table) ใน HTML สามารถกำหนด ความกว้าง (width) และ ความสูง (height) ได้ ทั้งในระดับ ตารางทั้งหมด, แถว (row) หรือ คอลัมน์ (column) โดยใช้คำสั่ง style แล้วระบุค่าด้วย Property width หรือ height
HTML Table Width
การตั้งค่าความกว้างให้กับตาราง ให้ใส่ Attribute style ลงใน <table>
<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>
📝 Note
การระบุขนาดเป็นเปอร์เซนต์ (%) ความกว้างจะสัมพันธ์กับพื้นที่ที่ใช้งานอยู่ เช่นในตัวอย่างนี้ จะอ้างอิงจาก <body>
HTML Table Column Width
การตั้งค่าความกว้างของคอลัมน์
สามารถใส่โค้ด
style ลงใน <th> หรือ <td> เพื่อกำหนดความกว้างเฉพาะคอลัมน์ได้
<table style="width:100%">
<tr>
<th style="width:70%">ชื่อ</th>
<th>นามสกุล</th>
<th>อายุ</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
HTML Table Row Height
การตั้งค่าความสูงของแถว
สามารถตั้งค่าความสูงของแถวได้โดยเพิ่ม
style ใน <tr>
<table style="width:100%">
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อายุ</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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>