6.การจัดข้อมูลให้เป็นสัดส่วนด้วยตาราง

ชือ่ วิชา การสรา้ งเวบ็ เพจดว้ ยภาษาเอชทีเอม็ แอล หน่วยท่ี 6 ชอ่ื หนว่ ย การจัดขอ้ มลู ใหเ้ ป็นสดั ส่วนดว้ ยตาราง รหสั วชิ า 20901-2004 ชอ่ื เร่อื ง การจัดข้อมลู ใหเ้ ป็นสดั ส่วนดว้ ยตาราง 1. สาระสำคัญ การจดั เก็บขอ้ มูลจำนวนมาก จำเป็นมากท่ตี อ้ งนำตารางเขา้ มาชว่ ยในการจดั ขอ้ มลู เหลา่ นี้ ใหด้ เู ป็นระเบยี บและ เป็นสดั สว่ น ซ่งึ เวบ็ เพจโดยสว่ นใหญจ่ ะใช้แทก็ ภาษา HTML ท่เี ก่ียวกับตารางมาช่วยท้งั สน้ิ 2. สมรรถนะประจำหน่วย 1. การสรา้ งตาราง <table>, <tr>, <td> 2. การใส่หวั ข้อ <th> และตเี สน้ ตาราง 3. การกำหนดข้อความกำกบั ให้กับตาราง <caption> 4. เวน้ ระยะระหว่างข้อมูลในเซลลก์ บั กรอบเซลล์ 5. ปรับความกวา้ งและความสูงของตาราง 3. จดุ ประสงค์การเรียนรู้ 1. สามารถแสดงความรูค้ วามเขา้ ใจเกีย่ วกับภาพกราฟกิ ชนิดตา่ ง ๆ 2. บอกขั้นตอนในการใส่ขอ้ ความกำกบั ภาพ 3. บอกขน้ั ตอนในการปรบั ขนาดรปู ภาพ 4. สามารถปฏบิ ตั กิ ารแทรกรูปภาพโดยใช้คำสัง่ HTML ได้ 4. สาระการเรยี นรู้ 1. ภาพกราฟกิ ชนดิ ตา่ ง ๆ 2. แสดงภาพบนเว็บ 3. การใส่ข้อความกำกบั ภาพ 4. การปรับขนาดรูปภาพ 5. การจัดตำแหนง่ รปู ภาพ

ใบความรู้ หน่วยที่ 5 รหสั วชิ า 20901-2004 ชื่อวิชา การสร้างเวบ็ เพจดว้ ยภาษาเอชทีเอม็ แอล สัปดาห์ที่ 13-15 ชือ่ หนว่ ย การจัดขอ้ มลู ใหเ้ ปน็ สัดส่วนด้วยตาราง ชื่อเรอื่ ง การสร้างตาราง <table>, <tr>, <td> การสรา้ งตาราง <table>, <tr>, <td> การใช้ตารางเหมาะสำหรบั การนำเสนอข้อมลู จำนวนมาก โดยตารางสามารถใชง้ านไดห้ ลายแบบตงั้ แต่ใชเ้ ปน็ ตารางธรรมดาเพอื่ แสดงคา่ ตัวเลขทางสถติ หิ รอื ตัวเลขท่ีมคี วามสัมพันธก์ นั ซง่ึ การใช้ตารางนำเสนอข้อมลู แบบน้ีทำให้ เหน็ การเปรียบเทียบทช่ี ัดเจน และการประยกุ ต์ใช้ตารางกบั ข้อมูลประเภทอ่ืน ๆ เชน่ ขอ้ ความ หรอื รปู ภาพเพอื่ ช่วย ออกแบบโฮมเพจ (เว็บเพจหน้าแรก) ซง่ึ ตารางสามารถจดั องค์ประกอบตา่ ง ๆ ได้อย่างเปน็ สดั ส่วนและอยู่ในตำแหน่งท่ี ตอ้ งการได้ โครงสรา้ งของตาราง <table> -------> <table> กำหนดการสรา้ งตาราง และมคี ำสัง่ ปิดคอื </table> <caption>………</caption> -------> เปน็ การกำหนดคำ หรือขอ้ ความอธบิ ายตาราง และมีคำส่ังปดิ คือ <tr> <th>………</th> <th>………</th> </tr> <tr> <td>………</td> <td>………</td> </tr> <tr> <td>………</td> <td>………</td> </tr> </table> <tr> (Table Row) เป็นการกำหนดแถวของตารางในแนวนอน และมีคำสง่ั ปดิ คอื </tr> <th> (Table Head) เป็นการกำหนดหัวเรอ่ื งในคอลัมน์ และมคี ำสง่ั ปดิ คือ </th> <td> (Table Data) เป็นการกำหนดขอ้ มลู ในตาราง และมคี ำสัง่ ปิดคอื </td>

