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

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

              กำหนดรูปแบบตารางและการกำหนดตำแหน่งข้อมูลในตารางภาษา HTML ได้แก่ การกำหนดสีให้กับกรอบตาราง การกำหนดลักษณะของเส้นตาราง การกำหนดตำแหน่งข้อมูลในตาราง

arrow2 การกำหนดสีกรอบตารางในภาษา HTML

              การกำหนดสีให้กับกรอบตารางเป็นการเพิ่มความเด่นให้กับตารางมากยิ่งขึ้นใช้แอตทริบิวต์  bordercolor  ซึ่งแอตทริบิวต์กำหนดระหว่างแท็ก  <table> 

 

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

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

 ตัวอย่าง

 <table bordercolor= “#FF0000” width= “800” 
border= “8” 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 bordercolor

arrow2 การกำหนดลักษณะของเส้นตารางในภาษา HTML

               สามารถกำหนดรูปแบบเส้นของตารางเพื่อความสวยงาม  และการนำเสนอข้อมูลที่ใช้ลักษณะของเส้นตารางในการเน้นหรือแสดงข้อมูลต่าง  ๆ  เช่น  ตารางแสดงรายรับรายจ่ายที่ต้องใช้ลักษณะเส้นคู่ในการขีดเส้นใต้จำนวนเงินสุทธิ  เป็นต้น  สามารถกำหนดโดยใช้แอตทริบิวต์  frame  และ  rules  กำหนดระหว่างแท็ก  <table>

arrow3การกำหนดคุณลักษณะของ  frame  ประกอบไปด้วย arrow3

คุณลักษณะ ความหมาย

above

แสดงเฉพาะเส้นด้านบนของช่องเซลล์

below แสดงเฉพาะเส้นด้านล่างของช่องเซลล์
border

แสดงเส้นทุกด้าน

box แสดงเส้นทุกด้าน 
hsides แสดงเส้นแนวนอนทุกเส้น
lhs แสดงเฉพาะเส้นด้านซ้ายของช่องเซลล์
rhs แสดงเฉพาะเส้นด้านขวาของช่องเซลล์
void ไม่แสดงเส้นกรอบ
vsides แสดงเส้นแนวตั้งทุกเส้น


arrow3การกำหนดคุณลักษณะของ  rules  ประกอบไปด้วย arrow3

คุณลักษณะ ความหมาย

all

แสดงเส้นแบ่งช่องเชลล์ทุกเส้น
cols

แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวสดมภ์ (แนวตั้ง)

groups แสดงเฉพาะเส้นแบ่งกลุ่่มเซลล์ที่เกิดจากแท็ก
thead, tbody, tfoot หรือ colgroup
none  ไม่แสดงเส้นแบ่งช่องเซลล์
rows แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวแถว (แนวนอน)


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

 <table frame= “ลักษณะเส้นตาราง” rules= “ลักษณะของการเปิด-ปิดเส้นตาราง”>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>

ตัวอย่าง

 <table border= “1” frame= “hsides” rules= “cols”>
<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 frame rules

 

 arrow2การกำหนดตำแหน่งข้อมูลในตารางภาษา HTML

                 การจัดตำแหน่งข้อมูลในตารางเป็นการกำหนดให้ข้อมูลที่เป็นตัวเลขจัดให้อยู่ตำแหน่งกึ่งกลางของเซลล์​​​​​และข้อความให้จัดตำแหน่งชิดซ้าย  ​​​​​เพื่อการจัดระเบียบข้อมูลและการนำเสนอข้อมูลที่น่าสนใจเข้าใจง่ายค่าที่สามารถกำหนดจัดข้อมูลในแนวนอนใช้แอตทริบิวต์  align  คือ  การจัดกึ่งกลาง  (center),  การจัดชิดซ้าย  (left),  การจัดชิดขวา  (right)  และการจัดให้เต็มช่อง  (justify)  ค่าที่สามารถกำหนดการจัดข้อมูลในแนวตั้งใช้แอตทริบิวต์  valign  คือ  การกำหนดข้อมูลชิดขอบบน  (baseline),  การกำหนดข้อมูลชิดขอบล่าง  (bottom),  การกำหนดข้อมูลอยู่กึ่งกลางเซลล์ของตาราง  (middle),  การกำหนดข้อมูลชิดขอบบนสุดของเซลล์  (top)  ซึ่งการกำหนดค่า  (top)  และ  (baseline)  มีการแสดงผลข้อมูลชิดขอบบนเหมือนกัน

 

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

 <table width= “ความกว้าง” height= “ความสูง”>
<tr>
<td align=“ตำแหน่งของข้อมูล”>ลำดับ</td>
<td align=“ตำแหน่งของข้อมูล” >รายการสินค้า</td>
<td align=“ตำแหน่งของข้อมูล” >วัน/เดือน/ปี</td>
</tr>
<tr>
<td align=“ตำแหน่งของข้อมูล” >1.</td>
<td align=“ตำแหน่งของข้อมูล” >เมาส์</td>
<td align=“ตำแหน่งของข้อมูล” >3ก.ค.55</td>
</tr>
<tr>
<td align=“ตำแหน่งของข้อมูล” >2.</td>
<td align=“ตำแหน่งของข้อมูล” >คีย์บอร์ด</td>
<td align=“ตำแหน่งของข้อมูล” >24ธ.ค.55</td>
</tr>
</table>

ตัวอย่าง

 <table border= “1” width= “450” height= “100”>
<tr><th>ลำดับ</th><th>รายการสินค้า</th>
<th>วัน/เดือน/ปี</th><th>หมายเหตุ</th></tr>
<tr><td align= “center” valign=” top”>1.</td>
<td valign= “top”>เมาส์ ยี่ห้อ CHiC USB</td>
<td align= “center” valign= “buttom”>3 ม.ค. 55</td>
<td></td>
</tr>
<tr><td align= “center” valign= “top”>2.</td>
<td valign= “top”>คีย์บอร์ด ยี่ห้อ SAMSUNG รุ่น PLEOMAX</td>
<td align= “center” valign= “buttom”>24 ก.พ. 55</td>
<td></td></tr></table>

table align valign