การกำหนดความขนาดของตารางและสดมภ์ในภาษา HTML ได้แก่ การกำหนดความกว้างและความสูงของตาราง การกำหนดความกว้างของสดมภ์ทั้งหมดในตาราง
การกำหนดขนาดของตารางในภาษา HTML
การกำหนดความกว้างของตารางเป็นคำสั่งย่อยภายในการกำหนดคุณลักษณะของตารางใช้แอตทริบิวต์ widht และการกำหนดคุณลักษณะความสูง ให้กับตารางใชแอตทริบิวต์ height โดยสามารถกำหนดค่าความกว้างและความสูงเป็นเปอร์เซ็นต์ของความกว้างบราวเซอร์หรือพิกเซล
รูปแบบการใช้งาน
<table width= “ค่าความกว้าง” height= “ค่าความสูง”>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>
ตัวอย่าง
<table border= “1” width= “50%” height= “50%”>
<caption align= “top”>ตารางเวรประจำวัน</caption>
<tr><th>จันทร์</th><td>ฉัตรชัย</td><td>ขนิษฐา</td>
<td>เพ็ญศิริ</td></tr><tr><th>อังคาร</th>
<td>ภานุพงษ์</td><td>จิราพร</td>
<td>ธนัณชญา</td></tr><tr><th>พุธ</th>
<td>จิตรภานุ</td><td>ปรีดาภรณ์</td>
<td>ฐาปนี</td></tr>
<tr><th>พฤหัสฯ</th><td>กษิดิศ</td><td>พัณณิตา</td>
<td>จารุพร</td></tr>
<tr><th>ศุกร์</th><td>ศุภวิชญ์</td>
<td>วรโชติ</td><td>ปรางค์ทอง</td></tr>
</table><br>
<table border=1 width= “300” height= “200”>
<caption align= “top”>ตารางเวรประจำวัน</caption>
<tr><th>จันทร์</th><td>ฉัตรชัย</td><td>ขนิษฐา</td>
<td>เพ็ญศิริ</td></tr>
<tr><th>อังคาร</th><td>ภานุพงษ์</td><td>จิราพร</td>
<td>ธนัณชญา</td></tr>
<tr><th>พุธ</th><td>จิตรภานุ</td><td>ปรีดาภรณ์</td>
<td>ฐาปนี</td></tr>
<tr><th>พฤหัสฯ</th><td>กษิดิศ</td><td>พัณณิตา</td>
<td>จารุพร</td></tr>
<tr><th>ศุกร์</th><td>ศุภวิชญ์</td><td>วรโชติ</td>
<td>ปรางค์ทอง</td></tr>
</table>
การกำหนดความกว้างของสดมภ์ในภาษา HTML
การกำหนดความกว้างของสดมภ์ทั้งหมดในตารางใช้แท็ก <colgroup> มาจากคำว่า "Table Column Group" เป็นแท็กคู่ประกอบไปด้วยแท็กเปิด (open tag) และแท็กปิด (close tag) ประกอบด้วยแอตทริบิวต์ span กำหนดจำนวนสดมภ์ที่ต้องการกำหนดความกว้าง width มีหน่วยเป็นเปอร์เซ็นต์และพิกเซล
รูปแบบการใช้งาน
<table>
<colgroup span= “จำนวนสดมภ์” width= “ความกว้างของสดมภ์”></colgroup>
<tr><th>สดมภ์ที่1</th><th>สดมภ์ที่2</th>
<th>สดมภ์ที่3</th></tr>
<tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
<td>ข้อมูลที่3</td></tr>
<tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
<td>ข้อมูลที่3</td></tr>
</table>
ตัวอย่าง
<table border= “1” >
<colgroup span= “2” width= “200”></colgroup>
<tr><th>สดมภ์ที่1</th><th>สดมภ์ที่2</th>
<th>สดมภ์ที่3</th></tr>
<tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
<td>ข้อมูลที่3</td></tr>
<tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
<td>ข้อมูลที่3</td></tr>
</table>