ใบความรู้ หน่วยที่ 5 รหัสวิชา 20901-2004 ชอ่ื วชิ า การสรา้ งเว็บเพจดว้ ยภาษาเอชทเี อม็ แอล สปั ดาห์ท่ี 13-15 ชือ่ หน่วย การจดั ขอ้ มูลให้เป็นสัดสว่ นด้วยตาราง ช่ือเร่อื ง การสร้างตาราง <table>, <tr>, <td> คุณสมบัตขิ องตาราง <table> แอตทริบิวต์ คุณสมบตั ิ align= “align-type” กำหนดตำแหน่งตาราง โดย left=กำหนดตารางใหอ้ ยูท่ างซ้าย center = กำหนดตารางใหอ้ ยู่ก่งึ กลาง right=กำหนดตารางใหอ้ ยทู่ างขวา background=“url” ใส่ภาพกราฟกิ เปน็ พืน้ หลงั ตาราง โดย url เปน็ ตำแหน่งภาพ bgcolor=“n” กำหนดสีพนื้ หลงั ให้ตาราง โดย n คือ #รหสั สี หรอื ชอ่ื สี border=“n” กำหนดเส้นขอบตาราง โดย n เป็นค่าความหนาของขอบตาราง bordercolor=“n” กำหนดสี ใหข้ อบตาราง โดยสัมพันธ์กบั BORDER ซง่ึ n คอื #รหัสสี หรอื ชือ่ สี cellpadding=“n” กำหนดระยะหา่ งระหวา่ งตัวหนังสือและเสน้ แบง่ ตาราง โดย n เป็นค่าระยะห่าง cellspacing=“n” กำหนดขนาดความห่างของซ่องเซลล์ โดย n เปน็ ขนาดของความหา่ ง width=“n” กำหนดความกวา้ งของตาราง เปน็ ตวั เลขและเป็น % height=“n” กำหนดความสูงของตารางเปน็ ตวั เลขและเปน็ % คุณสมบัตขิ องแทก็ <tr> คุณสมบัติ กำหนดตำแหน่งตาราง โดย แอตทรบิ วิ ต์ left=กำหนดตารางใหอ้ ยทู่ างซา้ ย align= “align-type” center = กำหนดตารางใหอ้ ยู่กง่ึ กลาง right=กำหนดตารางใหอ้ ยู่ทางขวา background=“url” ใส่ภาพกราฟกิ เปน็ พ้นื หลงั ตาราง โดย url เปน็ ตำแหน่งภาพ bgcolor=“n” กำหนดสีพน้ื หลงั ให้ตาราง โดย n คอื #รหสั สี หรอื ชื่อสี bordercolor=“n” กำหนดสี ให้ขอบตาราง โดยสมั พนั ธก์ บั BORDER ซงึ่ n คือ #รหัสสี หรอื ช่ือสี valign=“align-type” จัดตำแหนง่ ขอ้ มูลในแนวต้งั โดย top= จดั อยูข่ า้ งบน middle = จัดอยตู่ รงกลาง bottom= จัดอยูข่ ้างลา่ ง

