หน่วยที่ 4 การสร้างตารางด้วยภาษา HTML : การกำหนดขนาดของตารางและสดมภ์ในภาษา HTML

หมวด: การประยุกต์ใช้ตารางภาษา HTML

ให้เรตสมาชิก: 0 / 5

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

              การกำหนดความขนาดของตารางและสดมภ์ในภาษา HTML ได้แก่ การกำหนดความกว้างและความสูงของตาราง การกำหนดความกว้างของสดมภ์ทั้งหมดในตาราง

arrow2 การกำหนดขนาดของตารางในภาษา HTML

              การกำหนดความกว้างของตารางเป็นคำสั่งย่อยภายในการกำหนดคุณลักษณะของตารางใช้แอตทริบิวต์  widht  และการกำหนดคุณลักษณะความสูง  ให้กับตารางใชแอตทริบิวต์  height  โดยสามารถกำหนดค่าความกว้าง​​​​​​​​และความสูงเป็นเปอร์เซ็นต์ของความกว้างบราวเซอร์หรือพิกเซล 

 

รูปแบบการใช้งาน

 <table width= “ค่าความกว้าง” height= “ค่าความสูง”>
 <tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
 <tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
 </table>

 ตัวอย่าง

 <table border= “1” width= “50%” height= “50%”>
 <caption align= “top”>ตารางเวรประจำวัน</caption>
 <tr><th>จันทร์</th><td>ฉัตรชัย</td><td>ขนิษฐา</td>
 <td>เพ็ญศิริ</td></tr><tr><th>อังคาร</th>
 <td>ภานุพงษ์</td><td>จิราพร</td>
 <td>ธนัณชญา</td></tr><tr><th>พุธ</th>
 <td>จิตรภานุ</td><td>ปรีดาภรณ์</td>
 <td>ฐาปนี</td></tr>
 <tr><th>พฤหัสฯ</th><td>กษิดิศ</td><td>พัณณิตา</td>
 <td>จารุพร</td></tr>
 <tr><th>ศุกร์</th><td>ศุภวิชญ์</td>
 <td>วรโชติ</td><td>ปรางค์ทอง</td></tr>
 </table><br>

 <table border=1 width= “300” height= “200”>
 <caption align= “top”>ตารางเวรประจำวัน</caption>
 <tr><th>จันทร์</th><td>ฉัตรชัย</td><td>ขนิษฐา</td>
 <td>เพ็ญศิริ</td></tr>
 <tr><th>อังคาร</th><td>ภานุพงษ์</td><td>จิราพร</td>
 <td>ธนัณชญา</td></tr>
 <tr><th>พุธ</th><td>จิตรภานุ</td><td>ปรีดาภรณ์</td>
 <td>ฐาปนี</td></tr>
 <tr><th>พฤหัสฯ</th><td>กษิดิศ</td><td>พัณณิตา</td>
 <td>จารุพร</td></tr>
 <tr><th>ศุกร์</th><td>ศุภวิชญ์</td><td>วรโชติ</td>
 <td>ปรางค์ทอง</td></tr>
 </table>

      table wh

 

arrow2 การกำหนดความกว้างของสดมภ์ในภาษา HTML

              การกำหนดความกว้างของสดมภ์ทั้งหมดในตารางใช้แท็ก​​​​​​​​​​​  <colgroup>  มาจากคำว่า  "Table Column Group"  เป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)  ประกอบด้วยแอตทริบิวต์  span  กำหนดจำนวนสดมภ์ที่ต้องการกำหนดความกว้าง  width  มีหน่วยเป็นเปอร์เซ็นต์และพิกเซล

 

รูปแบบการใช้งาน

 <table>
 <colgroup span= “จำนวนสดมภ์” width= “ความกว้างของสดมภ์”></colgroup>
 <tr><th>สดมภ์ที่1</th><th>สดมภ์ที่2</th>
 <th>สดมภ์ที่3</th></tr>
 <tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
 <td>ข้อมูลที่3</td></tr>
 <tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
 <td>ข้อมูลที่3</td></tr>
 </table>

 ตัวอย่าง

 <table border= “1” >
 <colgroup span= “2” width= “200”></colgroup>
 <tr><th>สดมภ์ที่1</th><th>สดมภ์ที่2</th>
 <th>สดมภ์ที่3</th></tr>
 <tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
 <td>ข้อมูลที่3</td></tr>
 <tr><td>ข้อมูลที่1</td><td>ข้อมูลที่2</td>
 <td>ข้อมูลที่3</td></tr>
 </table>

      table colgroup