Show
˹���á �йӺ����¹ �������¹���������� ��дҹ����ͺ ���Ѳ�� :: ������ѡ :: ˹��·�� 6 ������ҧ���ҧ (Table) �Ӫ��ᨧ
1. �硤���觵�����㴵��仹�� �����������ҧ���ҧ? �. td �. th �. table �. tr 2. �硤����㴷����㹡�����ҧ�����Ѻ��ҧ? �. td �. th �. table �. tr 3. �ͷ��Ժ�ǵ�㴵��仹�� ��Ǻ���������ҧ��������������Ѻ��鹢ͺ �. cellspacing �. cellpadding �. border �. width 4. ��㴵��仹������㹡�á�˹���Ǣ�����Ѻ���ҧ ? �. td �. th �. table �. tr 5. ��㴵��仹�� ������˹���Ժ�����Ѻ���ҧ? �. name �. cellpadding �. caption �. img 6. ��ҵ�ͧ����������ŧ㹵��ҧ ��ͧ����ŧ����? �. td �. th �. table �. tr 7. ��ҵ�ͧ��ü�ҹ������ǵ�� ��ͧ���ͷ��Ժ�ǵ�㹢���? �. rowspan �. colspan �. cellpandding �. cellspacing 8. ��ҵ�ͧ��á�˹����˹觢������������������ҹ����ͧ�� �ͷ��Ժ�ǵ��? �. align �. valign �. top �. bottom 9. ��ҵ�ͧ��á�˴��վ����ѧ���Ѻ���ҧ ��ͧ���ͷ��Ժ�ǵ��? �. background-color �. background �. bgimg �. bgcolor 10. �����繡�û�Ѻ��Ҵ�ͧ���ҧ��駵��ҧ����դ������ҧ�� 70% �ͧ˹�Ҩͺ������� ? �. <table width="70%"> �. <table border="70"> �. <table height="70%"> �. <table align="70"> ���䫵���Ѵ�Ӣ�����ͻ�Сͺ��èѴ������¹���������͢����Թ������
(��º���Է���) จากบทความที่แล้ว เราได้รู้จัก คำสั่ง HTML ในการใส่รูปภาพลงในเว็บเพจและการสร้างลิงค์เว็บไซต์ บทเรียนนี้เราจะมาเรียนรู้คำสั่ง List และการสร้างตาราง ในเว็บเพจถ้าเรามีข้อมูลเยอะและอยากให้ข้อมูลแสดงแบบลำดับรายการหรือแบ่งเป็นหัวข้อย่อยๆ แบบเรียงลำดับหรือที่เรียกว่า Bullet เราจะใช้คำสั่ง List ช่วยในการจัดการข้อมูลของเราได้ และถ้าเว็บเพจของเรามีการนำเสนอข้อมูลจำนวนมาก เช่น การสรุปปริมาณสินค้าหรือยอดขายเราควรจะใช้รูปแบบตารางเข้ามาจัดการ เพื่อให้ดูง่ายและเป็นระเบียบมากขึ้น คำสั่ง HTML การสร้างข้อมูลในรูปแบบรายการ (List)การจัดการเนื้อหาของบทความก็นับว่าสำคัญเป็นอย่างมากในการนำเสนอข้อมูล เพื่อให้ผู้อ่านได้อ่านบทความที่เป็นระเบียบและง่ายต่อการจดจำ หรือแม้การจัดหัวข้อย่อยต่างๆ ให้เป็นลำดับก็ทำให้ข้อมูลเป็นระเบียบน่าอ่านขึ้นเช่นเดียวกัน การสร้างข้อมูลในรูปแบบรายการที่นิยมนำมาใช้งานกัน มีอยู่อยู่ด้วยกัน 2 รูปแบบคือ
คำสั่งแต่ละรูปแบบมีข้อดีอย่างไร และแต่ละรูปแบบมีการใช้งานที่แตกต่างกันอย่างไรบ้าง เราไปดูกันเลย การสร้างรายการแบบไม่มีลำดับ (Unordered Lists)การสร้างข้อมูลรายการแบบไม่มีลำดับ หรือ Unordered List เป็นการจัดรายการโดยมีสัญลักษณ์กำกับหน้ารายการ จะใช้กรณีที่ต้องการจัดการรายการเป็นข้อๆ แต่ไม่ต้องการจัดเรียงรายการให้มีตัวเลขเรียงลำดับ จะมีประเภทของสัญลักษณ์ที่ใช้กำกับหน้ารายการ โดยการกำหนดชนิดของสัญลักษณ์ได้ด้วย Attribute ชื่อ “type” ที่เรากำหนด แต่ถ้าไม่มีการกำหนดประเภทให้กับรายการ สัญลักษณ์ที่จะแสดงตั้งต้น (Defult) จะเป็นแบบ Disc หรือวงกลมทึบนั่นเอง รูปแบบ Tag คือ จะเริ่มต้นด้วย <ul> และปิดท้ายด้วย </ul> ส่วนข้อมูลของเนื้อหาแต่ละรายการจะใส่ด้านในของ Tag <li> ซึ่งจะเปิดด้วย <li> และปิดด้วย </li> รูปแบบ
ตัวอย่างโค้ด See the Pen การสร้างรายการแบบไม่มีลำดับ(Unordered Lists) by supaporn (@asria) on CodePen. การสร้างรายการแบบมีลำดับ (Ordered Lists)การสร้างข้อมูลรายการแบบมีลำดับ (Ordered List) เป็นการนำเสนอข้อมูลแบบมีลำดับขั้นตอนอย่างชัดเจน โดยสามารถกำหนดชนิดของตัวจัดลำดับได้ด้วย Attribute ชื่อ “type” แต่ถ้าไม่ได้กำหนดรูปแบบการแสดงผลบราวเซอร์จะกำหนดให้รายการเป็นตัวเลขให้ทันที รูปแบบ Tag คือ จะเริ่มต้นด้วย <ol> และปิดท้ายด้วย </ol> ส่วนข้อมูลของเนื้อหาแต่ละรายการจะใส่ด้านในของ Tag <li> ซึ่งจะเปิดด้วย <li> และปิดด้วย </li> รูปแบบ
ตัวอย่างโค้ด See the Pen การสร้างรายการแบบมีลำดับ (Ordered List) by supaporn (@asria) on CodePen. สรุปคำสั่งการสร้างข้อมูลในรูปแบบรายการ (List) การสร้างรายการใน HTML เหมาะกับข้อมูลที่จะทำรายการเป็นข้อๆ แบบมีลำดับหรือไม่มีลำดับก็ได้ ซึ่งทำให้ข้อมูลเรียงกันดูเป็นระเบียบเรียบร้อย ยังไงเพื่อนๆ ลองฝึกเขียนโค้ดตามตัวอย่างที่แนะนำไปจะได้เข้าใจมากขึ้น คำสั่ง HTML การสร้างตาราง (Table)การใช้ตารางเหมาะสำหรับการนำเสนอข้อมูลจำนวนมาก เช่น ข้อมูลการซื้อขายหลักทรัพย์ ยอดขายสินค้า สรุปปริมาณสินค้าในคลังหรือการเปรียบเทียบข้อมูล เป็นต้น โดยที่ข้อมูลแต่ละส่วนจะมีความสัมพันธ์ซึ่งกันและกันในลักษณะแนวนอนหรือแถว (Row) และแนวตั้งหรือคอลัมน์ (Column) การแสดงข้อมูลในรูปของตารางจะช่วยให้เป็นระเบียบและเข้าใจได้ง่ายขึ้นนั้นเอง คำสั่ง HTML สำหรับการสร้างตาราง มี Tags ที่สำหคัญในการใช้ทำตารางอยู่หลายอย่าง ซึ่งแต่ละแบบก็จะทำหน้าที่แตกต่างกันออกไป และ Tag บางอย่างเราอาจจำเป็นต้องใช้ในการจัดรูปแบบให้กับตารางของเราด้วย
เรามาดูทีละคำสั่งกันเลยว่าการใช้งานแต่ละแบบมีการทำงานอย่างไรบ้าง โครงสร้างและคำสั่งในการสร้างตาราง (Table)โครงสร้างของตารางนั้นจะประกอบไปด้วยแถว (Row) และคอลัมน์ (Column) โดยช่องข้อมูลที่อยู่ในแนวนอนคือ “แถว” และช่องข้อมูลที่อยู่ในแนวตั้งคือ “คอลัมน์” โดยแต่ละช่องของตารางจะเรียกว่า เซลล์ (Cell) มีรูปแบบการใช้งานตามตัวอย่างโค้ดด้านล่างนี้ รูปแบบ
ตัวอย่างโค้ด See the Pen การสร้างตาราง(Table) by supaporn (@asria) on CodePen. จากตัวอย่างโค้ดด้านบน เป็นการสร้างข้อมูลตารางที่มีจำนวนแถวเท่ากับ 3 แถว และจำนวนคอลัมน์เท่ากับ 3 คอมลัมน์ ซึ่งจะเป็นการสร้างข้อมูลตารางแบบทั่วไปที่ไม่ได้มีการปรับรูปแบบสไตล์อื่นๆ เลย ส่วนการใช้งาน Tag จะใช้แท็ก table, th, tr และ td ซึ่งสามารถเลื่อนดูในหัวข้อด้านล่างต่อไปได้เลย การเพิ่มหัวข้อตาราง (Table Headers)เป็นการกำหนดส่วนหัวให้กับตาราง จะถูกกำหนดโดยแท็ก <th> และ </th> โดยแท๊ก <th> เมื่อรันบนเบราว์เซอร์จะแสดงผลลัพธ์เป็นตัวหนา รูปแบบ
ตัวอย่างโค้ด See the Pen การเพิ่มหัวข้อตาราง (Table Headers) by ASRIA (@asria) on CodePen. การเพิ่มแถวตาราง (Table Rows)การเพิ่มแถวในตารางหรือเรียกอีกอย่างว่าเป็นการเพิ่มแถวในแนวนอนก็ได้ แต่ละแถวของตารางจะเขียนคำสั่งที่เริ่มต้นด้วย Tag <tr> และลงท้ายด้วย </tr> รูปแบบ
ตัวอย่างโค้ด See the Pen การเพิ่มแถวตาราง (Table Rows) by ASRIA (@asria) on CodePen. จากตัวอย่างด้านบน จะเห็นว่ามี Tag <tr> ทั้งหมดสองชุด เท่ากับว่ามีแถวทั้งหมด 2 แถวนั่นเอง การเพิ่มคอลัมน์ (Table Cells หรือ Table Data)การเพิ่มคอลัมน์หรือเรียกอีกอย่างว่าเป็นการเพิ่มแถวในแนวตั้งก็ได้ แต่ละเซลล์ของตารางจะถูกกำหนดโดยแท็ก <td> และ </td> ส่วนข้อมูลเนื้อหาจะอยู่ระหว่าง <td> และ </td> ดังรูปแบบด้านล่างนี้ รูปแบบ
ตัวอย่างโค้ด See the Pen การเพิ่มคอลัมน์ (Table Cells หรือ Table Data) by ASRIA (@asria) on CodePen. จากตัวอย่างด้านบน จะเห็นว่ามี <td> ที่อยู่ด้านใน Tag <tr> มีทั้งหมดสองชุด เท่ากับว่ามีคอลัมน์ในตารางนี้จะทั้งหมด 2 คอลัมน์นั่นเอง การกำหนดชื่อหรือคำอธิบายตาราง (Table caption)การกำหนดชื่อหรือคำอธิบายตาราง เป็นการเพิ่มคำอธิบายภายในตารางว่าเป็นตารางเกี่ยวกับอะไร จะใส่หรือไม่ใส่ก็ได้ ซึ่งต้องใส่แท็ก <caption> ที่ต่อจาก Tag <table> ค่าเริ่มต้นหากใส่ Tag แล้ว คำอธิบายของตารางจะจัดให้อยู่กึ่งกลางเหนือตารางเสมอ อย่างไรก็ตามเราสามารถใช้ CSS ในการการจัดข้อความและคำอธิบายได้ รูปแบบ
ตัวอย่างโค้ด See the Pen การกำหนดชื่อหรือคำอธิบายตาราง (Table caption) by ASRIA (@asria) on CodePen. กำหนดกลุ่มของคอลัมน์ในตาราง (Table columns group) สำหรับการจัดรูปแบบการกำหนดกลุ่มของคอลัมน์ในตาราง เป็นการระบุกลุ่มของคอลัมน์ตั้งแต่หนึ่งคอลัมน์ขึ้นไปในตารางสำหรับการจัดรูปแบบข้อมูลของตารางหรือข้อมูลในตารางนั่นเอง ข้อดีของการจัดกลุ่มของคอลัมน์คือเราไม่ต้องจัดรูปแบบทีละคอลัมน์ แต่ถ้ามีข้อมูลคอลัมน์ที่ต้องแสดงรูปแบบที่เหมือนกันก็สามารถจัดกลุ่มของคอลัมน์ได้ในครั้งเดียวเลย รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดกลุ่มของคอลั่มในตาราง สำหรับการจัดรูปแบบ (Table columns group) by ASRIA (@asria) on CodePen. จากตัวอย่างด้านบน จะเห็นได้ว่ามีการจัด Group ของสองคอลัมน์แรกให้มีรูปแบบข้อมูล Background สีเทา และให้คอลัมน์ที่สามมี Background สีแดงนั่นเอง กำหนดคุณสมบัติให้กับคอลัมน์ (Table columns)กำหนดคุณสมบัติให้กับคอลัมน์จะเป็นการใช้คุณสมบัติร่วมกับ กำหนดกลุ่มของคอลัมน์ในตาราง (Table columns group) ดังนั้นรูปแบบและตัวอย่างโค้ดก็จะเหมือนกันเลย รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดกลุ่มของคอลั่มในตาราง สำหรับการจัดรูปแบบ (Table columns group) by ASRIA (@asria) on CodePen. กำหนดกลุ่มของเนื้อหาของตาราง (Table with the group of content)เป็นการกำหนดกลุ่มของเนื้อหาแต่ละส่วนให้กับตาราง เช่น ส่วนหัว ส่วนเนื้อหา และส่วนท้ายของตาราง โดยส่วนหัวจะถูกกำหนดโดยแท็ก <thead> และ </thead> ส่วนเนื้อหาจะถูกกำหนดโดยแท็ก <tbody> และ </tbody> และส่วนท้ายของเนื้อหาจะถูกกำหนดโดยแท็ก <tfoot> และ </tfoot> รูปแบบ
ตัวอย่างโค้ด See the Pen กำหนดกลุ่มของเนื้อหาส่วนหัวของตาราง (Table group header) by ASRIA (@asria) on CodePen. จากตัวอย่างโค้ดด้านบนจะเห็นได้ว่า <thead> จะครอบส่วนที่เป็นหัวข้อในแถวแรก, <tbody> จะครอบส่วนของเนื้อหาว่ามีเนื้อหาอะไรบ้างหรือกี่รายการ ส่วน <tfoot> จะเป็นส่วนท้ายสุดที่บ่บอกว่านี่คือข้อมูลในส่วนท้ายสุดนั่นเอง การกำหนดเส้นขอบของตาราง (Table Borders)การกำหนดเส้นขอบของตารางนั้นเพื่อความสวยงามของเว็บเพจ ดูง่ายขึ้น การกำหนดเส้นขอบของตารางสามารถทำได้โดยการกำหนด Attribute ที่ชื่อ “border” ในการกำหนดขนาดของเส้นขอบ และการกำหนด Attribute ที่ชื่อ “bordercolor” ในการกำหนดสีของเส้นขอบ โดยมีรูปแบบการใช้งานคำสั่งดังนี้ รูปแบบ
ตัวอย่างโค้ด See the Pen
จากตัวอย่างด้านบน จะเป็นการเพิ่มเส้นขอบของตารางให้ border เท่ากับ 1 และกำหนดให้สีของเส้นขอบเป็นสีแดงโดยการเพิ่ม bordercolor ให้เป็นสีแดง การรวมเซลล์ของแถวและคอลัมน์ (Table Colspan & Rowspan)รูปแบบคำสั่งในการรวมเซลล์ของคอลัมน์จะใช้คำสั่ง colspan ดังรูปแบบด้านล่าง
รูปแบบคำสั่งในการรวมเซลล์ของแถวจะใช้คำสั่ง rowspan ดังรูปแบบด้านล่าง
ตัวอย่างโค้ด See the Pen สรุปคำสั่งในการสร้างตาราง HTMLมีข้อดีหลายอย่าง เช่น ข้อมูลเป็นระเบียบ จัดการข้อมูลที่มีขนาดเยอะได้ สามารถทำให้เราจัดรูปแบบตารางได้ตรงตามต้องการ และสามารถประยุกต์ไปใช้กับรูปแบบข้อมูลเว็บเพจเราได้อีกด้วย สรุป
สิ่งที่ได้รับ ใครที่ยังไม่ได้บทความก่อนหน้าของเรา อย่าลืมกลับไปอ่านด้วยน๊าาา รวมคำสั่ง HTML ในการใส่รูปภาพลงในเว็บเพจและการสร้างลิงค์เว็บไซต์ |