คณุ สมบตั ิของแท็ก <th> คณุ สมบตั ิ กำหนดตำแหน่งตาราง โดย แอตทริบวิ ต์ left=กำหนดตารางใหอ้ ยทู่ างซ้าย align= “align-type” center = กำหนดตารางใหอ้ ย่กู ่ึงกลาง right=กำหนดตารางใหอ้ ยทู่ างขวา background=“url” ใส่ภาพกราฟกิ เปน็ พน้ื หลงั ตาราง โดย url เป็น ตำแหน่งภาพ bgcolor=“n” กำหนดสพี น้ื หลงั ใหต้ าราง โดย n คือ #รหสั สี หรอื ชอ่ื สี bordercolor=“n” กำหนดสี ให้ขอบตาราง โดยสมั พนั ธ์กบั BORDER ซงึ่ n คอื #รหัสสี หรอื ชอ่ื สี colspan=“n” ปรับขนาดของคอลมั นใ์ ห้มขี นาดเป็นเท่าของความกวา้ งปกติ สงู สุดเทา่ กบั จำนวนคอลัมนท์ ม่ี ี โดย n คอื ค่าตวั เลขของคอลัมน์ rowspan=“n” ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สงู สดุ เท่ากับ จำนวน แถวท่มี ี โดย n คอื คา่ ตวั เลขของแถว valign=“align-type” จัดตำแหนง่ ขอ้ มลู ในแนวตั้ง โดย top= จัดอยขู่ า้ งบน middle = จดั อยตู่ รงกลาง bottom= จัดอยู่ข้างล่าง คณุ สมบัติของแท็ก <td> คุณสมบัติ กำหนดตำแหนง่ ตาราง โดย แอตทรบิ ิวต์ left=กำหนดตารางใหอ้ ยู่ทางซ้าย align= “align-type” center = กำหนดตารางใหอ้ ยูก่ งึ่ กลาง right=กำหนดตารางให้อยทู่ างขวา background=“url” ใสภ่ าพกราฟกิ เป็นพ้นื หลงั ตาราง โดย url เป็น ตำแหน่งภาพ bgcolor=“n” กำหนดสีพน้ื หลังใหต้ าราง โดย n คอื #รหสั สี หรอื ชื่อสี bordercolor=“n” กำหนดสี ให้ขอบตาราง โดยสมั พนั ธก์ บั BORDER ซงึ่ n คอื #รหสั สี หรือชอ่ื สี colspan=“n” ปรับขนาดของคอลมั น์ให้มขี นาดเป็นเท่าของความกว้างปกติ สงู สุดเทา่ กบั จำนวนคอลัมนท์ ม่ี ี โดย n คอื คา่ ตัวเลขของคอลมั น์ rowspan=“n” ปรบั ขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สงู สดุ เท่ากับ จำนวน แถวที่มี โดย n คือ คา่ ตวั เลขของแถว valign=“align-type” จดั ตำแหน่งข้อมูลในแนวตง้ั โดย top= จัดอยขู่ า้ งบน middle = จดั อยู่ตรงกลาง bottom= จดั อยู่ข้างล่าง

ใบความรู้ หนว่ ยที่ 5 รหัสวิชา 20901-2004 ชื่อวิชา การสรา้ งเวบ็ เพจด้วยภาษาเอชทีเอม็ แอล สปั ดาหท์ ี่ 13-15 ชื่อหน่วย การจดั ข้อมูลให้เป็นสัดสว่ นด้วยตาราง ชือ่ เรื่อง การสรา้ งตาราง <table>, <tr>, <td> การสรา้ งตาราง <table>, <tr>, <td> ชอ่ื แทก็ table, tr, td ตำแหน่งของแทก็ table อยู่ภายในแทก็ <body>…</body> tr อยูภ่ ายในแทก็ <table>…</table> td อยู่ภายในแท็ก <tr>…</tr> รปู แบบแท็ก HTML <table> <tr><td>ขอ้ มูล</td><td>ข้อมลู </td></tr> <tr><td>ขอ้ มลู </td><td>ขอ้ มลู </td></tr> … <table> ตัวอยา่ งการเขยี นโปรแกรมเพือ่ สรา้ งข้อมลู ดว้ ยภาษา HTML <DOCTYPE HTML> <html> <head> <title>การสร้างตาราง</title> </head> <body> <table> <tr><td>ขอ้ มลู 1</td><td>ข้อมลู 2</td></tr> <tr><td>ขอ้ มลู 3</td><td>ข้อมลู 4</td></tr> </table> </body> </html> ผลลพั ธท์ ่ไี ด้

