หน่�วยที่�� 7 จั�ดข้�อมู�ลให�เป็�น่สั�ดสั�วน่ด�วยตาราง

การใช้�ตาราง เหมาะสำ�าหร�บการนำ�าเสำนำอเป็�นำจำ�านำวนำมาก เช้�นำ ข้�อม�ลการซื้��อข้ายหล�กทร�พย" ยอดข้ายสำ$นำค้�าบร$ษั�ท หร�อสำร'ป็ป็ร$มาณ

สำ$นำค้�าค้งค้ล�งท)*ค้วรนำ�ามาจำ�ดในำร�ป็แบบแถวและหล�ก นำอกจำากนำ)�ตารางย�งม)ป็ระโยช้นำ"ในำการช้�วยจำ�ดองค้"ป็ระกอบต�างๆ นำะเว/บเพจำท)*อย��ในำ

ต�าแหนำ�งท)*ต�องการได�เป็�นำอย�างเป็�นำสำ�ดสำ�วนำอ)กด�วย

ในำบทนำ)� เราจำะมาร�ป็จำ�กก�บการสำร�างตารางในำร�ป็แบบต�างๆ เพ�*อแต�งให�เว/บเพจำข้องเราด�นำ�าสำนำใจำมากข้1�นำ

จำ�านำวนำแท/ก tr เป็�นำการก�าหนำดจำ�านำวนำแถวในำตาราง และจำ�านำวนำแท/ก td เป็�นำการก�าหนำดค้อล�มนำ"ในำแต�ละแถว ในำต�วอย�างสำร�าง

ข้�อม�ลข้1�นำมา 2 แถว 3 ค้อล�มนำ"

ที่ดลองสัร�างตาราง <table>,<tr>,<td>

การใสั�ห�วข้�อ <th> และต�เสั�น่ตาราง เราสำามารถตกแต�งตารางให�ด�ง�ายข้1�นำ โดยการใสำ�ห�วค้อล�มนำ"หร�อห�วแถว เพ�*ออธิ$บาย

ค้วามหมายข้องข้�อม�ลภายในำค้อล�มนำ"หร�อภายในำแถว โดยใช้�แท/ก <th> ซื้1*งจำะม)ล�กษัณะการใช้�งานำเหม�อนำแท/ก td แต�ข้�อค้วามภายในำ

แท/กจำะเป็�นำต�วหนำา เป็�นำการเนำ�นำข้�อค้วาม นำอกจำากนำ)�การต)เสำ�นำตารางเพ�*อยกข้�อม�ลแต�ละช้�องออกจำากก�นำ เราก/สำามารถท�าได�

โดยการใสำ�แอตทร$บ$วต" barder ในำแท/กtable ซื้1*งม)ร�ป็แบบ

การก�าหน่ดข้�อความูก�าก�บให�ก�บตาราง <caption> การใสำ�ข้�อค้วามก�าก�บ จำะช้�วยให�ทราบได�ว�าตารางนำ��นำนำ�าเสำนำอข้�อม�ลเก)*ยวก�บเร�*องใด

โดยม)ร�ป็แบบด�งนำ)�ต�วอย�างการใช้�ข้�อความูก�าก�บตาราง

ความูหน่าข้องเสั�น่ตารางและความูห�างข้องช้�องเซลล$ เราสำามารถป็ร�บค้วามหนำาข้องเสำ�นำตารางและค้วามห�างข้องช้�องเซื้ลล" ด�งนำ)�

ต�วอย�างการก�าหน่ดความูหน่าข้องเสั�น่ตารางและความูห�างข้องเซลล$

เว�น่ระยะห�างข้�อมู�ลใน่เซลล$ก�บกรอบเซลล$ เราสำามารถป็ร�บข้นำาดข้องช้�องตาราง ให�ม)ท)*ห�างระหว�างข้�อม�ลก�บกรอบช้�องเซื้ลล" เพ�*อ

ค้วามสำวยงามต�วอย�างการป็ร�บที่��ว�างใน่ตาราง  ให�ลองเป็ล)*ยนำค้�าต�วเลข้ โดยเม�*อเราก�าหนำดค้�า cellpadding เป็�นำ 0 จำะพบว�าไม�ม)พ��นำท)*ว�างระหว�างข้�อม�ลและข้อบช้�องตาราง

ป็ร�บความูกว�างอละความูสั�งข้องตาราง ในำต�วอย�างการสำร�างตารางท)*ผ่�านำมาค้วามกว�างข้องตารางนำ��นำ ถ�กก�าหนำดโดยข้�อม�ลในำ

แต�ละช้�อง ท�าให�ข้นำาดตารางท)*ได�อาจำไม�เหมาะสำม ซื้1*งเราสำามารถข้นำาดค้วามกว�างข้องตารางได�เองต�วอย�างการก�าหนำดค้วามกว�างข้องตาราง ค้�าค้วามกว�างนำ��นำ ค้�อเป็อร"เซื้/นำค้วามกว�างข้องตารางท)*ต�องการ โดยเท)ยบก�บข้นำาด

ข้องหนำ�าจำอบราวเซื้อร"

ต�วอย�างการก�าหนำดค้วามสำ�งข้องตาราง ให�ลองเป็ล)*ยนำจำากค้�าสำ�*ง width เป็�นำ height=”60%”

ป็ร�บข้น่าดข้องเซลล$ ป็กต$ช้�องเซื้ลล" 1 ช้�อง จำะม)ข้นำาด 1 แถว 1 ค้อล�มนำ" แต�ในำบางกรณ)เราต�องการใช้�

ช้�องเซื้ลล"ข้นำาดอ�*นำ เช้�นำ 1 แถว 5 ค้อล�มนำ" หร�อ 2 แถว 2 ค้อล�มนำ" เป็�นำต�นำ เม�*อเราต�องการใช้�ช้�องเซื้ลล"เก$นำ 1 ค้อล�มนำ"ต�วอย�างการข้ยายช้�องเซื้ลล"ออกเก$นำ 1 ค้อล�มนำ"

ต�วอย�างการก�าหนำดช้�องเซื้ลล"ออกเก$นำ 1 แถว ด�งนำ)�

การก�าหน่ดสั�ใน่ช้�องเซลล$ การใสำ�สำ)ในำช้�องเซื้ลล" ช้�วยให�ตารางด�ด)ข้1�นำ ม)การแยกสำ) หร�เนำ�นำค้วามสำ�าค้�ญข้องข้�อม�ลต�วอย�างการใสำ�ในำช้�องเซื้ลล"

การก�าหน่ดสั�ใน่กรอบตาราง เราสำามารถแต�งสำ)ให�ก�บกรอบข้องตารางเพ�*อท�าให�ตารางด�สำะด'ดตามากข้1�นำ โดยการใช้�

แอตทร$บ$วต" bordercololr ใสำ�ลงในำแท/ก tableต�วอย�างการใสำ�สำ)กรอบ

ใสั�ภาพให�ก�บพ'(น่หล�งข้องตาราง นำอกจำากเราจำะสำามารถใสำ�สำ)ให�ก�บพ��นำหล�งแล�ว เราย�งสำามารถใสำ�ร�ป็ให�ก�บพ��นำหล�งข้อง

ตารางได�อ)ก โดยใช้�แอตทร$บ$วต"

ก�าหน่ดการแสัดงเสั�น่ตาราง เป็�นำการก�าหนำดให�แสำดงหร�อไม�แสำดงเสำ�นำข้องตาราง บางด�านำ เพ�*อค้วามเหมาะสำม

สำ�าหร�บการแสำดงข้�อม�ลบางป็ระเภท เช้�นำ ไม�แสำดงเสำ�นำเฉพาะค้อล�มนำ"ต�วอย�างการเป็7ด/ป็7ดเสำ�นำตาราง

จั�ดต�าแหน่�งข้�อมู�ลใน่ตาราง เราสำามารถจำ�ดข้�อม�ลท)*แสำดงในำช้�องตารางให�ช้$ดข้วา ช้$ดซื้�าย หร�ออย��ก1*งกลางข้องช้�อง

ตารางต�วอย�างการจำ�ดข้�อม�ลในำแนำวนำอนำ

ต�วอย�างการจำ�ดข้�อม�ลในำแนำวต��ง

การซ�อน่ตาราง การสำร�างตารางซื้�อนำก�นำนำ��นำ สำามารถช้�วยในำการนำ�าเสำนำอข้�อม�ลท)*ซื้�บซื้�อนำได�ต�วอย�างการสำร�างตารางซื้�อนำตาราง

การใสั�ร�ป็ใน่ตาราง ว$ธิ)การสำ�าหร�บนำ�าร�ป็ภาพมาใสำ�ในำช้�องตาราง นำ��นำค้ล�ายการนำ�าข้�อค้วามมาใสำ�ในำตาราง

ท�*วไป็ เพ)ยงแต�เราต�องใช้�แท/ก<img src…> เพ�*อระบ'ร�ป็ท)*เราต�องการมาแสำดงต�วอย�างการใสำ�ร�ป็ลงในำตาราง

การก�าหน่ดความูกว�างข้องคอล�มูน่$ <colgroup> ถ�าเราต�องการก�าหนำดค้วามกว�างข้องค้อล�มนำ"ในำตาราง เราสำามารถก�าหนำดได�โดยใช้�แท/ก ต�วอย�างการใช้�แท/ก colgroup ก�าหนำดค้วามกว�างค้อล�มนำ"

ก�าหน่ดความูกว�างแต�ละคอล�มูน่$ <col> ในำต�วอย�างก�อนำหนำ�านำ)�เราสำามารถจำ�าแนำกข้องค้อล�มนำ"ท)*เราจำะใช้�ในำการต��งค้�าค้วามกว�างได�แต�

ค้วามจำ�าก�ดข้องแท/ก เราไม�สำามารถก�าหนำดค้วามกว�างข้องค้อล�มนำ"อ�*นำๆ ได� นำอกเหนำ�อจำากท)*เราก�าหนำดในำ span ด�งนำ��นำถ�าเรา

ก�าหนำดค้อล�มนำ"อ�*นำๆต�วอย�างการใช้�แท/ก col ก�าหนำดค้อล�มนำ"

จำากต�วอย�างจำะเห/นำว�าม)การใสำ�แท�ก col อย�� 3 ท)*ด�วยก�นำ

การแบ�งสั�วน่ตาราง <thead>,<tfoot>,<tbody> โดยป็กต$ข้�อม�ลท)*อย��ในำตารางจำะเป็�นำข้�อม�ลเนำ��อหาสำ�วนำใหญ� และก�เป็�นำสำ�วนำข้องห�วค้อล�มนำ"

เพ�*อแสำดงค้วามหมายข้องข้�อม�ลนำ��นำ ซื้1*งเราจำะใช้�แท/ก th ท)*กล�าวไป็ เราก/สำามารถท�าได� 3 สำ�วนำ ค้�อ

ต�วอย�างจำ�ดป็ระเภทข้�อม�ลในำตาราง