ตาราง html: thead vs th


155

ดูเหมือนว่า (ตามตัวอย่างในหน้านี้ยังไงก็ตาม) ว่าถ้าคุณใช้ THEAD คุณไม่จำเป็นต้องใช้ TH

มันเป็นเรื่องจริงเหรอ? ถ้าเป็นเช่นนั้นข้อดี / ข้อเสียของ THEAD กับ TH คืออะไร?

คำตอบ:


124

<thead>แท็กจะใช้ในกลุ่มเนื้อหาส่วนหัวในตาราง HTML theadองค์ประกอบควรใช้ร่วมกับtbodyและtfootองค์ประกอบ

เพิ่มเติม: thead

คุณใช้<thead>ในการสรุปแค็บทั้งแถว (หรือแถว) เพื่อกำหนดให้เป็นส่วนหัวของตาราง ตามสเป็ค

"ส่วนนี้ช่วยให้ตัวแทนผู้ใช้สามารถรองรับการเลื่อนของส่วนตารางโดยไม่ขึ้นกับหัวตารางและเท้าเมื่อพิมพ์ตารางยาวข้อมูลหัวตารางและเท้าอาจถูกทำซ้ำในแต่ละหน้าที่มีข้อมูลตาราง"

<th>ในทางกลับกันจะใช้เพื่อจัดรูปแบบเซลล์เฉพาะเป็นเซลล์ส่วนหัวแทนที่จะเป็นเซลล์ข้อมูลธรรมดา


22
ฉันมักจะใช้พวกเขาทั้งสอง

11
นั่นเป็นหนึ่งในเว็บไซต์โบราณที่คุณเชื่อมโยงกับใน
masterxilo

ดูเพิ่มเติมที่: doc นักพัฒนาซอฟต์แวร์
Adrien Be

3
@masterxilo คุณคาดหวังอะไร HTML นั้นค่อนข้างโบราณ
Dan Bechard

1
@Kano คุณจะคัดค้านใครบางคนที่เชื่อมโยงไปยัง RFC อายุ 30 ปีที่ยังใช้อยู่หรือไม่? มันมีความสำคัญอย่างไรกับอายุของหน้าตราบใดที่ข้อมูลยังมีความเกี่ยวข้อง
jmbpiano

65

<th>จริง ๆ แล้วเป็นการแทนที่<td>เมื่อคุณต้องการทำเครื่องหมายเซลล์เป็นเซลล์ส่วนหัว

หากคุณต้องการที่จะใช้<thead>และ<th>ไม่ลืมที่จะทำรังอยู่ภายใน<th> <tr>มิฉะนั้นรหัสอาจไม่ถูกต้อง
ตัวอย่าง:

<table>
  <thead>
    <tr>
      <th>Season</th>
      <th>Goals</th>
      <th>Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th>2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>


2
นี่ไม่ได้ตอบคำถามเดิม แต่เป็นภาคผนวกที่มากกว่าและควรเป็นความคิดเห็นแทนคำตอบ
เจอรัลด์ชไนเดอร์

7
ฉันรู้ แต่ฉันมีคะแนนชื่อเสียงต่ำเกินไปที่จะโพสต์ความคิดเห็นดังนั้นฉันจึงพยายามโพสต์คำตอบ ฉันขอโทษความผิดของฉัน แต่กฎการให้บริการสแต็คทั้งหมดบางครั้งก็แปลกสำหรับฉัน
rflw

28
จริงๆแล้วคำตอบนี้เป็นคำเดียวที่แสดงการใช้ TH และ THEAD +1 สำหรับสิ่งนั้น!
barrypicker

4
หากคุณเขียน "ข้อดีคือthสามารถใช้ภายในtheadและภายในtbodyองค์ประกอบทั้งสองมีประโยชน์ในบริบทของตนเอง" นั่นตอบคำถาม ... เจอรัลด์กำลังจู้จี้จุกจิกเกี่ยวกับวิธีที่คุณเขียนคำตอบ แต่จริงๆแล้วมันเป็นคำตอบเดียวที่ให้ตัวอย่างที่มีความหมาย
CPHPython

1
ฉันไม่รู้ด้วยซ้ำว่าตัวหนาthจะได้รับค่าเริ่มต้นโดยไม่มี CSS พิเศษขอบคุณสำหรับสิ่งนั้น!
CPHPython

11

ththeadเป็นเฉพาะเจาะจงมากขึ้นกว่าสิ่งที่อาจอยู่ภายใน thมือถือคือการระบุส่วนหัวของที่สอดคล้องกันtdเซลล์ ในความเป็นจริงคุณสามารถเพิ่มแอheadersททริบิวไปยังtdเซลล์ที่ชี้ไปที่ id ของthเซลล์ (สำหรับโปรแกรมอ่านหน้าจอ) ดังนั้นthเกี่ยวข้องโดยตรงกับtds ของคอลัมน์นั้น