ใบความรู้ หนว่ ยท่ี 5 รหัสวชิ า 20901-2004 ชื่อวชิ า การสร้างเว็บเพจด้วยภาษาเอชทีเอม็ แอล สปั ดาหท์ ี่ 13-15 ชื่อหนว่ ย การจัดข้อมูลให้เปน็ สัดสว่ นด้วยตาราง ชือ่ เรอ่ื ง การสร้างตาราง <table>, <tr>, <td> การใส่หัวเร่อื ง <th> และตเี ส้นตาราง รูปแบบแท็ก HTML (การใส่หัวเรื่อง) <tr><th>หัวข้อ1</th><th>หัวขอ้ 2</th></tr> รปู แบบแทก็ HTML (การตีเส้นตาราง) <table border=\"ความหนาของเส้น\"> ตวั อยา่ งการใส่หัวเรอ่ื ง <th> และตีเสน้ ตาราง <html> <head> <title>การสร้างตาราง</title> </head> <body> <table border=\"1\"> <tr><th>หัวขอ้ 1</th><th>หวั ขอ้ 2</th></tr> <tr><td>ขอ้ มลู 1</td><td>ข้อมลู 2</td></tr> <tr><td>ขอ้ มูล3</td><td>ข้อมลู 4</td></tr> </table> </body> </html> ผลลัพธ์ท่ีได้

ใบความรู้ หนว่ ยท่ี 5 รหสั วชิ า 20901-2004 ชอื่ วิชา การสร้างเว็บเพจดว้ ยภาษาเอชทีเอม็ แอล สัปดาห์ท่ี 13-15 ชื่อหน่วย การจดั ขอ้ มลู ให้เป็นสัดสว่ นดว้ ยตาราง ชื่อเร่ือง การสรา้ งตาราง <table>, <tr>, <td> การกำหนดขอ้ ความกำกับให้กบั ตาราง รูปแบบแทก็ HTML <caption align=“ตำแหนง่ ”>ขอ้ ความกำกบั </caption> คา่ ทีก่ ำหนดให้ใช้ ตำแหน่งของข้อความกำกบั ไดแ้ ก่ top (กลางบน), bottom (กลางลา่ ง), left (ซา้ ยบน), right (ขวาบน) ตวั อยา่ งการกำหนดข้อความกำกบั ใหก้ ับตาราง <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\"> <caption align=\"top\">ตารางแสดงการกำหนดข้อความกำกับตาราง</caption> <tr><th>หวั ขอ้ 1</th><td>ขอ้ มลู 1</td><td>ขอ้ มลู 2</td></tr> <tr><th>หัวขอ้ 2</th><td>ข้อมูล3</td><td>ขอ้ มลู 4</td></tr> </table> </body> </html> ผลลพั ธท์ ไ่ี ด้

