วิธีกําหนดขนาดคอลัมน์ตาราง 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 ดังกล่าวจะได้รับการเปลี่ยนแปลงทั้งหมด

 

สรุป บทความนี้สอนการกำหนดความกว้าง และความสูงของคอลัมน์ตาราง HTML ด้วยหน่วยเจาะจงคือ px และหยืดหยุ่นคือ % ด้วย 2 วิธีคือเขียน CSS ลงใน attribute style ของ HTML และเขียน CSS แยกออกมา และเรียกใช้ผ่าน attribute class