อย่างไรก็ตามtheadสามารถรวมข้อมูลใด ๆ ... โดยปกติใช่แล้วมันรวมthเซลล์ แต่ก็สามารถรวมสิ่งที่คุณอาจคิดว่าเหมาะสมตามข้อมูลที่ด้านบนของตาราง (นอกเหนือจากคำบรรยายภาพเพราะมีแท็กของตัวเองเป็น ดี).


6

<thead> เป็นสิ่งพิเศษที่สามารถใช้เพื่อทำซ้ำแถวส่วนหัวที่ด้านบนของหน้าในเวอร์ชันที่พิมพ์ออกมา


6

<thead>

แถวของตารางอาจถูกจัดกลุ่มเป็นส่วนหัวของตาราง, ส่วนท้ายตาราง, และส่วนของร่างกายตารางอย่างน้อยหนึ่งส่วนโดยใช้THEAD, TFOOTและTBODYองค์ประกอบตามลำดับ ส่วนนี้เปิดใช้งานตัวแทนผู้ใช้เพื่อสนับสนุนการเลื่อนของเนื้อหาตารางโดยไม่ขึ้นกับส่วนหัวและเท้าของตาราง เมื่อพิมพ์ตารางยาวข้อมูลส่วนหัวและเท้าของตารางอาจถูกทำซ้ำในแต่ละหน้าที่มีข้อมูลตาราง

ส่วนหัวของตารางและส่วนท้ายของตารางควรมีข้อมูลเกี่ยวกับคอลัมน์ของตาราง เนื้อความของตารางควรมีแถวของข้อมูลตาราง

เมื่อปรากฏแต่ละ THEAD, TFOOT และ TBODY จะมีกลุ่มแถว แต่ละกลุ่มแถวต้องมีอย่างน้อยหนึ่งแถวที่กำหนดโดยองค์ประกอบ TR

<th>

เซลล์ตารางอาจมีข้อมูลสองประเภท: ข้อมูลส่วนหัวและข้อมูล ความแตกต่างนี้ช่วยให้ตัวแทนผู้ใช้สามารถสร้างส่วนหัวและเซลล์ข้อมูลได้อย่างชัดเจนแม้ในกรณีที่ไม่มีสไตล์ชีท ตัวอย่างเช่นตัวแทนผู้ใช้ที่เป็นภาพอาจแสดงข้อความเซลล์ส่วนหัวด้วยแบบอักษรหนา เครื่องมือสังเคราะห์เสียงพูดอาจแสดงข้อมูลส่วนหัวด้วยการผันเสียงที่แตกต่างกัน

องค์ประกอบ TH กำหนดเซลล์ที่มีข้อมูลส่วนหัว ตัวแทนผู้ใช้มีข้อมูลส่วนหัวสองส่วน: เนื้อหาขององค์ประกอบ TH และค่าของแอตทริบิวต์ abbr ตัวแทนผู้ใช้จะต้องแสดงเนื้อหาของเซลล์หรือค่าของแอตทริบิวต์ abbr สำหรับสื่อโสตทัศน์สื่อหลังอาจเหมาะสมเมื่อมีพื้นที่ไม่เพียงพอที่จะแสดงเนื้อหาทั้งหมดของเซลล์ สำหรับสื่อที่ไม่ใช่ภาพ - abbr อาจถูกใช้เป็นตัวย่อสำหรับส่วนหัวของตารางเมื่อสิ่งเหล่านี้ถูกสร้างขึ้นพร้อมกับเนื้อหาของเซลล์ที่พวกเขาใช้

ที่มา: http://www.w3.org/TR/html4/struct/tables.html


3

เท่าที่ฉันสามารถบอกได้จากประสบการณ์ไม่มีความแตกต่างในการเรนเดอร์ยกเว้นว่าคุณใช้ CSS เพื่อระบุความแตกต่างในการเรนเดอร์ <td>ภายใน<thead>จะแสดงเช่นเดียวกับ<th>ภายในของหรือ<table><tbody>


องค์ประกอบ thead มีแถวเช่นกัน
DanMan

1
ฉันคิดว่าคุณหมายถึง<td>ภายในของ<thead>วาทกรรมเช่นเดียวกับ<th>ไม่ว่า<tr>จะ
frabjous

0

ไม่มีกฎที่ยากที่นี่ <thead>องค์ประกอบเป็นเพียงวิธีการอื่นเพื่อกลุ่มคอลัมน์และแถวของคุณเช่นเดียว<tbody>และ<tfoot>เป็น ดังนั้นคุณมีความเป็นไปได้มากขึ้นสำหรับการเขียนสคริปต์และการจัดรูปแบบ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.