ใบความรู้ หนว่ ยท่ี 5 รหัสวชิ า 20901-2004 ช่อื วิชา การสรา้ งเวบ็ เพจด้วยภาษาเอชทเี อม็ แอล สัปดาหท์ ี่ 13-15 ช่ือหนว่ ย การจดั ขอ้ มลู ใหเ้ ปน็ สัดสว่ นด้วยตาราง ชื่อเรือ่ ง การสรา้ งตาราง <table>, <tr>, <td> การปรับความหา่ งและการเว้นระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์ รปู แบบแท็ก HTML <table cellspacing=“ความหา่ ง”> คา่ ที่กำหนดใหใ้ ช้ ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10 รปู แบบแทก็ HTML <table cellpadding=“ระยะทีต่ ้องการเวน้ ”> คา่ ที่กำหนดให้ใช้ ขนาดเป็นพิกเซล (pixels) เชน่ 5, 7, 10 ตวั อย่างการใชง้ าน <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\" cellspacing=\"0\" cellspacing=\"0\"> <tr><th>หวั ข้อ1</th><td>ขอ้ มูล1</td><td>ขอ้ มลู 2</td></tr> <tr><th>หวั ขอ้ 2</th><td>ข้อมูล3</td><td>ขอ้ มลู 4</td></tr> </table> </body> </html> ผลลัพธ์ท่ไี ด้

ใบความรู้ หนว่ ยท่ี 5 รหสั วิชา 20901-2004 ชอ่ื วชิ า การสร้างเวบ็ เพจด้วยภาษาเอชทเี อม็ แอล สปั ดาห์ที่ 13-15 ชอื่ หน่วย การจัดข้อมลู ให้เป็นสดั ส่วนดว้ ยตาราง ชอื่ เรื่อง การสรา้ งตาราง <table>, <tr>, <td> การปรับความห่างและการเวน้ ระยะระหว่างข้อมลู ในเซลล์กับกรอบเซลล์ รูปแบบแท็ก HTML <table width=“ความกวา้ ง” height=“ความสงู ”> ค่าที่กำหนดใหใ้ ช้ ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10 หรอื % ตัวอยา่ งการใช้งาน <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\" width=\"50%\" height=\"50%\"> <tr><th>หวั ข้อ1</th><td>ข้อมูล1</td><td>ขอ้ มูล2</td></tr> <tr><th>หวั ข้อ2</th><td>ข้อมลู 3</td><td>ข้อมลู 4</td></tr> </table> </body> </html> ผลลพั ธท์ ไี่ ด้

การปรบั ขนาดชอ่ งเซลล์ หากเราต้องการปรบั ขนาดช่องเซลลจ์ ากปกติ 1 ชอ่ ง ทม่ี ขี นาด 1 แถว 1 คอลมั นเ์ ปน็ แบบ 1 แถว 3 คอลมั น์ เรากส็ ามารถทำได้ดังน้ี รูปแบบแท็ก HTML <td colspan=“จำนวนคอลัมนท์ ่ตี ้องการขยาย”> ค่าท่กี ำหนดใหใ้ ช้ จำนวนคอลมั น์ทีต่ อ้ งการขยาย ตวั อยา่ งการขยายเซลลเ์ กนิ 1 คอลมั น์ <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\" width=\"50%\" height=\"50%\"> <tr><td colspan=\"2\">ขอ้ มูล1</td></tr> <tr><td>ขอ้ มลู 3</td><td>ขอ้ มลู 4</td></tr> </table> </body> </html> ผลลพั ธ์ท่ีได้

รูปแบบแทก็ HTML <td rowspan=“จำนวนแถวท่ีตอ้ งการขยาย”> คา่ ทกี่ ำหนดใหใ้ ช้ จำนวนแถวทีต่ อ้ งการขยาย ตัวอยา่ งการขยายเซลลเ์ กิน 1 แถว <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\" width=\"50%\" height=\"50%\"> <tr><td rowspan=\"2\">ขอ้ มลู 1</td><td>ข้อมลู 2</td></tr> <tr><td>ขอ้ มลู 3</td></tr> </table> </body> </html> ผลลพั ธท์ ไี่ ด้

