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

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

              การจัดการเซลล์ในภาษา HTML ได้แก่ การกำหนความหนาของเส้นตารางและความห่างของช่องเซลล์ การกำหนดช่องว่างข้อมูลในเซลล์กับกรอบเซลล์ การผสานเซลล์ การกำหนดสีให้กับเซลล์

  

arrow2การจัดการเซลล์ในตารางภาษา HTML

              การจัดการเซลล์ในภาษา HTML ได้แก่ การกำหนความหนาของเส้นตารางและความห่างของช่องเซลล์ การกำหนดช่องว่างข้อมูลในเซลล์กับกรอบเซลล์ การผสานเซลล์ การกำหนดสีให้กับเซลล์

               การกำหนดความหนาของเส้นและความห่างของเซลล์

               การปรับความหนาของเส้นตารางและความห่างของช่องเซลล์นั้นเป็นการตกแต่งตารางอย่างหนึ่งทำให้ตารางการนำเสนอข้อมูลน่าสนใจ​​​เพื่อความสวยงามของตารางมากยิ่งขึ้นทั้งยังช่วยในเรื่องของการออกแบบหน้าเว็บเพจ  เช่น  การกำหนดให้ความห่างของช่องเซลล์  (cellspacing)  นั้นมีค่าเป็น  0  ตารางจะมีลักษณะชิดติดกันทำให้การจัดวางรูปภาพ  และข้อความมีความต่อเนื่องไม่ห่าง  หรือแยกออกจากกัน​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​นอกจากนี้ยังช่วยให้ข้อความ  และรูปภาพมีลักษณะคงที่ไม่เคลื่อนย้ายไปตามการปรับย่อขยายหน้าเว็บเพจ 

 

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

 <table border= “ค่าความหนา” cellspacing= “ค่าความห่าง”>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>

ตัวอย่าง

 <table border= “1” cellspacing= “5” >
<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>

      cellspacing

                การเว้นช่องว่างข้อมูลในเซลล์

                การเว้นช่องว่างระหว่างขอบช่องตารางและข้อมูลสามารถใช้ในการตกแต่งตารางได้อีกอย่างหนึ่งทำให้กรอบตารางกับข้อมูลมีความสวยงามมากยิ่งขึ้นทั้งยังช่วยในเรื่องของการออกแบบหน้าเว็บเพจ​​​​​​​​​​​​​​​​เช่น​​​​​​​​​​​​​​การกำหนดให้ช่องว่างระหว่างขอบเซลล์  (cellpadding)  นั้นมีค่าเป็น  ​​​​​​​​​​​0 ​​​​ ตารางจะมีลักษณะชิดติดกันทำให้การจัดวางรูปภาพและข้อความที่ถูกกำหนดด้วยตารางมีความต่อเนื่องไม่ห่างหรือแยกออกจากกันนอกจากนี้ยังช่วยให้ข้อความและรูปภาพมีลักษณะคงที่ไม่เคลื่อนย้ายไปตามการปรับย่อขยายหน้าเว็บเพจ

 

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

 <table border= “ค่าความหนา” cellpadding= “ค่าช่องว่าง”>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>

ตัวอย่าง

 <table border= “1” cellpadding= “10”>
<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>

      cellpading

               การผสานเซลล์                

               เป็นการรวมเซลล์สามารถทำได้ทั้งแนวนอน​​​​​​​  (row)  และแนวตั้ง  (column)  การรวมเซลล์สามารถกำหนดได้ตามจำนวนเซลล์ที่ต้องการซึ่งการผสานแถวนั้นใช้แอตทริบิวต์  rowspan  และการผสานสดมภ์ใช้แอตทริบิวต์  colspan

 

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

 <table border=ค่าความหนา>
<tr >
<th>สดมภ์ที่1</th><th>สดมภ์ที่2</th><th>สดมภ์ที่3</th>
</tr>
<tr>
<td>ข้อมูลที่1</td><td>ข้อมูลที่2</td><td>ข้อมูลที่3</td>
</tr>
<tr >
<td colspan= “จำนวนที่ต้องการผสาน” >ผสานสดมภ์1+2</td>
<td>ข้อมูลที่3</td></tr>
<tr>
<td rowspan=“จำนวนที่ต้องการผสาน” >ผสานแถว1+2</td>
<td>ข้อมูลที่2</td><td>ข้อมูลที่3</td></tr>
<tr>
<td>ข้อมูลที่2</td><td>ข้อมูลที่3</td></tr>
</table>

 ตัวอย่าง

 <table width= “800” border= “1” cellspacing= “0” cellpadding= “2”>
