บทบาทของตารางคือการแสดงข้อมูลสองมิติ จะมีการแนะนำในภายหลัง) ส่วนใหญ่จะแนะนำองค์ประกอบ HTML สำหรับการสร้างตาราง
สร้างแบบฟอร์มองค์ประกอบพื้นฐานของแบบฟอร์มรวมถึง: Table, TR และ TD
ตารางแสดงตารางในเอกสาร HTML ที่รองรับแอตทริบิวต์เส้นขอบเพื่อกำหนดความกว้างของเฟรมเฟรม
TR แสดงถึงเส้นในตาราง
TD แสดงถึงเซลล์ในตารางรวมถึงแอตทริบิวต์ต่อไปนี้:
1) Colspan: จำนวนคอลัมน์ที่เซลล์สามารถข้ามได้
2) Rowspan: จำนวนแถวที่เซลล์สามารถข้ามได้
3) ส่วนหัว: มาตรฐานส่วนหัวที่เกี่ยวข้องกับหัวของเซลล์
<table> <tr> <td> แอปเปิ้ล </td> <td> สีเขียว </td> <td> สื่อ </td> </tr> <td> ส้ม </td> <td> สีส้ม </td> <td> ใหญ่ </td> </tr> </table>
ด้านบนกำหนดตารางสองบรรทัดและสามคอลัมน์
เส้นขอบโต๊ะการใช้แอตทริบิวต์เส้นขอบขององค์ประกอบตารางสามารถเพิ่มพรมแดนลงในตาราง
<border = 1> <tr> <td> แอปเปิ้ล </td> <td> สีเขียว </td> </tdium </td> </tr> <td> ส้ม </td> <td> สีส้ม </ td> <td> ขนาดใหญ่ </td> </tr> </table>
เส้นขอบเริ่มต้นของเบราว์เซอร์นั้นไม่สวยงามมากและมักจะต้องใช้ CSS เพื่อตั้งค่าสไตล์เฟรมสำหรับองค์ประกอบต่าง ๆ
ตารางที่ไม่สม่ำเสมอการใช้แอตทริบิวต์ Colspan และ Rowspan ของเซลล์สามารถสร้างตารางที่ผิดปกติเพื่อให้แถวหรือคอลัมน์ของตารางครอบคลุมหลายเซลล์
<table border = 1> <ter> <th> เดือน </th> <th> การออม </th> </tr> <td colorpan = 2> มกราคม </td> </tr> <ter> <td colorpan = 2> กุมภาพันธ์ </td> </tr> </table>
ต่อไปนี้เป็นตัวอย่างของเซลล์ที่ข้ามหลายบรรทัด:
<table border = 1> <ter> <th> เดือน </th> <th> การออม </th> </tr> <td> มกราคม </td> <td> $ 100.00 </td> <td rowspan = 2> $ 50 </td> </tr> <td> กุมภาพันธ์ </td> <td> $ 10.00 </td> </table>ศีรษะ
องค์ประกอบ Th ใช้เพื่อเพิ่มส่วนหัวในแบบฟอร์มซึ่งสามารถใช้เพื่อแยกความแตกต่างของข้อมูลและคำอธิบายของข้อมูล องค์ประกอบ th รองรับคุณลักษณะต่อไปนี้:
1) Colspan: จำนวนคอลัมน์ที่เซลล์สามารถข้ามได้
2) Rowspan: จำนวนแถวที่เซลล์สามารถข้ามได้
3) ขอบเขต: กำหนดวิธีการเชื่อมโยงข้อมูลส่วนหัวกับข้อมูลหน่วย
3) ส่วนหัว: รายการ ID ส่วนหัวคั่นด้วยพื้นที่มีข้อมูลส่วนหัวสำหรับเซลล์ข้อมูล
<table> <ter> <th> อันดับ </th> <th> ชื่อ </th> <th> สี </th> </th> </tr> <th> ที่ชื่นชอบ: ไม่/td> <td> Orange </td> <td> ขนาดใหญ่ </td> </tr> <ter> <th> สิ่งที่โปรดปรานอันดับ 3: </th> <td> pomegraanate </td> <td> ประเภทของ Greeny-red <// td> <td> แตกต่างกันไปตั้งแต่กลางถึงขนาดใหญ่ </td> </tr> </table>
TH และ TD สามารถใช้ในบรรทัด
ให้เซลล์เชื่อมโยงส่วนหัวการใช้แอตทริบิวต์ส่วนหัวของ TD สามารถเชื่อมโยงกับเซลล์ได้ แอตทริบิวต์ส่วนหัวอาจเป็นค่าแอตทริบิวต์ ID ของหนึ่งหรือมากกว่าเซลล์ TH:
<table border = 1 width = 100%> <ter> <th id = ชื่อ> ชื่อ </th> <th id = อีเมล> อีเมล </th> <th id = โทรศัพท์> โทรศัพท์> โทรศัพท์ </th> <th id = ที่อยู่> ที่อยู่ </th> </tr> <ter> <td headers = name> george bush </td> <td headers = อีเมล> [email protected] </td> <td Headers = โทรศัพท์> + 789451236 </td> <td Headers = ที่อยู่> Fifth Avenue New York, USA </td> </tr> </table>สร้างนาฬิกาที่ซับซ้อน
การใช้แอตทริบิวต์ colspan และ rowspan ของ Th สามารถสร้างตารางที่ซับซ้อน
<table border = 1> <tr> <th colspan = 2> บริษัท ในสหรัฐอเมริกา </th> </tr> <th> ชื่อ </th> <th> addr </th> </tr> tr> <td > Apple, Inc. </td> <td> 1 Loop Cupertino, CA 95014 </td> </tr> <td> Google, Inc. </td> 1600 Amphitheatre Parkway Mountain View, CA 94043 </td> </tr> </table>เพิ่มโครงสร้างลงในตาราง
คุณสามารถใช้องค์ประกอบ tbody และ tfoot เพื่อเพิ่มโครงสร้างลงในแบบฟอร์มเพื่อให้คุณสามารถเพิ่มสไตล์ CSS ให้กับแต่ละส่วนของแบบฟอร์มเพื่อให้ง่ายขึ้น
1) ธีมตาราง
องค์ประกอบ tbody แสดงถึงบรรทัดทั้งหมดของธีมของแบบฟอร์มไม่รวมส่วนหัว (การแสดงองค์ประกอบขององค์ประกอบ) และสกูตเตอร์ (การแสดงองค์ประกอบ tfoot)
โปรดทราบว่าเบราว์เซอร์ส่วนใหญ่จะแทรกองค์ประกอบ tbody โดยอัตโนมัติเมื่อประมวลผลองค์ประกอบตาราง
2) รูปแบบส่วนหัว
องค์ประกอบ TheAD ใช้เพื่อทำเครื่องหมายบรรทัดชื่อของแบบฟอร์ม หากไม่มีองค์ประกอบ TheAD องค์ประกอบ TR ทั้งหมดจะได้รับการพิจารณาว่าเป็นส่วนหนึ่งของเรื่องของแบบฟอร์ม
3) เพิ่มเชิงอรรถ
องค์ประกอบ Tfoot ใช้เพื่อทำเครื่องหมายเส้นของการขึ้นรูป ก่อนที่ HTML5 องค์ประกอบ TFOOT สามารถปรากฏขึ้นก่อนองค์ประกอบ tbody และใน HTML5 องค์ประกอบ tfoot ได้รับอนุญาตให้วางองค์ประกอบ tfoot หลังจาก tbody
ด้านล่างเป็นตัวอย่างที่ครอบคลุมซึ่งใช้องค์ประกอบ tbody, thead และ tfoot
<table> <d> <ter> <th> อันดับ </th> <th> ชื่อ </th> <th> สี </th> <th> ขนาด </th> </thead> </thead> tfoot> <ter> <th> อันดับ </th> <th> ชื่อ </th> <th> สี </th> </th> </tr> </tfoot> <tr> <ter> <th> รายการโปรด: <th> <td> แอปเปิ้ล </td> <td> สีเขียว </td> <em> สื่อ </td> </tr> <tr> <th> รายการโปรด 2nd: </th> <td> ส้ม </td> <td> สีส้ม </td> <td> ขนาดใหญ่ </td> </tr> <tr> <th> สิ่งที่โปรดปรานอันดับ 3: </th> <td> pomegraanate </td> <td> ชนิดหนึ่ง ของ Greeny-red </td> <td> แตกต่างกันไปตั้งแต่กลางถึงขนาดใหญ่ </td> </tr> </tbody> </table>เพิ่มชื่อลงในตาราง
การใช้องค์ประกอบคำบรรยายภาพสามารถกำหนดชื่อเรื่องสำหรับแบบฟอร์มและเชื่อมโยงกับแบบฟอร์ม
<Table> <ption> ผลลัพธ์ของการสำรวจผลไม้ 2011 </section> <thead> <tr> </th> <th> ชื่อ </th> </th> <th> ขนาด </th> </tr> </thead> <tfoot> <ter> <th> อันดับ </th> <th> ชื่อ </th> <th> สี </th> <th> ขนาด </th> ไม่ได้> <ter> <th> รายการโปรด 2nd: </th> <td> สีส้ม </td> <td> สีส้ม </td> <td> ขนาดใหญ่ </td> </tr> <trd ที่ชื่นชอบ: </th> <td> pomegranate </td > <td> ชนิดของสีเขียว-แดง </td> <td> แตกต่างกันไปตั้งแต่กลางถึงขนาดใหญ่ </td> </tbody> </table>
แบบฟอร์มสามารถมีองค์ประกอบคำบรรยายภาพไม่ใช่องค์ประกอบแรกของแบบฟอร์ม แต่จะแสดงอยู่เหนือตารางเสมอ
คอลัมน์ในตารางเนื่องจากตารางถูกสร้างขึ้นโดยบรรทัดการทำงานของคอลัมน์ไม่สะดวกเช่นรูปแบบนิยามของคอลัมน์ของแบบฟอร์ม คุณสามารถใช้องค์ประกอบ colgroup เพื่อระบุกลุ่ม
<html> <head> <style> #colryp1 {พื้นหลังสี: สีแดง} #colryp2 {พื้นหลังสี: สีเขียว; = 1> <colorp id = colorp1 span = 2> </colorp> <colorp id = colorp2> </colorp> <ter> </th> </th> </th> ไม่ใช่ td> <td> css แรกของฉัน </td> <td> $ 47 </td> </tr> </table> </body> </html>ตัวอย่างข้างต้นระบุกลุ่มของสองคอลัมน์ แอตทริบิวต์ของ Colgroup ระบุส่วนขยาย
<html> <head> <style> #colryp1 {พื้นหลังสี: สีแดง} #col3 {พื้นหลังสี: สีเขียว; border = 1> <colgroup id = colorp1> <col id = col1and2 span = 2/> <col id = color3/> </colorp> <ter> </th> <th> ชื่อเรื่อง </th> <th> ราคา </th> </tr> <l> <td> 3476896 </td> <td> html แรกของฉัน </td> <td> $ 53 </td> </tr> <td> 2489604 </td> <td> CSS แรกของฉัน </td> <td> $ 47 </td> </table> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้