HTML กําหนดขนาดตารางด้วย CSS

บทความนี้สอนวิธีกำหนดขนาดของตาราง HTML ที่สร้างด้วยแท็ก table โดยใช้คำสั่ง width ของ CSS ผ่านวิธีการเขียน 2 แบบคือ กำหนดขนาดกว้างผ่าน attribute style และกำหนดความกว้างด้วย CSS และเรียกใช้ในแท็ก HTML โดยทั้ง 2 วิธีสามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML กําหนดขนาดตารางด้วย attrubute style

<table border="1" style="width:100%">
	...
</table>

จากตัวอย่างใช้คำสั่ง width:100% คือกำหนดความกว้างของตารางเท่ากับ 100% (เต็มพื้นที่การแสดงผล) โดยเขียนไว้ภายใน attrubte style และกำหนดทั้งหมดไว้ภายในแท็ก table ของ HTML

ตัวอย่าง HTML กําหนดขนาดตารางด้วย CSS และเรียกใช้ใน HTML

<style>
    .my_table {
        width: 100%;
    }
</style>

<table border="1" class="my_table">
	...
</table>

จากตัวอย่างสร้าง CSS และสร้าง class ชื่อ my_table กำหนด width: 100% จากนั้นนำ class มาใช้กับตารางที่ต้องการผ่าน attribute class ภายในแท็ก table ของ HTML วิธีนี้ต่างจากวิธีแรกคือ เราสามารถนำ class ใน CSS ไปใช้งานกับทุกตารางได้ทั้งหมดในเว็บไซต์ โดยไม่ต้องเขียนใหม่ และในอนาคตหากต้องการแก้ไขความกว้างของตารางก็สามารถแก้ไขได้ที่ CSS ซึ่งจะมีผลกับทุกตารางที่เรียกใข้ CSS ดังกล่าว

สรุป บทความนี้ได้เรียนรู้วิธีการกำหนดความกว้างให้กับตาราง HTML ด้วยการเขียนคำสั่ง width ลงใน attrubute style และการสร้าง class ใน CSS และเรียกใช้งานในแท็ก table ที่ต้องการ ผ่าน attrubte class ซึ่งทั้ง 2 วิธี มีขั้นตอนที่แตกต่างกัน แต่ได้ผลลัพธ์ที่เหมือนกัน ขึ้นอยู่กับความสะดวกในการเขียนเว็บไซต์