ݺߣ

ݺߣShare a Scribd company logo
Table
การสร้างตาราง
การสร้างตาราง
• การสร้างตารางนั้นจะประกอบไปด้วย
แถว (Row) และสดมภ์ (Column) ตัดกัน
เป็นช่องสี่เหลี่ยมสาหรับบรรจุข้อมูล ซึ่ง
เราเรียกว่าเซลล์ (Cell)
โครงสร้างของ ตาราง
• ในการสร้างตารางนั้นจะมีโครงสร้างใน
การสร้าง เพื่อให้การค้นหาหรือแก้ไขง่าย
ขึ้น โครงสร้างของตารางมีดังต่อไปนี้
<table>
<tr>
<td>ข้อมูล</td><td>ข้อมูล</td><td>ข้อมูล</td>
</tr>
<tr>
<td>ข้อมูล</td><td>ข้อมูล</td><td>ข้อมูล</td>
</tr>
</table>
<table> , </table>
• ใช้กาหนดว่าเอกสารส่วนนี้เป็นตาราง ใช้
ร่วมกับคาสั่งดังต่อไปนี้
bgcolor ใช้สาหรับกาหนดสีพื้นตาราง[bgcolor = รหัสสี] ถ้าไม่กาหนดสีพื้นไว้browser จะใช้สีเดียวกับสี
พื้นของเอกสาร
border สาหรับกาหนดขนาดของเส้นรอบนอกของตาราง[border = ค่าตัวเลข] ค่าตัวเลขคือความหนาของ
เส้น ปกติมีค่า = 0 หมายถึงไม่มีเส้น สามารถกาหนดได้ถึง10
width ใช้สาหรับกาหนดความกว้างของตาราง [width= ค่าตัวเลข หรือเปอร์เซนต์] หน่วยตัวเลขเป็น
pixel หรือเปอร์เซนต์ของความกว้างที่มี
height ใช้สาหรับกาหนดความสูงของตาราง [height = ค่าตัวเลข หรือเปอร์เซนต์] หน่วยเป็น pixel หรือ
เปอร์เซนต์ของความสูงที่มี
caption กาหนดคาอธิบายให้ตาราง
cellpadding=n ระยะห่างระหว่างเส้นและเนื้อหาภายในเซลล์[cellpadding= ค่าตัวเลข] หน่วยเป็น pixel
cellspacing=n กาหนดระยะห่างระหว่างสดมภ์[cellspacing = ค่าตัวเลข] ค่าตัวเลขคือความหนาของเส้นหน่วย
เป็น pixel
<tr> , </tr>
• ใช้กาหนดจุดเริ่มต้นและสิ้นสุดเนื้อหาใน
แต่ละแถว ใช้ร่วมกับคาสั่งดังต่อไปนี้
bgcolor ใช้สาหรับกาหนดสีพื้นของแถวนั้นทั้งแถว [bgcolor =
รหัสสี]
align ใช้สาหรับกาหนดชิดซ้าย ตรงกลาง หรือชิดขวาของทั้ง
แถว
[align = left,center,right]
valign ใช้สาหรับกาหนดชิดบน ตรงกลาง ชิดล่าง หรือชิดแนว
หลักของทั้งแถว
[valign = top,middle,bottom,baseline]
<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 กาหนดให้ใส่ข้อมูลลงใน สดมภ์ที่เท่าใด
ตัวอย่าง
<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
ให้นักศึกษาทาตามใบงาน
และสังเกตผลลัพธ์

More Related Content

More from ssuseraa96d2 (20)

การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศการประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
ssuseraa96d2
ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์
ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์
ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์
ssuseraa96d2
ระบบ๶ครือข่ายอิȨทอร์๶Ȩต
ระบบ๶ครือข่ายอิȨทอร์๶Ȩตระบบ๶ครือข่ายอิȨทอร์๶Ȩต
ระบบ๶ครือข่ายอิȨทอร์๶Ȩต
ssuseraa96d2
ระบบปฏิบัติการ Linux
ระบบปฏิบัติการ Linuxระบบปฏิบัติการ Linux
ระบบปฏิบัติการ Linux
ssuseraa96d2
ระบบปฏิบัติการ MS-DOS
ระบบปฏิบัติการ MS-DOSระบบปฏิบัติการ MS-DOS
ระบบปฏิบัติการ MS-DOS
ssuseraa96d2
ข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูลข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูล
ssuseraa96d2
ข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูลข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูล
ssuseraa96d2
ความรู้เกี่ยวกับคอมพิว๶ตอร์
ความรู้เกี่ยวกับคอมพิว๶ตอร์ความรู้เกี่ยวกับคอมพิว๶ตอร์
ความรู้เกี่ยวกับคอมพิว๶ตอร์
ssuseraa96d2
ความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩต
ความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩตความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩต
ความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩต
ssuseraa96d2
การกำหȨสไตล์ให้กับเอกสาร
การกำหȨสไตล์ให้กับเอกสารการกำหȨสไตล์ให้กับเอกสาร
การกำหȨสไตล์ให้กับเอกสาร
ssuseraa96d2
การเชื่อมโยง๶อกสาร
การเชื่อมโยง๶อกสารการเชื่อมโยง๶อกสาร
การเชื่อมโยง๶อกสาร
ssuseraa96d2
การสร้างฟอร์ม
การสร้างฟอร์มการสร้างฟอร์ม
การสร้างฟอร์ม
ssuseraa96d2
การสร้าง๶ฟรม
การสร้าง๶ฟรมการสร้าง๶ฟรม
การสร้าง๶ฟรม
ssuseraa96d2
การแทรกรูปภาพ
การแทรกรูปภาพการแทรกรูปภาพ
การแทรกรูปภาพ
ssuseraa96d2
การกำหȨให้ྺ้อความอยู่ในรูปྺองรายการ
การกำหȨให้ྺ้อความอยู่ในรูปྺองรายการการกำหȨให้ྺ้อความอยู่ในรูปྺองรายการ
การกำหȨให้ྺ้อความอยู่ในรูปྺองรายการ
ssuseraa96d2
การตกแต่งเอกสาร
การตกแต่งเอกสารการตกแต่งเอกสาร
การตกแต่งเอกสาร
ssuseraa96d2
เริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTMLเริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTML
ssuseraa96d2
ความรู้เบื้องต้นเกี่ยวกับภาษา HTML
ความรู้เบื้องต้นเกี่ยวกับภาษา HTMLความรู้เบื้องต้นเกี่ยวกับภาษา HTML
ความรู้เบื้องต้นเกี่ยวกับภาษา HTML
ssuseraa96d2
ฮาร์ึϹวร์และอุปกรณ์อื่Ȩ
ฮาร์ึϹวร์และอุปกรณ์อื่Ȩฮาร์ึϹวร์และอุปกรณ์อื่Ȩ
ฮาร์ึϹวร์และอุปกรณ์อื่Ȩ
ssuseraa96d2
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศการประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
ssuseraa96d2
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศการประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
ssuseraa96d2
ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์
ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์
ความปลอดภัยและจริยธรรมทางด้าȨอมพิวเตอร์
ssuseraa96d2
ระบบ๶ครือข่ายอิȨทอร์๶Ȩต
ระบบ๶ครือข่ายอิȨทอร์๶Ȩตระบบ๶ครือข่ายอิȨทอร์๶Ȩต
ระบบ๶ครือข่ายอิȨทอร์๶Ȩต
ssuseraa96d2
ระบบปฏิบัติการ Linux
ระบบปฏิบัติการ Linuxระบบปฏิบัติการ Linux
ระบบปฏิบัติการ Linux
ssuseraa96d2
ระบบปฏิบัติการ MS-DOS
ระบบปฏิบัติการ MS-DOSระบบปฏิบัติการ MS-DOS
ระบบปฏิบัติการ MS-DOS
ssuseraa96d2
ข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูลข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูล
ssuseraa96d2
ข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูลข้อมูลและการจัึϸารข้อมูล
ข้อมูลและการจัึϸารข้อมูล
ssuseraa96d2
ความรู้เกี่ยวกับคอมพิว๶ตอร์
ความรู้เกี่ยวกับคอมพิว๶ตอร์ความรู้เกี่ยวกับคอมพิว๶ตอร์
ความรู้เกี่ยวกับคอมพิว๶ตอร์
ssuseraa96d2
ความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩต
ความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩตความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩต
ความรู้เบื้องต้น๶กี่ยวกับอิȨทอร์๶Ȩต
ssuseraa96d2
การกำหȨสไตล์ให้กับเอกสาร
การกำหȨสไตล์ให้กับเอกสารการกำหȨสไตล์ให้กับเอกสาร
การกำหȨสไตล์ให้กับเอกสาร
ssuseraa96d2
การเชื่อมโยง๶อกสาร
การเชื่อมโยง๶อกสารการเชื่อมโยง๶อกสาร
การเชื่อมโยง๶อกสาร
ssuseraa96d2
การสร้างฟอร์ม
การสร้างฟอร์มการสร้างฟอร์ม
การสร้างฟอร์ม
ssuseraa96d2
การสร้าง๶ฟรม
การสร้าง๶ฟรมการสร้าง๶ฟรม
การสร้าง๶ฟรม
ssuseraa96d2
การแทรกรูปภาพ
การแทรกรูปภาพการแทรกรูปภาพ
การแทรกรูปภาพ
ssuseraa96d2
การกำหȨให้ྺ้อความอยู่ในรูปྺองรายการ
การกำหȨให้ྺ้อความอยู่ในรูปྺองรายการการกำหȨให้ྺ้อความอยู่ในรูปྺองรายการ
การกำหȨให้ྺ้อความอยู่ในรูปྺองรายการ
ssuseraa96d2
การตกแต่งเอกสาร
การตกแต่งเอกสารการตกแต่งเอกสาร
การตกแต่งเอกสาร
ssuseraa96d2
เริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTMLเริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTML
ssuseraa96d2
ความรู้เบื้องต้นเกี่ยวกับภาษา HTML
ความรู้เบื้องต้นเกี่ยวกับภาษา HTMLความรู้เบื้องต้นเกี่ยวกับภาษา HTML
ความรู้เบื้องต้นเกี่ยวกับภาษา HTML
ssuseraa96d2
ฮาร์ึϹวร์และอุปกรณ์อื่Ȩ
ฮาร์ึϹวร์และอุปกรณ์อื่Ȩฮาร์ึϹวร์และอุปกรณ์อื่Ȩ
ฮาร์ึϹวร์และอุปกรณ์อื่Ȩ
ssuseraa96d2
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศการประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
การประยุกต์ใช้๶ทคโนโลยีสารสȨทศ
ssuseraa96d2

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

  • 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 กาหนดให้ใส่ข้อมูลลงใน สดมภ์ที่เท่าใด