मैं HTML में कई पंक्तियों की तुलना में टेबल हेडर कैसे बना सकता हूं?

Question

मैं एक तालिका का निर्माण इस प्रकार करना चाहूंगा:

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

यह देखते हुए कि TH तत्वों के लिए केवल 1 पंक्ति कैसे है, मैं शीर्ष लेख पंक्ति जैसे कॉलम लाइन अप कैसे बना सकता हूं? पदानुक्रमित टेबल एक अच्छे विकल्प की तरह प्रतीत नहीं होती हैं क्योंकि कॉलम की चौड़ाई नहीं बढ़ेगी, और मैं दो पंक्तियों का उपयोग भी नहीं कर सकता।

Comments

और आप दो पंक्तियों और कोलस्पैन का उपयोग क्यों नहीं कर सकते?

— tvanfosson

TH टैग की कई पंक्तियाँ TH की एकल पंक्ति में विलीन हो जाएंगी। ऊपर मेरे उदाहरण को जारी रखते हुए, उत्पन्न तालिका मेजर हेडिंग 1, मेजर हेडिंग 2, माइनॉर 1, माइनर 2, माइनोर 3, माइनर 4 की एक हेडर पंक्ति होगी।

— प्रतिमा

एक समाधान टीएच के बजाय विशेष सीएसएस के साथ टीडी का उपयोग करना होगा, लेकिन आदर्श रूप से मैं पारंपरिक HTML तालिका निर्माण का पालन करना चाहूंगा।

— प्रतिमा

मुझे नहीं लगता कि यह सही है: jsfiddle.net/7pDqb

— tvanfosson

बंद विषय के रूप में बंद ?! "क्या मेरे पास कई पंक्तियों के साथ एक टेबल हेडर हो सकता है?" एक पूरी तरह से ठीक ढेर अतिप्रवाह सवाल की तरह लगता है। मैं बस सोच रहा था कि क्या यह अपने आप में एक से अधिक tr के काम करेगा।

— एंड्रयू कोपर

Answer 1

यह है कि मैं इसे कैसे करेगा ( Chrome में http://jsfiddle.net/7pDqb/ ) पर काम करना ।

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2">Major 1</th>
      <th colspan="2">Major 2</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
    </tr>
  </tbody>
</table>

Answer 2

क्या आप rowspanइसके बजाय गलती से उपयोग कर रहे थे colspan? या आप गलती से एक समापन </tr>टैग भूल गए ?

Tvanfosson के उत्तर का विस्तार, मैं सिमेंटिक और पहुँच उद्देश्यों के लिए तत्वों scopeपर विशेषता काth उपयोग करूँगा :

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2" scope='colgroup'>Major Heading 1</th>
      <th colspan="2" scope='colgroup'>Major Heading 2</th>
    </tr>
    <tr>
      <th scope='col'>Minor1</th>
      <th scope='col'>Minor2</th>
      <th scope='col'>Minor3</th>
      <th scope='col'>Minor4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
    </tr>
  </tbody>
</table>

Comments

धन्यवाद, बिल्कुल मेरे मामले में, रस्सियों का उपयोग करते हुए आकस्मिक

— मैक्सिमस

Answer 3

हालाँकि, कई स्तंभों पर शीर्ष लेख सेल के मामले के अलावा, दो पंक्तियों में शीर्ष लेख सेल वाले तालिकाएँ भी अक्सर देखी जाती हैं।

यहाँ एक उदाहरण है। col 5और data5नीचे देखें :

    <table>
        <thead>
            <tr>
                <th colspan="2">Major 1</th>
                <th colspan="2">Major 2</th>
                <th rowspan="2">col 5</th>
            </tr>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
        </tbody>
    </table>

यहाँ है बेला ।

Answer 4

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

(ध्यान दें कि वेबसाइट पर उदाहरण तालिका में प्रदान किया गया मार्कअप नमूना मार्कअप में दिखाए गए कार्यों से थोड़ा अलग है। लिंक देखें और उदाहरण तालिका का निरीक्षण करें।)

स्रोत: https://www.w3.org/WAI/tutorials/tables/ir अनियमित/# table-with-two-tier-headers

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>