ปรับขนาดตาราง width&height

การปรับความกว้างและความสูงของตาราง (width,height)

        จากตัวอย่างที่ผ่านมา ความกว้างของตารางจะขึ้นอยู่กับข้อมูลแต่ละช่องภายในตารางถ้าข้อมูลมากตารางก็จะขยายขึ้น   ถ้าข้อมูลน้อยตารางก็จะหดลง อาจทำให้ตารางดูไม่สวยงาม เราสามารถกำหนดขนาดความกว้างของตารางได้เองดังนี้

    1.ปรับขนาดความกว้างของตาราง (width)

  

ตัวอย่างการใช้งาน

<body>

<table border="3" width="200">

<caption>  กำหนดความกว้างตาราง=200 พิกเซล  </caption>

     <tr>  <th> ข้อมูล1 </th>  <td> ข้อมูล2 </td> </tr>

   <tr>  <th> ข้อมูล2 </th>  <td> ข้อมูล3 </td> </tr>

</table>

<br>

<table border="3" width="60%">

<caption> กำหนดความกว้างตาราง=60% </caption>

   <tr>  <th> ข้อมูล1 </th>  <td> ข้อมูล2 </td> </tr>

   <tr>  <th> ข้อมูล2 </th>  <td> ข้อมูล3 </td> </tr>

</table>

</body>

 

ผลลัพธ์ที่ได้

 

    2.ปรับขนาดความสูงของตาราง (height)

        เราสามารถกำหนดขนาดความสูงของตารางได้เช่นเดียวกับการกำหนดขนาดความกว้าง ดังนี้

 

 

ตัวอย่างการใช้งาน

 

<body>

<table border="3" height="50">

<caption> กำหนดความสูงตาราง=50 พิกเซล </caption>

   <tr>  <th> ข้อมูล1 </th>  <td> ข้อมูล2 </td> </tr>

   <tr>  <th> ข้อมูล2 </th>  <td> ข้อมูล3 </td> </tr>

</table>

   <br>

<table border="3" height="30%">

<caption> กำหนดความสูงตาราง=30% </caption>

   <tr>  <th> ข้อมูล1 </th>  <td> ข้อมูล2 </td> </tr>

   <tr>  <th> ข้อมูล2 </th>  <td> ข้อมูล3 </td> </tr>

</table>

</body>

 

ผลลัพธ์ที่ได้

             การกำหนดความกว้างและความสูงตารางเป็นเปอร์เซ็น ขนาดของตารางจะ ย่อ ขยายตามขนาดของ Web browser     แต่ถ้าขนาดของข้อมูลมีมากกว่าค่าที่กำหนด ตารางจะขยายตามขนาดของข้อมูล โดยไม่สนใจค่าที่กำหนดไว้