เรามี<tbody>แท็กหลายแท็กเหมือนกันได้<table>ไหม ถ้าใช่แล้วในสถานการณ์ใดที่เราควรใช้หลาย<tbody>แท็ก
เรามี<tbody>แท็กหลายแท็กเหมือนกันได้<table>ไหม ถ้าใช่แล้วในสถานการณ์ใดที่เราควรใช้หลาย<tbody>แท็ก
คำตอบ:
ใช่คุณสามารถใช้พวกเขาได้เช่นฉันใช้พวกมันเพื่อจัดกลุ่มของข้อมูลได้ง่ายขึ้นเช่นนี้
thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5; border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>คุณสามารถดูตัวอย่างที่นี่ มันจะทำงานเฉพาะในเบราว์เซอร์ที่ใหม่กว่า แต่นั่นคือสิ่งที่ฉันสนับสนุนในแอปพลิเคชันปัจจุบันของฉันคุณสามารถใช้การจัดกลุ่มสำหรับ JavaScript และอื่น ๆ สิ่งสำคัญคือมันเป็นวิธีที่สะดวกในการจัดกลุ่มแถวต่างๆ . มีการใช้งานอื่น ๆ แน่นอน แต่เท่าที่เป็นตัวอย่างที่ใช้งานได้หนึ่งนี้เป็นที่พบมากที่สุดสำหรับฉัน
<tbody>ราวกับว่าพวกเขาเป็นหนึ่งใน เมื่อคุณเริ่มซ้อนตารางนั่นคือสิ่งที่มักจะให้ปัญหาการนำทางที่แท้จริงสำหรับโปรแกรมอ่านหน้าจอ
<tbody>องค์ประกอบหลายอย่างอธิบายกลุ่มแยกในตารางตามที่อธิบายไว้ในคำตอบ นอกจากนี้ฉันควรเพิ่มว่าโดยทั่วไปจะดีกว่าที่จะกำหนดเป้าหมายเซลล์สำหรับพื้นหลังดังนั้น CSS ควรเป็นตัวอย่างเช่นtbody:nth-child(odd) td { background: #f5f5f5; }
:nth-child()ใช้งานCSS สำหรับการสาธิตที่เชื่อมโยงหลายรายการ<tbody>จะทำงานในเบราว์เซอร์ใด ๆ
ใช่. จากDTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
ดังนั้นจึงคาดว่าอย่างน้อยหนึ่งรายการ จากนั้นจะพูดต่อไป
ใช้หลายส่วนลำตัวเมื่อ จำเป็นต้องใช้กฎระหว่างกลุ่มแถวของตาราง
tbodyองค์ประกอบที่จะมีการปรับ) ซาก. โดยเฉพาะคุณตอนนี้ได้รับอนุญาตให้ใส่หนึ่งtfootองค์ประกอบหลังจากtbodyถ้าคุณชอบ . (พวกเขาเรียบร้อยด้านก้าวด้าน DTD โดยบอกว่าพวกเขาไม่ได้ให้บริการ ) :-)
<tr>มันจึงอาจเป็นศูนย์ได้ (เช่น tbody หรือ tr หมายความว่ามันอาจเป็น tr และไม่มี tbody)
ตามตัวอย่างนี้ก็สามารถทำได้: w3-struct ตาราง
ปัญหาของ Martin Joiner เกิดจากความเข้าใจผิดของ<caption>แท็ก
<caption>แท็กคำอธิบายภาพกำหนดตาราง
<caption>แท็กจะต้องเป็นลูกคนแรกของ<table>แท็ก
คุณสามารถระบุได้เพียงหนึ่งคำบรรยายภาพต่อตาราง
นอกจากนี้โปรดทราบว่าscopeควรวางแอตทริบิวต์ใน<th>องค์ประกอบและไม่ควรอยู่ใน<tr>องค์ประกอบ
วิธีที่เหมาะสมในการเขียนตารางหลายหัวหลายส่วนจะเป็นดังนี้:
<table id="dinner_table">
<caption>This is the only correct place to put a caption.</caption>
<tbody>
<tr class="header">
<th colspan="2" scope="col">First Half of Table (British Dinner)</th>
</tr>
<tr>
<th scope="row">1</th>
<td>Fish</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Chips</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Peas</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Gravy</td>
</tr>
</tbody>
<tbody>
<tr class="header">
<th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
</tr>
<tr>
<th scope="row">5</th>
<td>Pizza</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Salad</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Oil</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Bread</td>
</tr>
</tbody>
</table>ใช่. ฉันใช้มันเพื่อซ่อน / เปิดเผยส่วนที่เกี่ยวข้องของตารางเช่นหลักสูตร ได้แก่
<table>
<tbody id="day1" style="display:none">
<tr><td>session1</td><tr>
<tr><td>session2</td><tr>
</tbody>
<tbody id="day2">
<tr><td>session3</td><tr>
<tr><td>session4</td><tr>
</tbody>
<tbody id="day3" style="display:none">
<tr><td>session5</td><tr>
<tr><td>session6</td><tr>
</tbody>
</table>
ปุ่มสามารถให้สลับระหว่างทุกสิ่งหรือเพียงแค่วันปัจจุบันโดยการจัดการกับร่างกายโดยไม่ต้องประมวลผลทีละหลายแถว
แก้ไข: captionแท็กเป็นของตารางจึงควรมีอยู่เพียงครั้งเดียว อย่าเชื่อมโยง a captionกับแต่ละtbodyองค์ประกอบเหมือนที่ฉันทำ:
<table>
<caption>First Half of Table (British Dinner)</caption>
<tbody>
<tr><th>1</th><td>Fish</td></tr>
<tr><th>2</th><td>Chips</td></tr>
<tr><th>3</th><td>Pease</td></tr>
<tr><th>4</th><td>Gravy</td></tr>
</tbody>
<caption>Second Half of Table (Italian Dinner)</caption>
<tbody>
<tr><th>5</th><td>Pizza</td></tr>
<tr><th>6</th><td>Salad</td></tr>
<tr><th>7</th><td>Oil</td></tr>
<tr><th>8</th><td>Bread</td></tr>
</tbody>
</table>
ตัวอย่างที่ไม่ดีข้างต้น: อย่าคัดลอก
ตัวอย่างด้านบนไม่แสดงผลตามที่คุณคาดหวังเนื่องจากการเขียนในลักษณะนี้แสดงถึงความเข้าใจผิดของcaptionแท็ก คุณจะต้องแฮ็ค CSS จำนวนมากเพื่อให้แสดงผลได้อย่างถูกต้องเพราะคุณขัดกับมาตรฐาน
ฉันค้นหามาตรฐาน W3Cs บนcaptionแท็ก แต่ไม่พบกฎที่ชัดเจนที่ระบุว่าจะต้องมีเพียงหนึ่งcaptionองค์ประกอบต่อตาราง แต่ในความเป็นจริงแล้วกรณี
นอกจากนี้หากคุณเรียกใช้เอกสาร HTML ที่มีหลาย<tbody>แท็กผ่านตัวตรวจสอบ HTML ของ W3Cด้วย HTML5 DOCTYPE ก็จะตรวจสอบได้สำเร็จ
ฉันได้สร้างJSFiddleที่ฉันมี ng-repeats ซ้อนกันสองตัวพร้อมโต๊ะและผู้ปกครอง ng-repeat บน tbody หากคุณตรวจสอบแถวใด ๆ ในตารางคุณจะเห็นว่ามีองค์ประกอบหกส่วนคือระดับผู้ปกครอง
HTML
<div>
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th>Store ID</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody data-ng-repeat="storedata in storeDataModel.storedata">
<tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
<td>{{storedata.store.storeId}}</td>
<td>{{storedata.store.storeName}}</td>
<td>{{storedata.store.storeAddress}}</td>
<td>{{storedata.store.storeCity}}</td>
<td>{{storedata.data.costTotal}}</td>
<td>{{storedata.data.salesTotal}}</td>
<td>{{storedata.data.revenueTotal}}</td>
<td>{{storedata.data.averageEmployees}}</td>
<td>{{storedata.data.averageEmployeesHours}}</td>
</tr>
<tr data-ng-show="dayDataCollapse[$index]">
<td colspan="2"> </td>
<td colspan="7">
<div>
<div class="pull-right">
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th></th>
<th>Date [YYYY-MM-dd]</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
<td class="pullright">
<button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
</button>
</td>
<td>{{dayData.date}}</td>
<td>{{dayData.cost}}</td>
<td>{{dayData.sales}}</td>
<td>{{dayData.revenue}}</td>
<td>{{dayData.employees}}</td>
<td>{{dayData.employeesHoursSum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
(หมายเหตุด้านข้าง: นี่จะเป็นการเติม DOM หากคุณมีข้อมูลจำนวนมากในทั้งสองระดับดังนั้นฉันจึงกำลังทำงานกับคำสั่งเพื่อดึงข้อมูลและแทนที่เช่นเพิ่มลงใน DOM เมื่อคลิกพาเรนต์และลบเมื่อคลิกอีกครั้งหรือพาเรนต์เดียวกัน อีกครั้งในการรับชนิดของพฤติกรรมที่คุณพบในPrisjakt.nuหากคุณเลื่อนลงไปที่รายการคอมพิวเตอร์และคลิกที่แถว (ไม่ใช่ลิงก์) หากคุณทำเช่นนั้นและตรวจสอบองค์ประกอบคุณจะเห็นว่ามีการเพิ่ม tr และ จากนั้นลบออกหากผู้ปกครองคลิกอีกครั้งหรืออย่างอื่น)
tbodyหรือไม่