ऊर्ध्वाधर हेडर के साथ एक HTML तालिका लिखने का सबसे आम तरीका है?

Question

हाय सब यह एक समय हो गया है जब से मैंने कुछ पूछा है, यह कुछ ऐसा है जो मुझे थोड़ी देर के लिए परेशान कर रहा है, सवाल खुद शीर्षक में है:

ऊर्ध्वाधर हेडर वाले HTML तालिकाओं को लिखने का आपका पसंदीदा तरीका क्या है?

वर्टिकल हैडर से मेरा मतलब है कि टेबल में हेडर ( <th>) टैग बाईं ओर है (आम तौर पर)

हैडर 1 डेटा डेटा डेटा
हैडर 2 डेटा डेटा डेटा
हैडर 3 डेटा डेटा डेटा

वे इस तरह दिखते हैं, अब तक मैं दो विकल्पों के साथ आया हूं

पहला विकल्प

   
    <table id="vertical-1">
            <caption>First Way</caption>
            <tr>
                <th>Header 1</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
        </table>
   

इस तरह से मुख्य लाभ यह है कि आपके पास हेडर सही (वास्तव में बाएं) डेटा के बगल में है जो यह दर्शाता है कि मुझे जो पसंद नहीं है वह यह है कि <thead>, <tbody>और <tfoot>टैग गायब हैं, और उन्हें तोड़ने के बिना उन्हें शामिल करने का कोई तरीका नहीं है। निकेली ने तत्वों को एक साथ रखा, जो मुझे दूसरे विकल्प तक ले गए।

दूसरा विकल्प

   
        <style type="text/css">
            #vertical-2 thead,#vertical-2 tbody{
                display:inline-block;
            }

        </style>
        <table id="vertical-2">
            <caption>Second Way</caption>
            <thead>
                <tr>
                    <th colspan="3">Header 1</th>
                </tr>
                <tr>
                    <th colspan="3">Header 2</th>
                </tr>
                <tr>
                    <th colspan="3">Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>row 1</td>
                    <td>row 1</td>
                    <td>row 1</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">Footer</td>
                </tr>
            </tfoot>
        </table>
   

यहां मुख्य लाभ यह है कि आपके पास पूरी तरह से वर्णनात्मक HTML तालिका है, कमियां यह हैं कि उचित प्रतिनिधित्व को tbodyऔर theadटैग के लिए सीएसएस की थोड़ी आवश्यकता है और यह कि हेडर और डेटा के बीच संबंध बहुत स्पष्ट नहीं है क्योंकि मुझे बनाते समय मेरे संदेह थे मार्कअप।

---

इसलिए, दोनों तरीके तालिका को प्रस्तुत करते हैं कि यह कैसे होना चाहिए, यहाँ एक पिटक्योर है:

बाईं ओर या दाईं ओर हेडर के साथ यदि आप इसे पसंद करेंगे, तो, कोई सुझाव, विकल्प, ब्राउज़र मुद्दे?

Answer 1

सबसे पहले, आपका दूसरा विकल्प इस अर्थ में HTML मान्य नहीं है कि तालिका में सभी पंक्तियों (TR) में समान संख्या में कॉलम (TD) शामिल होने चाहिए। आपके हेडर में 1 है जबकि शरीर में 3 है। आपको इसे ठीक करने के लिए कोलस्पैन विशेषता का उपयोग करना चाहिए।

संदर्भ: "THEAD, TFOOT और TBODY सेक्शन में समान संख्या में कॉलम होने चाहिए।" - धारा 11.2.3 का अंतिम पैराग्राफ ।

कहा जा रहा है कि , पहला विकल्प मेरी राय में बेहतर दृष्टिकोण है क्योंकि यह सीएसएस सक्षम है या नहीं, इसकी परवाह किए बिना यह पठनीय है। कुछ ब्राउज़र (या खोज इंजन क्रॉलर) CSS नहीं करते हैं और इस तरह, यह आपके डेटा को कोई मतलब नहीं देगा क्योंकि हेडर तब पंक्तियों के बजाय कॉलम का प्रतिनिधित्व करेगा।

Comments

क्या वास्तव में उसके लिए यह आवश्यक है कि आप उस पहली समस्या को ठीक करें? चूंकि यदि आप केवल एक सेल जोड़ते हैं, तो यह स्वचालित रूप से पहला स्थान लेता है और बाकी को अनदेखा कर दिया जाता है?

— लौवहोपले

हाय अवैध मार्कअप को उजागर करने के लिए धन्यवाद, मैं इसे सही करूँगा।

— ट्रिस्टियन

@ Nideo - मैंने अपनी पोस्ट में HTML4 प्रलेखन से एक संदर्भ जोड़ा है जिसमें स्पष्ट रूप से कहा गया है कि THEAD, TFOOT और TBODY में समान संख्या में कॉलम होने चाहिए।

— फ्रेंकोइस डेसचेनस

@ ट्राइस्टियन - एक और बात। TFOOT सीधे THEAD के नीचे (और TBODYs से पहले) होना चाहिए। फिर से, यह HTML विनिर्देशन की धारा 11.2.3 में शामिल है।

— फ्रेंकोइस डेचन ने

@prodigitalson - scopeविशेषता वास्तव में इस मामले में बहुत फर्क नहीं करेगी। यदि आप पढ़ते हैं कि यह किस लिए है, तो आप समझेंगे। इसका मूल रूप से मतलब यह है कि यह कॉलम उस पंक्ति या स्तंभ के लिए हैडर है जिसमें यह शामिल है। समस्या यह है कि इसका उपयोग तब तक कोई मतलब नहीं है जब तक कि <th>एक के साथ बदलना नहीं था <td scope="row">।

— फ्रेंकोइस डेसचेंस

Answer 2

पहला विकल्प ... मुझे लगता है कि यह बेहतर और सरल दृष्टिकोण है।

Answer 3

ईमानदारी से, विकल्प 1. मैं आपको इस उदाहरण को W3.org (नीचे लिंक) से देखने का सुझाव दूंगा। मुझे लगता है कि यह तरीका सबसे अच्छा है, क्योंकि इस तरह से आपके शीर्षकों की स्क्रीन पाठकों पर भी सही व्याख्या की जाएगी।

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

Answer 4

यदि आप अपनी तालिका में डेटा-बाउंड कंट्रोल एलिमेंट (जैसे एस्प रिपीटर) दिखाना चाहते हैं, तो पहला विकल्प संभव नहीं होगा। दूसरा विकल्प निम्नानुसार इस्तेमाल किया जा सकता है।

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>

Answer 5

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>

Comments

कृपया इस बारे में स्पष्टीकरण जोड़ें कि आपका उत्तर प्रश्न में पहचाने गए मुद्दे को कैसे संबोधित करता है।

— ब्लरफस