आप HTML टेबल में कोलस्पैन और रोस्पैन का उपयोग कैसे करते हैं?

Question

मुझे नहीं पता कि HTML तालिकाओं के अंदर पंक्तियों और स्तंभों को कैसे मर्ज किया जाए।

क्या आप HTML में ऐसी तालिका बनाने में मेरी मदद कर सकते हैं?

Comments

उन्हें सही मर्ज करें? तुम्हारा मतलब है colspan?

— animuson

@DavidThomas I 5 पंक्तियों और 3 कॉलमों के साथ तालिका बना सकता है। लेकिन मुझे वास्तव में यह पता नहीं है कि रोस्पैन कहां लगाया जाता है, आदि

— मैक्स फ्रैरी

@ डेविड: यह स्पष्ट है कि पूछने वाले को यह नहीं पता है कि कहां से शुरू करना है, यह कभी-कभी कठिन होता है जब आपको यह भी नहीं पता होता है कि क्या एक विशेषता जिसे आप ढूंढ रहे हैं (इस मामले में रोस्पैन)

— क्रिस सोबोलेवस्की

इस बारे में दुबला होने का एक अच्छा तरीका, यदि आप पर्याप्त भाग्यशाली हैं कि ड्रीमविवर जैसे दृश्य संपादक हैं, तो मूल टेबल ग्रिड बनाना है और फिर आवश्यक कोशिकाओं को एक साथ मर्ज करना है। फिर उत्पादित कोड का निरीक्षण करें। आप देखेंगे कि विभिन्न कोशिकाएँ कहाँ विलीन हैं और यह कोड के साथ कैसे किया जाता है। ड्रीमविवर आमतौर पर स्वच्छ और आज्ञाकारी कोड का उत्पादन करता है, इसलिए यह एक शिक्षार्थी के लिए एक अच्छा उदाहरण स्थापित करेगा।

— असली सपने

Answer 1

मैं सुझाव देता हूं:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}

<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

संदर्भ:

• tdतत्व ।
• thतत्व ।
• tbodyतत्व ।
• theadतत्व ।
• tableतत्व ।

Comments

सुंदर रंग जोड़ने के लिए मत भूलना।

— ब्लेज़मॉन्गर

मैं इस मामले में पाठक के लिए एक अभ्यास के रूप में 'सुंदर रंग' छोड़ता हूं।

— डेविड का कहना है कि मोनिका

अगर किसी को दिलचस्पी है, तो यह सामान्य रूप से कैसे काम करता है, देखें @ animousons की उत्कृष्ट व्याख्या नीचे stackoverflow.com/a/9830847/362951

— mit

Answer 2

यदि आप भ्रमित हैं कि टेबल लेआउट कैसे काम करते हैं, तो वे मूल रूप से x = 0, y = 0 से शुरू होते हैं और अपने तरीके से काम करते हैं। चलो ग्राफिक्स के साथ समझाते हैं, क्योंकि वे बहुत मज़ेदार हैं!

जब आप एक तालिका शुरू करते हैं, तो आप एक ग्रिड बनाते हैं। आपकी पहली पंक्ति और सेल ऊपरी बाएँ कोने में होगी। इसे एरे पॉइंटर की तरह समझें, x के प्रत्येक बढ़े हुए मूल्य के साथ दाईं ओर बढ़ रहा है, और y के प्रत्येक बढ़े हुए मूल्य के साथ नीचे जा रहा है।

अपनी पहली पंक्ति के लिए, आप केवल दो कक्षों को परिभाषित कर रहे हैं। एक 2 पंक्तियों नीचे और एक 4 स्तंभों तक फैला हुआ है। इसलिए जब आप अपनी पहली पंक्ति के अंत तक पहुँचते हैं, तो यह कुछ इस तरह दिखता है:

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

अब जब पंक्ति समाप्त हो गई है, तो "सरणी पॉइंटर" अगली पंक्ति के लिए नीचे कूदता है। चूंकि x स्थिति 0 पहले से ही एक पिछले सेल द्वारा ली गई है, x 1 कोशिकाओं में भरने की शुरुआत करने के लिए स्थिति 1 पर कूदता है। * रौस्पैन्स के बीच अंतर के बारे में नोट देखें।

