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


80

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

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

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


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

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

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

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

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

जवाबों:


109

यह है कि मैं इसे कैसे करेगा ( 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>


24

क्या आप 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>


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

7

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

यहाँ एक उदाहरण है। 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>

यहाँ है बेला


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>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.