क्या हम एक ही <तालिका> में कई <tbody> कर सकते हैं?

Question

क्या हम <tbody>एक ही में कई टैग लगा सकते हैं <table>? यदि हाँ, तो किस परिदृश्य में हमें कई <tbody>टैग का उपयोग करना चाहिए ?

Answer 1

हां, आप उनका उपयोग कर सकते हैं, उदाहरण के लिए मैं उनका उपयोग डेटा के अधिक आसानी से शैली समूहों के लिए करता हूं, जैसे:

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>

आप यहां एक उदाहरण देख सकते हैं । यह केवल नए ब्राउज़रों में काम करेगा, लेकिन यह कि मैं अपने वर्तमान एप्लिकेशन में समर्थन कर रहा हूं, आप जावास्क्रिप्ट आदि के लिए समूहीकरण का उपयोग कर सकते हैं। मुख्य बात यह है कि डेटा को अधिक पठनीय बनाने के लिए पंक्तियों को नेत्रहीन रूप से समूह बनाने का एक सुविधाजनक तरीका है । पाठ्यक्रम के अन्य उपयोग हैं, लेकिन जहाँ तक लागू उदाहरणों की बात है, यह मेरे लिए सबसे आम है।

Comments

बढ़िया जवाब के लिए धन्यवाद। क्या स्क्रीन रीडर, एक tbodyया कई के लिए मायने रखता है ?

— जितेन्द्र व्यास

@ धातु-गियर-ठोस - मेरे अनुभव में वे उन्हें ठीक से संभालते हैं, जैसे: जैसे वे एक थे <tbody>। जब आप तालिकाओं को घोंसला बनाना शुरू करते हैं , तो वही होता है जो आमतौर पर स्क्रीन रीडर के लिए वास्तविक नेविगेशन समस्याएं देता है।

— निक Craver

@ मेटल: नहीं, एक शब्दार्थ अंतर है - कई <tbody>तत्व तालिका में अलग-अलग समूहों का वर्णन करते हैं, जैसा कि उत्तर में बताया गया था। इसके अलावा, मुझे यह जोड़ना चाहिए कि यह आम तौर पर पृष्ठभूमि के लिए कोशिकाओं को लक्षित करने के लिए बेहतर है, इसलिए सीएसएस को उदाहरण के लिए होना चाहिए,tbody:nth-child(odd) td { background: #f5f5f5; }

— DisgruntledGoat

"नए ब्राउज़र" की परिभाषा क्या है?

— टिम डाउन

@TimDown - जब मैंने कहा "नए ब्राउज़र" यह केवल :nth-child()लिंक किए गए प्रदर्शन के लिए सीएसएस उपयोग की बात कर रहा था , तो मल्टीपल <tbody>किसी भी ब्राउज़र में काम करेगा।

— निक Craver

Answer 2

हाँ। से DTD

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

तो यह एक या अधिक की उम्मीद है। यह तो कहने पर चला जाता है

जब तालिका पंक्तियों के समूहों के बीच नियमों की आवश्यकता होती है तो कई tbody वर्गों का उपयोग करें ।

Comments

एचटीएमएल 5 कल्पना के रूप में, थोड़ा इस परिवर्तन है, लेकिन मौलिक "हाँ, कई tbodyतत्वों ठीक) अवशेष हैं। विशेष रूप से, आप अब कर रहे हैं एक डालने की अनुमति tfootतत्व के बादtbody , जैसा कि आप । (वे बड़े करीने से पक्ष कदम रखा DTD पहलू कहकर वे एक नहीं प्रदान करते हैं ।) :-)

— टीजे क्राउडर

इस प्रतिक्रिया के लिए धन्यवाद। मेरी पुस्तक में # 1 उत्तर का संदर्भ चश्मा है।

— कर्नेलकार्री

तो यह एक या अधिक की उम्मीद है। यह गलत है, यह एक सेट हो सकता है <tr>इसलिए यह शून्य भी हो सकता है (यानी एक tbody या एक tr इसका मतलब है कि यह सिर्फ tr और no tbody हो सकता है।)

— एलेक्सिस

@AlexisWilke यह ऐनक के अनुसार सच है: TBODY स्टार्ट टैग हमेशा आवश्यक होता है सिवाय इसके कि जब टेबल में केवल एक टेबल बॉडी हो और कोई टेबल हेड या पैर सेक्शन न हो

— Gecko IT

Answer 3

इस उदाहरण के अनुसार यह किया जा सकता है: डब्ल्यू 3-स्ट्रक्चर-टेबल ।

Answer 4

मार्टिन जॉइनर की समस्या <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>

Comments

captionटैग उद्घाटन का पालन करना चाहिए tableटैग। developer.mozilla.org/en-US/docs/Web/HTML/Element/table

— Cypher

आप सही हे। मैंने किसी तरह डॉक्स की गलत व्याख्या की। मैंने त्रुटि ठीक की।

— जॉन सेलर्स

हेडर के लिए युक्ति scope="rowgroup"(इसके बजाय col) का उपयोग करने की सलाह देती है tbody। उदाहरण देखें ।

— CletusW

Answer 5

हाँ। मैं उन्हें डायनामिक रूप से टेबल के संबंधित भाग को छिपाने / प्रकट करने के लिए उपयोग करता हूं, जैसे कि एक कोर्स। अर्थात।

<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>

व्यक्तिगत रूप से कई पंक्तियों को संसाधित किए बिना tbodies में हेरफेर करके सब कुछ या सिर्फ वर्तमान दिन के बीच टॉगल करने के लिए एक बटन प्रदान किया जा सकता है।

Answer 6

संपादित करें: captionटैग तालिका के अंतर्गत आता है और इस प्रकार केवल एक बार मौजूद होना चाहिए। जैसे मैंने किया 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>

बुरा उदाहरण ABOVE: कॉपी मत करो

उपरोक्त उदाहरण प्रस्तुत नहीं करता है क्योंकि आप उम्मीद करेंगे क्योंकि इस तरह से लिखना captionटैग की गलतफहमी को दर्शाता है । इसे सही ढंग से रेंडर करने के लिए आपको बहुत सीएसएस हैक की आवश्यकता होगी क्योंकि आप मानकों के खिलाफ जा रहे होंगे।

मैंने captionटैग पर W3Cs मानकों की खोज की, लेकिन एक स्पष्ट नियम नहीं मिल सका है जिसमें कहा गया है कि captionप्रति तालिका केवल एक तत्व होना चाहिए लेकिन वास्तव में ऐसा ही है।

Answer 7

इसके अलावा, यदि आप W3C के HTML Validator , HTML5 DOCTYPE के साथ कई <tbody>टैग के साथ एक HTML दस्तावेज़ चलाते हैं, तो यह सफलतापूर्वक मान्य होगा।

Answer 8

मैंने एक JSFiddle बनाया है, जहां मेरे पास टेबल के साथ दो नेस्टेड एनजी-रिपीट हैं, और पैरेंट एनजी-रिपीट टीओबी पर हैं। यदि आप तालिका में किसी पंक्ति का निरीक्षण करते हैं, तो आप देखेंगे कि छह tbody तत्व हैं, अर्थात मूल स्तर।

एचटीएमएल

<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">&nbsp;</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 जोड़ा गया है। यदि माता-पिता फिर से या किसी अन्य पर क्लिक किया जाता है तो हटा दिया जाता है।)