การสร้างตาราง

1. Table
การสร้างตาราง

2. การสร้างตาราง
• การสร้างตารางนั้นจะประกอบไปด้วย
แถว (Row) และสดมภ์ (Column) ตัดกัน
เป็นช่องสี่เหลี่ยมสาหรับบรรจุข้อมูล ซึ่ง
เราเรียกว่าเซลล์ (Cell)

3. โครงสร้างของ ตาราง
• ในการสร้างตารางนั้นจะมีโครงสร้างใน
การสร้าง เพื่อให้การค้นหาหรือแก้ไขง่าย
ขึ้น โครงสร้างของตารางมีดังต่อไปนี้
<table>
<tr>
<td>ข้อมูล</td><td>ข้อมูล</td><td>ข้อมูล</td>
</tr>
<tr>
<td>ข้อมูล</td><td>ข้อมูล</td><td>ข้อมูล</td>
</tr>
</table>

4. <table> , </table>
• ใช้กาหนดว่าเอกสารส่วนนี้เป็นตาราง ใช้
ร่วมกับคาสั่งดังต่อไปนี้
bgcolor ใช้สาหรับกาหนดสีพื้นตาราง[bgcolor = รหัสสี] ถ้าไม่กาหนดสีพื้นไว้browser จะใช้สีเดียวกับสี
พื้นของเอกสาร
border สาหรับกาหนดขนาดของเส้นรอบนอกของตาราง[border = ค่าตัวเลข] ค่าตัวเลขคือความหนาของ
เส้น ปกติมีค่า = 0 หมายถึงไม่มีเส้น สามารถกาหนดได้ถึง10
width ใช้สาหรับกาหนดความกว้างของตาราง [width= ค่าตัวเลข หรือเปอร์เซนต์] หน่วยตัวเลขเป็น
pixel หรือเปอร์เซนต์ของความกว้างที่มี
height ใช้สาหรับกาหนดความสูงของตาราง [height = ค่าตัวเลข หรือเปอร์เซนต์] หน่วยเป็น pixel หรือ
เปอร์เซนต์ของความสูงที่มี
caption กาหนดคาอธิบายให้ตาราง
cellpadding=n ระยะห่างระหว่างเส้นและเนื้อหาภายในเซลล์[cellpadding= ค่าตัวเลข] หน่วยเป็น pixel
cellspacing=n กาหนดระยะห่างระหว่างสดมภ์[cellspacing = ค่าตัวเลข] ค่าตัวเลขคือความหนาของเส้นหน่วย
เป็น pixel

5. <tr> , </tr>
• ใช้กาหนดจุดเริ่มต้นและสิ้นสุดเนื้อหาใน
แต่ละแถว ใช้ร่วมกับคาสั่งดังต่อไปนี้
bgcolor ใช้สาหรับกาหนดสีพื้นของแถวนั้นทั้งแถว [bgcolor =
รหัสสี]
align ใช้สาหรับกาหนดชิดซ้าย ตรงกลาง หรือชิดขวาของทั้ง
แถว
[align = left,center,right]
valign ใช้สาหรับกาหนดชิดบน ตรงกลาง ชิดล่าง หรือชิดแนว
หลักของทั้งแถว
[valign = top,middle,bottom,baseline]

6. <td> , </td>
• ใช้กาหนดจุดเริ่มต้นและสิ้นสุดเนื้อหาใน
แต่ละเซลล์ใช้ร่วมกับคาสั่งดังต่อไปนี้
bgcolor ใช้สาหรับกาหนดสีพื้นของช่องตาราง(เฉพาะช่องที่กาหนด) [bgcolor = รหัสสี] ถ้า
ไม่กาหนดสีพื้นไว้browser จะใช้สีเดียวกับสีพื้นของเอกสาร
align ใช้กาหนดการชิดซ้าย กึ่งกลาง หรือชิดขวา มีผลเฉพาะช่องตารางที่กาหนด [align =
left,center,right]
valign ใช้กาหนดชิดบน กึ่งกลาง ชิดล่าง หรือตามแนวหลัก มีผลเฉพาะช่องตารางที่กาหนด
[valign = top,middle,bottom,baseline]
width ใช้กาหนดความกว้างของช่องตารางนั้น
[width = ค่าตัวเลข] หน่วยเป็น pixel(*ระวัง! อย่ากาหนดเป็นเปอร์เซนต์เพราะ IE จะ
ใช้การกาหนดเป็น pixel เท่านั้น)
rowspan=n กาหนดให้แถวจานวน n แถว รวมกันเป็น 1 แถว
colspan=n กาหนดให้สดมภ์จานวน n สดมภ์ รวมกันเป็น 1 สดมภ์
colstart=n กาหนดให้ใส่ข้อมูลลงใน สดมภ์ที่เท่าใด

7. ตัวอย่าง
<table>
<tr>
<td>สินค้า</td><td>ราคา</td
</tr>
<tr>
<td>ปากกา</td><td>12</td</td>
</tr>
<tr>
<td>ดินสอ</td><td>5</td</td>
</tr>
</table>
ผลลัพธ์
สินค้า ราคา
ปากกา 12
ดินสอ 5

8. ให้นักศึกษาทาตามใบงาน
และสังเกตผลลัพธ์