<caption align=top> ตารางสอน ชั้น ม.4/1 โรงเรียนหล่มเก่าพิทยาคม </caption>
<tr align= “center” bgcolor= “#00FF00”>
<td></td><td>1</td><td>2</td><td>3</td>
<td>4</td><td>5</td><td>6</td>
<td>7</td><td>8</td><td>9</td> </tr>
<tr align=“center”>
<td>จ</td><td>ว30242<br>ครูรำพรวน</td>
<td>I30202<br>ครูจันทรา</td><td>พ31102<br>
ครูเสกสันต์</td><td>อ30204ห้องEng</td>
<td rowspan= “5”>พัก</td><td colspan= “2”>ว30202<br>
ครูจรูญ</td><td colspan=“2”>ง31242<br>ห้องคอมฯ</td></tr>
<tr align= “center”>
<td>อ</td><td>สวดมนต์</td>
<td colspan=”2”>ว30222<br>ครูประยงค์</td>
<td>ส30241<br>ครูเสถียร</td>
<td>ง31102<br>ครูพันธ์โพยม</td>
<td>อ31102<br>ครูมณีรัตน์</td>
<td>จ330212<br>ครูมนตรี</td><td>เลิกเรียน</td></tr>
<tr align= “center”>
<td>พ</td><td colspan= “2”>ว30102<br>ครูรำพรวน</td>
<td>ส31102<br>ครูนิรันด์</td>
<td>ท31102<br>ครูอุ่นเรือน</td><td colspan=“2”>ค31102<br>
ครูเพ็ญประภา</td><td>Engเสริม</td><td>เลิกเรียน</td></tr>
<tr align= “center”>
<td>พฤ</td><td colspan= “2”>ค31202<br>ครูสงัด</td>
<td colspan=”2”>ว30242<br>ครูรำพรวน</td>
<td>ท31102<br>ครูอุ่นเรือน</td>
<td>I30202<br>ครูจันทรา</td>
<td>ว30202<br>ครูจรูญ</td><td>SSA</td></tr>
<tr align= “center”>
<td>ศ</td><td colspan= “2”>ค31202<br> ครูสงัด</td><td>อ30204</td>
<td>ส31102<br>ครูนิรันด์</td>
<td>ศ31102<br>ครูสุพจน์</td><td>อ31102<br> ครูมณีรัตน์</td><td>ว30222<br>ครูประยงค์</td>
<td>แนะแนว</td></tr>
</table>

      table col rowspan

                การกำหนดสีให้กับเซลล์

                การใส่สีให้กับเซลล์ช่วยในการตกแต่งตารางให้มีความสวยงามน่าสนใจมากยิ่งขึ้นและเป็นการเน้นความสำคัญของข้อมูลที่ได้นำเสนอในตารางกำหนดด้วยแอตทริบิวต์  bgcolor  อยู่ภายใต้แท็กต่าง  ๆ  คือ  <table>,  <th>,  <tr>,  <td> สามารถกำหนดสีได้  2  รูปแบบ  คือ  ค่าสี  RGB  หรือชื่อสีมาตรฐาน

 

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

 <table>
<tr bgcolor= “ค่าสี RGB/ชื่อสี” ><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>

 ตัวอย่าง

 <table width= “800” border= “1” cellspacing= “0” cellpadding= “2”>
<caption align=top>ตารางสอน ชั้น ม.4/1 โรงเรียนหล่มเก่าพิทยาคม</caption>
<tr align= “center” bgcolor= “#68ACE5”>
<td></td><td>1</td><td>2</td><td>3</td>
<td>4</td><td>5</td><td>6</td>
<td>7</td><td>8</td><td>9</td> </tr>
<tr align= “center”>
<td>จ</td><td>ว30242<br>ครูรำพรวน</td>
<td>I30202<br>ครูจันทรา</td><td>พ31102<br>
ครูเสกสันต์</td><td>อ30204ห้องEng</td>
<td rowspan= “5”>พัก</td>
<td colspan= “2” bgcolor= “#F594CC”>ว30202<br> ครูจรูญ</td><td colspan= “2” bgcolor= “#C2AFE6”>ง31242<br>ห้องคอมฯ</td></tr>
<tr align= “center”><td>อ</td><td>สวดมนต์</td>
<td colspan= “2” bgcolor= “#F594CC”>ว30222<br>ครูประยงค์</td>
<td>ส30241<br>ครูเสถียร</td><td>ง31102<br> ครูพันธ์โพยม</td><td>อ31102<br>ครูมณีรัตน์</td>
<td>จ330212<br>ครูมนตรี</td><td>เลิกเรียน</td></tr>
<tr align= “center”><td>พ</td><td colspan= “2” bgcolor= “#F594CC”>ว30102<br>ครูรำพรวน</td>
<td>ส31102<br>ครูนิรันด์</td><td>ท31102<br>
ครูอุ่นเรือน</td><td colspan= “2” bgcolor= “#C9E39C”>ค31102<br>ครูเพ็ญประภา</td>
<td>Engเสริม</td><td>เลิกเรียน</td></tr>
<tr align= “center”><td>พฤ</td><td colspan= “2” bgcolor= “#C9E39C”>ค31202<br>ครูสงัด</td>
<td colspan= “2” bgcolor= “#F594CC”>ว30242<br> ครูรำพรวน</td><td>ท31102<br>ครูอุ่นเรือน</td>
<td>I30202<br>ครูจันทรา</td><td>ว30202<br> ครูจรูญ</td><td>SSA</td></tr>
<tr align= “center”><td>ศ</td><td colspan= “2” bgcolor= “#C9E39C”>ค31202<br>ครูสงัด</td>
<td>อ30204</td><td>ส31102<br>ครูนิรันด์</td>
<td>ศ31102<br>ครูสุพจน์</td><td>อ31102<br>ครูมณีรัตน์</td>
<td>ว30222<br>ครูประยงค์</td><td>แนะแนว</td></tr>
</table>

      table bgcolor