หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

การสอน HTML: 10 แท็กที่เกี่ยวข้องกับตารางสำหรับ HTML

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-05-23 01:00:03

จากการปฏิบัติล่าสุดของฉันและหลังจากสื่อสารกับผู้อ่านบางคนเกี่ยวกับการใช้แบบฟอร์ม HTML ฉันตัดสินใจเขียนบทความนี้ โดยรวมแล้วฉันสังเกตเห็นว่าพวกเขามีความขยะแขยงกับการใช้ตารางเนื่องจากข้อมูลที่ทำให้เข้าใจผิด ในความเป็นจริงหลายคนจะบอกว่าฉันเห็นคำแถลงว่าฉันไม่ควรใช้แบบฟอร์ม แต่มันผิดอย่างแน่นอน! ข้อเสนอแนะนี้มีไว้สำหรับการใช้ตาราง HTML เพื่อกำหนดเค้าโครงของหน้าเว็บ แต่ตารางนั้นสมบูรณ์แบบสำหรับการจัดเรียงแถวและคอลัมน์ข้อมูลที่สะดวกและหากคุณต้องแสดงข้อมูลคอลัมน์ตารางบนหน้าคุณต้องใช้มัน! ทำไมไม่? อย่างไรก็ตามในกรณีนี้บางคนไม่สนใจการมีอยู่ของแท็ก HTML บางอย่างที่ใช้สำหรับตารางและไม่ทราบวิธีการใช้อย่างถูกต้อง

HTML มีแท็กที่เกี่ยวข้องกับตาราง 10 แท็ก นี่คือรายการที่มีการแนะนำ แต่ก่อนอื่นเอกสารควรกำหนดอย่างถูกต้องด้านล่าง HTML 4.01/XHTML 1 หรือ HTML 5:

  • <Caption> กำหนดชื่อตาราง (4, 5)
  • <ol> กำหนดคุณลักษณะสำหรับคอลัมน์ของตาราง (4, 5)
  • <Colgroup> กำหนดการจัดกลุ่มของคอลัมน์ตาราง (4, 5)
  • <bable> กำหนดตาราง (4, 5)
  • <Tbody> กำหนดตัวตาราง (4, 5)
  • <td> กำหนดเซลล์ (4, 5)
  • <tfoot> กำหนดหมายเหตุตาราง (ด้านล่าง) (4, 5)
  • <th> กำหนดส่วนหัวของตาราง (4, 5)
  • <head> กำหนดส่วนหัวของตาราง (4, 5)
  • <tr> กำหนดแถวของตาราง (4, 5)

โครงสร้างตารางพื้นฐานมีดังนี้:

มันมีชื่อ, หัว, ร่างกายและด้านล่าง ลำดับที่ถูกต้องขององค์ประกอบ HTML คือ:

  1. <table>
  2. <คำอธิบาย>
  3. <head>
  4. <tfoot>
  5. <tbody>

นอกจากนี้คุณยังสามารถใช้ <ol> และ <olgroup> เพื่อกำหนดคอลัมน์ของตารางหรือคอลัมน์กลุ่ม:

  1. <table>
  2. <คำอธิบาย>
  3. <Colgroup>
  4. <col>
  5. <head>
  6. <tfoot>
  7. <tbody>

นี่คือตัวอย่างที่ถูกต้องของโครงสร้างตาราง:

 <table border = 1> <คำอธิบาย> คำบรรยายภาพตารางที่นี่ </section> <colgroup span = 1 style = background: #dedede;/> <colgroup span = 2 style = พื้นหลัง: #efefef;/> <! footer-> <tfoot> <tr> <td> ฟุต 1 </td> <td> เท้า 2 </td> <td> เท้า 3 </td> </tfoot> <!-ร่างกายตาราง-> <tbody> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> d </td> <td> e </td> <td> f </td>

ผลลัพธ์ในเบราว์เซอร์จะแสดงในรูปด้านล่าง:

เคล็ดลับในแบบฟอร์ม

  • ตามคำอธิบายและการใช้งานของ W3Schools ในคำจำกัดความของตาราง องค์ประกอบ <tfoot> จะต้องปรากฏขึ้นก่อน <tbody> เพื่อให้เบราว์เซอร์สามารถแสดงบันทึกตารางก่อนที่จะรับข้อมูลทั้งหมด นอกจากนี้หากไม่ใช่คำสั่งนี้มันจะ ไม่ได้ รับการตรวจสอบโดย HTML4 และ XHTML ของ W3C ไม่ว่าคุณจะประกาศ DTD แบบไหนก็ตาม
  • ใน HTML 4.01 คุณสมบัติ การจัดตำแหน่ง และ BGColor ของตารางไม่ได้รับการสนับสนุนดังนั้นจึงไม่มีการรองรับตารางที่ได้รับการสนับสนุนใน HTML 5 (อันที่จริงแล้วคุณสมบัติการจัดแนวและ BGCOLOR ไม่ได้รับการสนับสนุนใน XHTML 1.0 DTD ที่เข้มงวด);
  • เบราว์เซอร์กระแสหลักทั้งหมดรองรับแท็ก <olgroup> แต่ Firefox, Chrome และ Safari รองรับเฉพาะแอตทริบิวต์ช่วงและความกว้างขององค์ประกอบ colgroup;
  • เซลล์ว่างเปล่า: แสดง | ซ่อนใน CSS สามารถตั้งค่าได้ว่าเซลล์เปล่าจะแสดงเส้นขอบหรือไม่ โปรดทราบว่าสิ่งนี้ จะต้องตั้งค่าในตารางแทน TD/TH ปัญหานี้มีแนวโน้มที่จะพบใน IE6;
  • การล่มสลายของชายแดน: การล่มสลาย | แยกใน CSS สามารถตั้งค่าได้ว่าเส้นขอบของตารางถูกรวมเข้ากับชายแดนหรือไม่
  • คุณสมบัติระยะห่างของเส้นขอบใน CSS เทียบเท่ากับคุณสมบัติการตรวจสอบเซลล์ของตาราง

เพื่อให้ตระหนักถึงรูปแบบการพัฒนาของประสิทธิภาพและการแยกโครงสร้างที่สนับสนุนโดยการสังเกตส่วนหน้าแนะนำว่าทุกสิ่งที่เกี่ยวข้องกับเลเยอร์การนำเสนอในหน้าจะถูกควบคุมโดย CSS และไม่ใช้แอตทริบิวต์ที่จัดทำโดย HTML เพื่อควบคุมประสิทธิภาพของหน้าและตารางเป็นวิธีที่ง่ายที่สุดที่จะเพิกเฉย

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับตารางโปรดตรวจสอบเอกสาร W3C: W3 บทนำสู่ตาราง

ในที่สุดฉันจะทิ้งคำถามง่าย ๆ ให้คุณ คุณลักษณะใดของ CSS เทียบเท่ากับแอตทริบิวต์ CellPadding ของตาราง

บทความที่เกี่ยวข้อง