การใส่สใี นช่องเซลล์ bgcolor=\"ชื่อสี/#รหสั สี\" รปู แบบแท็ก HTML สีท่กี ำหนดเปน็ สีพ้นื ฐานหรือเลขฐาน 16 ค่าท่กี ำหนดใหใ้ ช้ ตวั อย่างการใช้งาน <html> <head> <title>การสร้างตาราง</title> </head> <body> <table border=\"1\" bgcolor=\"pink\"> <tr bgcolor=\"yellow\"><th>หวั เรอื่ ง1</th><th>หวั เรือ่ ง2</th></tr> <tr><td bgcolor=\"sky blue\">ข้อมลู 1</td><td bgcolor=\"white\">ข้อมลู 2</td></tr> <tr><td>ขอ้ มูล3</td><td>ขอ้ มลู 2</td></tr> </table> </body> </html> ผลลพั ธ์ท่ไี ด้

การกำหนดสีกรอบตาราง bordercolor=\"ชือ่ ส/ี #รหัสสี\" รปู แบบแท็ก HTML สีทกี่ ำหนดเปน็ สีพน้ื ฐานหรอื เลขฐาน 16 คา่ ทก่ี ำหนดให้ใช้ ตัวอย่างการใช้งาน <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\" bordercolor=\"blue\"> <tr><th>หวั เรอื่ ง1</th><th>หัวเรือ่ ง2</th></tr> <tr><td>ขอ้ มลู 1</td><td>ขอ้ มลู 2</td></tr> <tr><td>ขอ้ มูล3</td><td>ข้อมลู 2</td></tr> </table> </body> </html> ผลลพั ธ์ที่ได้

การใสร่ ปู ภาพพื้นหลงั ตาราง background=\"ตำแหน่งรูปภาพ\" รูปแบบแท็ก HTML ชอื่ ตำแหนง่ และไฟล์รปู ภาพ ค่าทก่ี ำหนดให้ใช้ ตัวอยา่ งการใช้งาน <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\" bordercolor=\"blue\" background=\"pic/background-31.jpg\"> <tr><th>หัวเรอ่ื ง1</th><th>หวั เร่อื ง2</th></tr> <tr><td>ขอ้ มูล1</td><td>ข้อมลู 2</td></tr> <tr><td>ขอ้ มลู 3</td><td>ข้อมลู 2</td></tr> </table> </body> </html> ผลลพั ธท์ ี่ได้

การจดั ตำแหนง่ ตาราง แถว และคอลมั น์ รปู แบบแทก็ HTML <table align=\"ตำแหน่งของข้อมลู \" >, <tr align=\"ตำแหนง่ ของขอ้ มูล\">, <td align=\"ตำแหนง่ ของข้อมลู \"> ค่าที่กำหนดให้ใช้ ตำแหน่งของข้อมลู ไดแ้ ก่ center (กลาง), left (ซ้าย), right (ขวา) และ justify (เต็มช่อง) ตวั อย่างการจัดตำแหนง่ ขอ้ มูลแนวนอน <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table width=\"40%\" border=\"1\" align=\"center\"> <tr align=\"center\"><th>หัวเร่ือง1</th><th>หวั เร่อื ง2</th></tr> <tr align=\"center\"><td>ขอ้ มลู 1</td><td>ข้อมลู 2</td></tr> <tr align=\"center\"><td>ขอ้ มูล3</td><td>ข้อมูล2</td></tr> </table> </body> </html> ผลลพั ธท์ ีไ่ ด้

รปู แบบแทก็ HTML <td vlign=\"ตำแหนง่ ของขอ้ มลู \"> คา่ ท่กี ำหนดใหใ้ ช้ ตำแหนง่ ของข้อมลู ได้แก่ baseline (ตามเสน้ ฐาน), bottom (ชดิ ลา่ ง), middle (กลาง) และ top (ชิดบน), right (ขวา) และ justifty (เต็มช่อง) ตัวอยา่ งการจัดตำแหน่งข้อมลู แนวตงั้ <html> <head> <title>การสร้างตาราง</title> </head> <body> <table width=\"100%\" height=\"50%\" border=\"2\"> <tr> <td valign=\"baseline\">Baseline</td> <td valign=\"top\">top</td> <td valign=\"middle\">middle</td> <td valign=\"bottom\">bottom</td> </tr> </table> </body> </html> ผลลัพธท์ ่ีได้

