1. �硤���觵�����㴵��仹�� �����������ҧ���ҧ? �. td �. th �. table �. tr2. �硤����㴷����㹡�����ҧ�����Ѻ��ҧ? �. td �. th �. table �. tr3. �ͷ��Ժ�ǵ�㴵��仹�� ��Ǻ���������ҧ��������������Ѻ��鹢ͺ �. cellspacing �. cellpadding �. border �. width4. ��㴵��仹������㹡�á�˹���Ǣ�����Ѻ���ҧ ? �. td �. th �. table �. tr5. ��㴵��仹�� ������˹���Ժ�����Ѻ���ҧ? �. name �. cellpadding �. caption �. img6. ��ҵ�ͧ����������ŧ㹵��ҧ ��ͧ����ŧ����? �. td �. th �. table �. tr7. ��ҵ�ͧ��ü�ҹ������ǵ�� ��ͧ���ͷ��Ժ�ǵ�㹢���? �. rowspan �. colspan �. cellpandding �. cellspacing8. ��ҵ�ͧ��á�˹����˹觢������������������ҹ����ͧ�� �ͷ��Ժ�ǵ��? �. align �. valign �. top �. bottom9. ��ҵ�ͧ��á�˴��վ����ѧ���Ѻ���ҧ ��ͧ���ͷ��Ժ�ǵ��? �. background-color �. background �. bgimg �. bgcolor10. �����繡�û�Ѻ��Ҵ�ͧ���ҧ��駵��ҧ����դ������ҧ�� 70% �ͧ˹�Ҩͺ������� ? �.
ยาสีฟัน | กรุงเทพฯ | 500,000 |
สบู่ | นครราชสีมา | 420,000 |
ตัวอย่างโค้ด
See the Pen การเพิ่มหัวข้อตาราง (Table Headers) by ASRIA (@asria) on CodePen.
การเพิ่มแถวตาราง (Table Rows)
การเพิ่มแถวในตารางหรือเรียกอีกอย่างว่าเป็นการเพิ่มแถวในแนวนอนก็ได้ แต่ละแถวของตารางจะเขียนคำสั่งที่เริ่มต้นด้วย Tag และลงท้ายด้วย
รูปแบบ
Emil | Telephone |
admin@gmail.com | 081-000-5555 |
ตัวอย่างโค้ด
See the Pen การเพิ่มแถวตาราง (Table Rows) by ASRIA (@asria) on CodePen.
จากตัวอย่างด้านบน จะเห็นว่ามี Tag ทั้งหมดสองชุด เท่ากับว่ามีแถวทั้งหมด 2 แถวนั่นเอง
การเพิ่มคอลัมน์ (Table Cells หรือ Table Data)
การเพิ่มคอลัมน์หรือเรียกอีกอย่างว่าเป็นการเพิ่มแถวในแนวตั้งก็ได้ แต่ละเซลล์ของตารางจะถูกกำหนดโดยแท็ก และ ส่วนข้อมูลเนื้อหาจะอยู่ระหว่าง และ ดังรูปแบบด้านล่างนี้
รูปแบบ
Emil | Telephone |
ตัวอย่างโค้ด
See the Pen การเพิ่มคอลัมน์ (Table Cells หรือ Table Data) by ASRIA (@asria) on CodePen.
จากตัวอย่างด้านบน จะเห็นว่ามี ที่อยู่ด้านใน Tag มีทั้งหมดสองชุด เท่ากับว่ามีคอลัมน์ในตารางนี้จะทั้งหมด 2 คอลัมน์นั่นเอง
การกำหนดชื่อหรือคำอธิบายตาราง (Table caption)
การกำหนดชื่อหรือคำอธิบายตาราง เป็นการเพิ่มคำอธิบายภายในตารางว่าเป็นตารางเกี่ยวกับอะไร จะใส่หรือไม่ใส่ก็ได้ ซึ่งต้องใส่แท็ก ที่ต่อจาก Tag ค่าเริ่มต้นหากใส่ Tag แล้ว คำอธิบายของตารางจะจัดให้อยู่กึ่งกลางเหนือตารางเสมอ อย่างไรก็ตามเราสามารถใช้ CSS ในการการจัดข้อความและคำอธิบายได้
รูปแบบ
Monthly savingsเดือนรายจ่ายมกราคม12,000 บาทกุมภาพันธ์1,150 บาทตัวอย่างโค้ด
See the Pen การกำหนดชื่อหรือคำอธิบายตาราง (Table caption) by ASRIA (@asria) on CodePen.
กำหนดกลุ่มของคอลัมน์ในตาราง (Table columns group) สำหรับการจัดรูปแบบ
การกำหนดกลุ่มของคอลัมน์ในตาราง เป็นการระบุกลุ่มของคอลัมน์ตั้งแต่หนึ่งคอลัมน์ขึ้นไปในตารางสำหรับการจัดรูปแบบข้อมูลของตารางหรือข้อมูลในตารางนั่นเอง ข้อดีของการจัดกลุ่มของคอลัมน์คือเราไม่ต้องจัดรูปแบบทีละคอลัมน์ แต่ถ้ามีข้อมูลคอลัมน์ที่ต้องแสดงรูปแบบที่เหมือนกันก็สามารถจัดกลุ่มของคอลัมน์ได้ในครั้งเดียวเลย
รูปแบบ
หนังสือสังคมศึกษา | 1 | 120 บาท |
ตัวอย่างโค้ด
See the Pen กำหนดกลุ่มของคอลั่มในตาราง สำหรับการจัดรูปแบบ (Table columns group) by ASRIA (@asria) on CodePen.
จากตัวอย่างด้านบน จะเห็นได้ว่ามีการจัด Group ของสองคอลัมน์แรกให้มีรูปแบบข้อมูล Background สีเทา และให้คอลัมน์ที่สามมี Background สีแดงนั่นเอง
กำหนดคุณสมบัติให้กับคอลัมน์ (Table columns)
กำหนดคุณสมบัติให้กับคอลัมน์จะเป็นการใช้คุณสมบัติร่วมกับ กำหนดกลุ่มของคอลัมน์ในตาราง (Table columns group) ดังนั้นรูปแบบและตัวอย่างโค้ดก็จะเหมือนกันเลย
รูปแบบ
หนังสือสังคมศึกษา | 1 | 120 บาท |
ตัวอย่างโค้ด
See the Pen กำหนดกลุ่มของคอลั่มในตาราง สำหรับการจัดรูปแบบ (Table columns group) by ASRIA (@asria) on CodePen.
กำหนดกลุ่มของเนื้อหาของตาราง (Table with the group of content)
เป็นการกำหนดกลุ่มของเนื้อหาแต่ละส่วนให้กับตาราง เช่น ส่วนหัว ส่วนเนื้อหา และส่วนท้ายของตาราง โดยส่วนหัวจะถูกกำหนดโดยแท็ก และ ส่วนเนื้อหาจะถูกกำหนดโดยแท็ก และ และส่วนท้ายของเนื้อหาจะถูกกำหนดโดยแท็ก และ
รูปแบบ
มกราคม | 100 บาท |
กุมภาพันธ์ | 80 บาท |
รวมรายจ่าย | 180 บาท |
ตัวอย่างโค้ด
See the Pen กำหนดกลุ่มของเนื้อหาส่วนหัวของตาราง (Table group header) by ASRIA (@asria) on CodePen.
จากตัวอย่างโค้ดด้านบนจะเห็นได้ว่า จะครอบส่วนที่เป็นหัวข้อในแถวแรก, จะครอบส่วนของเนื้อหาว่ามีเนื้อหาอะไรบ้างหรือกี่รายการ ส่วน จะเป็นส่วนท้ายสุดที่บ่บอกว่านี่คือข้อมูลในส่วนท้ายสุดนั่นเอง
การกำหนดเส้นขอบของตาราง (Table Borders)
การกำหนดเส้นขอบของตารางนั้นเพื่อความสวยงามของเว็บเพจ ดูง่ายขึ้น การกำหนดเส้นขอบของตารางสามารถทำได้โดยการกำหนด Attribute ที่ชื่อ “border” ในการกำหนดขนาดของเส้นขอบ และการกำหนด Attribute ที่ชื่อ “bordercolor” ในการกำหนดสีของเส้นขอบ โดยมีรูปแบบการใช้งานคำสั่งดังนี้