ปรับระยะห่างช่องเซลล์ cellspacing&cellpadding

ปรับความหนาเส้นตารางและความห่างระหว่างช่องเซลล์ (Border,cellspacing)

     1.การปรับความหนาของเส้นตาราง

              เราสามารถปรับขนาดของเส้นตารางและกำหนดระยะห่างระหว่างช่องเซลล์แต่ละเซลล์ได้ดังนี้

  

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

<body>

   <table border="3" cellspacing="0">

<caption>กำหนด cellspacing=0 </caption>

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

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

   </table>


   <table border="3" cellspacing="5">

<caption> กำหนด cellspacing=5 </caption>

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

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

   </table>


   <table border="3" cellspacing="20">

<caption> กำหนด cellspacing=20 </caption>

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

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

   </table>

</body>

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

        จะเห็นว่ายิ่งค่าของ cellspacing มากขึ้น ความห่างระหว่างช่องเซลล์ก็มีเพิ่มมากขึ้น

    2. การเว้นระยะข้อมูลในเซลล์กับขอบเซลล์ (cellpadding)

          เราสามารถปรับระยะความห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์เพื่อความสวยงาม ได้ดังนี้

 

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

<body>

<table border="3" cellpadding="0">

<caption> กำหนด cellpadding=0 </caption>

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

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

</table>


 <table border="3" cellpadding="5">

<caption> กำหนด cellpadding=5 </caption>

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

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

</table>


 <table border="3" cellpadding="20">

<caption> กำหนด cellpadding=20 </caption>

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

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

</table>

</body>

 

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

        จะเห็นว่ายิ่งค่าของ cellpadding มากขึ้น ความห่างระหว่างข้อมูลกับขอบเซลล์ก็เพิ่มมากขึ้น