การใส่รูปภาพในตาราง <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <b>การแทรกรูปภาพในตาราง</b><br /> <table border=\"1\" bordercolor=\"pink\"> <tr> <td><img src=\"bg1.jpg\" /></td> <td><img src=\"bg2.jpg \" /></td> </tr> </table> </body> </html> ผลลพั ธท์ ่ีได้

การกำหนดความกวา้ งของคอลัมน์ รูปแบบแทก็ HTML <colgroup span=\"จำนวน\" width=\"ความกว้าง\">…</colgroup> ค่าทก่ี ำหนดให้ใช้ span จำนวนคอลัมนท์ ใ่ี ชก้ ำหนดความกวา้ ง width ความกวา้ งของคอลมั น์มหี นว่ ยเป็น % หรือพกิ เซล ตวั อย่างการใช้งาน <html> <head> <title>การสร้างตาราง</title> </head> <body> <table border=\"1\"> <colgroup span=\"2\" width=\"150\"></colgroup> <tr> <td>ขอ้ มลู 1</td><td>ข้อมลู 2</td><td>ข้อมลู 3</td> <td>ขอ้ มลู 4</td><td>ขอ้ มลู 5</td><td>ข้อมลู 6</td> </tr> </table> </body> </html> ผลลพั ธท์ ่ไี ด้

การแบ่งเสน้ ตาราง <thead>, <tfoot>, <tbody> การแบ่งส่วนตาราง เราสามารถทำได้ 3 ส่วนคอื แทก็ thead (Table Header) ส่วนของหวั ตาราง แทก็ tbody (Table Body) สว่ นของขอ้ มลู ในตาราง แท็ก tfoot (Table Footer) สว่ นของสรปุ รวมข้อมลู ในตาราง โดยทง้ั สามส่วนเราไมต่ ้องเรียงลำดบั กันก็ได้ เชน่ อาจวางแท็ก tfoot มากอ่ นแทก็ tbody ก็ได้ แตต่ อนแสดงผล บราวเซอรจ์ ะจดั แทก็ tfoot ไว้ขา้ งลา่ งสุด ลักษณะของแทก็ ท้ัง 3 ประการจะเป็นดงั นี้ รูปแบบแท็ก HTML <thead><tr><td>…</td></tr></thead> <tbody><tr><td>…</td></tr></tbody> <tfoot><tr><td>…</td></tr></tfoot> ตัวอยา่ งการใชง้ าน <html> <head> <title>การสรา้ งตาราง</title> </head> <body> <table border=\"1\" width=\"30%\"> <thead bgcolor=\"#6699FF\"> <tr> <td>ส่วนหัว1</td><td>สว่ นหัว2</td> </tr> </thead> <thead bgcolor=\"#00FFFF\"> <tr> <td>ข้อมลู 1</td><td>ข้อมลู 2</td> </tr> <tr> <td>ข้อมลู 3</td><td>ข้อมลู 4</td></tr></tbody> <tfoot bgcolor=\"EEEEEE\"> <tr><td>ส่วนล่าง1</td><td>สว่ นลา่ ง2</td></tr></tfoot> </table> </body> </html>

ผลลพั ธท์ ี่ได้ การแบ่งตารางเปน็ ส่วน ๆ ทำใหส้ ามารถจดั รปู แบบ ตกแต่งตารางได้งา่ ย โดยสามารถกำหนดรปู แบบตวั อักษร ขนาดตัวอกั ษร สีตัวอักษร สพี นื้ หลงั ฯลฯ โดยจะทำให้ข้อมลู ส่วนนน้ั แสดงผลทง้ั หมด อีกทง้ั ยงั สามารถกำหนดรปู แบบ การแสดงผลข้อมลู ได้อยา่ งเหมาะสมอีกดว้ ย