วิธีกําหนดขนาดคอลัมน์ตาราง HTML ด้วย CSS
บทความนี้สอนวิธีกำหนดขนาดคอลัมน์ของตาราง HTML ด้วย CSS ประกอบด้วยความกว้าง (width) และความสูง (height) โดยสอนทั้งหมด 2 วิธี คือ คำสั่ง CSS ใน attribute style และการเขียน CSS และเรียกใช้ภายใน HTML ซึ่งทั้ง 2 วิธีจะมีรูปแบบการเขียน และนำไปใช้งานที่แตกต่างกัน แต่ได้ผลลัพธ์ที่เหมือนกันคือ ทำให้เราสามารถกำหนดความกว้าง และความสูงของคอลัมน์ตารางได้ตามที่ต้องการ มีรายละเอียดดังนี้
ตัวอย่าง กําหนดขนาดคอลัมน์ HTML ผ่าน attrubte style
1. ใช้คำสั่ง width กำหนดความกว้างแบบเจาะจง มีหน่วยเป็น px (pixel)
<table border="1">
<tr>
<td style="width:50px">ID</td>
<td style="width:200px">Name</td>
<td style="width:50px">Edit</td>
<td style="width:50px">Delete</td>
</tr>
...
</table>จากตัวอย่างนี้กำหนดความกว้างของคอลัมน์ ID, Edit และ Delete เท่ากับ 50px และกำหนดความกว้างของคอลัมน์ Name เท่ากับ 200px ผ่าน attribute style
2. เพิ่มคำสั่ง height กำหนดความสูงแบบเจาะจง มีหน่วยเป็น px (pixel)
...
<td style="width: 50px;height:50px">ID</td>
...จากตัวอย่างเพิ่มคำสั่ง height เพื่อกำหนดความสูงให้กับคอลัมน์เท่ากับ 50px โดยจะใช้สัญลักษณ์ ; เป็นตัวคั่นแต่ละคำสั่ง
3. กรณีไม่ต้องการกำหนดความกว้าง และความสูงแบบเจาะจง (px) ให้ใช้ % แทน โดยมองพิ้นที่การแสดงผลเป็น 100% และกำหนดแต่ละคอลัมน์ตามที่ต้องการ
...
<td style="width: 10%;height:5%">ID</td>
...จากตัวอย่างกำหนดความกว้างเท่ากับ 10% ของพื้นที่การแสดงผล จึงทำให้คอลัมน์ดังกล่าวจะหยืดหยุ่นตามความกว้างของพื้นที่การแสดงผล
ตัวอย่าง กําหนดขนาดคอลัมน์ HTML ผ่านการเขียน CSS แยก และเรียกใช้งาน
<style>
.col_50 {
width: 50px;
height: 50px;
}
.col_200 {
width: 200px;
}
</style><table border="1">
<tr>
<td class="col_50">ID</td>
<td class="col_200">Name</td>
<td class="col_50">Edit</td>
<td class="col_50">Delete</td>
</tr>
...
</table>จากตัวอย่างสร้าง CSS กำหนด class 2 อันคือ .col_50 และ .col_200 มีรายละเอียดดังนี้
1. col_50 คือ ชื่อ class ประกอบด้วยคำสั่ง width เท่ากับ 50px และ height เท่ากับ 50px
2. col_200 คือ ชื่อ class ประกอบด้วยคำสั่ง width เท่ากับ 200px
3. เวลานำไปใช้งานเนื่องจากทั้ง 2 style ใน CSS เป็น class เวลาเรียกใช้จึงต้องกำหนดไว้ใน attrute class ใน HTML เช่น class="col_50" หรือ class="col_200"
4. สามารถเปลี่ยน px เป็น % ได้
5. วิธีนี้จะรองรับการ reuse code หรือการนำคำสั่งกลับมาใช้งานใหม่ ทำให้เราไม่ต้องเขียน style ทุกครั้งที่ต้องการใช้งาน และสามารถแก้ไขจากทีเดียว โดยทุกๆ คอลัมน์ ที่ใช้งาน class ดังกล่าวจะได้รับการเปลี่ยนแปลงทั้งหมด