इस पंक्ति में चार सेल हैं जो सभी 1x1 ब्लॉक हैं, इसके ऊपर की पंक्ति की समान चौड़ाई में भरना।

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

अगली पंक्ति सभी 1x1 कोशिकाएं हैं। लेकिन, उदाहरण के लिए, यदि आपने एक अतिरिक्त सेल जोड़ा तो क्या होगा? ठीक है, यह बस किनारे से दाईं ओर पॉप होगा।

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

* लेकिन क्या होगा अगर हम इसके बजाय (अतिरिक्त सेल को जोड़ने के बजाय) इन सभी कोशिकाओं को 2 का एक पंक्तिबद्ध बनाया है? यहां आपको जिस चीज पर विचार करने की आवश्यकता है वह यह है कि भले ही आप अगली पंक्ति में कोई और सेल नहीं जोड़ेंगे, फिर भी पंक्ति मौजूद होनी चाहिए (भले ही यह एक खाली पंक्ति हो)। यदि आपने इसके तुरंत बाद पंक्ति में नई कोशिकाओं को जोड़ने का प्रयास किया, तो आप देखेंगे कि यह उन्हें नीचे की पंक्ति के अंत में जोड़ना शुरू कर देगा।

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

टेबल बनाने की अद्भुत दुनिया का आनंद लें!

Answer 3

अगर कोई बाईं ओर और दाईं ओर एक पंक्ति के लिए देख रहा है, तो यहां बताया गया है कि आप इसे कैसे कर सकते हैं:

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

वैकल्पिक रूप से , यदि आप LEFT और RIGHT को एक मौजूदा रोसेट में जोड़ना चाहते हैं, तो आप उन्हें colspanबीच में ही ढहने के साथ फेंककर भी वही परिणाम प्राप्त कर सकते हैं :

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Answer 4

rowspanयदि आप कोशिकाओं को नीचे और colspanभर में विस्तारित करना चाहते हैं तो उपयोग करें ।

Answer 5

आप स्प्रेड कॉलम बनाने के लिए एक td एलिमेंट rowspan="n"पर उपयोग कर सकते हैं nऔर colspan="m"इसे स्प्रेड mकॉलम बनाने के लिए एक td एलिमेंट पर ।

लगता है जैसे आपकी पहली td की जरूरत है rowspan="2"और अगली td की जरूरत है a colspan="4"।

Answer 6

वह संपत्ति जो आप पहले td के लिए देख रहे हैं rowspan: http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

Answer 7

<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 8

<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>

Answer 9

Colspan और Rowspan एक तालिका को पंक्तियों में विभाजित किया गया है और प्रत्येक पंक्ति को कोशिकाओं में विभाजित किया गया है। कुछ स्थितियों में हमें एक या अधिक कॉलम या पंक्ति से अधिक (या मर्ज किए गए) कक्ष कक्षों की आवश्यकता होती है। इन स्थितियों में हम Colspan या Rowspan विशेषताओं का उपयोग कर सकते हैं।

Colspan Colspan विशेषता उन स्तंभों की संख्या को परिभाषित करती है, जिन्हें सेल को क्षैतिज रूप से (या मर्ज) करना चाहिए। यही है, आप एक पंक्ति में दो या अधिक सेल को एक सेल में विलय करना चाहते हैं।

<td colspan=2 > 

कैसे करें कोल्पसन?

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

Rowspan रोस्पैन विशेषता उन पंक्तियों की संख्या को निर्दिष्ट करती है जो एक सेल को लंबवत रूप से फैली होनी चाहिए। यही है, आप दो या दो से अधिक सेल को एक ही सेल में लंबवत एक सेल में मर्ज करना चाहते हैं।

<td rowspan=2 >

Rowspan के लिए कैसे?

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>

Answer 10

मैंने अपने समान तर्क के लिए ngIf का उपयोग किया है। यह इस प्रकार है:

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

यहाँ, मैं अपने मॉडल ऑब्जेक्ट से rowspan मान प्राप्त कर रहा हूँ।

Answer 11

यह आपकी तालिका के समान है

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>