1. घर
  2. सवाल और जवाब
  3. आप HTML टेबल में colspan और rowspan का उपयोग कैसे करते हैं?

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

2012-03-22 47 views
68

मुझे नहीं पता कि HTML टेबल के अंदर पंक्तियों और स्तंभों को कैसे मर्ज करें।आप HTML टेबल में colspan और rowspan का उपयोग कैसे करते हैं?

Example

आप कृपया मुझे HTML में इस तरह के एक मेज बनाने के साथ मदद कर सकते हैं?

स्रोत

2012-03-22 Ockonal

+0

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

+0

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

+13

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

उत्तर

88

मेरा सुझाव चाहते हैं:

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>

संदर्भ:

स्रोत

2012-03-22 21:09:52

+2

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

+27

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

3

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

ऐसा लगता है कि आपके पहले टीडी को rowspan="2" की आवश्यकता है और अगले टीडी को colspan="4" की आवश्यकता है।

स्रोत

2012-03-22 21:07:51

5

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

स्रोत

2012-03-22 21:08:05 Wadester

2

संपत्ति आपको लगता है कि पहले टीडी के लिए देख रहे 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>

स्रोत

2012-03-22 21:09:04

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

स्रोत

2012-03-22 21:12:35 hjpotter92

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

स्रोत

2012-03-22 21:15:36 Wadester

94

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

जब आप कोई टेबल प्रारंभ करते हैं, तो आप एक ग्रिड बनाते हैं। आपकी पहली पंक्ति और सेल शीर्ष बाएं कोने में होंगे। इसके बारे में एक सरणी सूचक की तरह सोचें, एक्स के प्रत्येक वृद्धि मूल्य के साथ दाईं ओर बढ़ते हुए, और वाई के प्रत्येक वृद्धि मूल्य के साथ आगे बढ़ें।

अपनी पहली पंक्ति के लिए, आप केवल दो कोशिकाओं को परिभाषित कर रहे हैं। एक 2 पंक्तियों को फैलाता है और एक 4 कॉलम फैलाता है।

Preview #0001

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

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

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

Preview #0002

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

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

Preview #0003

<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 के एक रोस्पेन है? आपको जिस चीज पर विचार करने की आवश्यकता है वह यह है कि भले ही आप अगली पंक्ति में कोई और कोशिकाएं जोड़ने वाले नहीं हैं, फिर भी पंक्ति मौजूद होनी चाहिए (भले ही यह खाली पंक्ति हो)। यदि आपने तुरंत पंक्ति में नई कोशिकाओं को जोड़ने का प्रयास किया है, तो आप देखेंगे कि यह उन्हें नीचे पंक्ति के अंत में जोड़ना शुरू कर देगा।

Preview #0004

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

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

स्रोत

2012-03-22 21:29:37 animuson

+4

चित्रों के लिए जेपीजी के बजाय पीएनजी का उपयोग करने पर विचार करें। –

+0

धन्यवाद दस लाख। मैं कभी भी टेबल से बहुत अधिक व्यवहार नहीं कर रहा हूं, लेकिन अब मैं एक ऐसी समस्या पर ठोकर खा रहा हूं जहां एक वास्तविक जटिल तालिका संरचना में वास्तविक सारणीय डेटा प्रस्तुत किया जाना है। आपकी व्याख्या के लिए धन्यवाद मैंने आखिरकार यह पता लगाया है कि पंक्ति/कॉलम स्पैन वास्तव में कैसे काम करते हैं। –

+0

पूर्वावलोकन छवियां टूट गई हैं .. – hyip

0

यह अपनी मेज

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

स्रोत

2012-03-23 10:44:01 Ha3Ha3Ha3

9

के समान है किसी को भी दोनों को छोड़ दिया पर और सही पर एक रोस्पेन की तलाश में है, तो यहां कैसे आप यह कर सकते है:

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>

वैकल्पिक रूप से, आप एक मौजूदा rowset के लिए बाएं और दाएं जोड़ना चाहते हैं, तो आप में जो ढह 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>

स्रोत

2014-03-08 20:59:44 Lane

संबंधित मुद्दे

 संबंधित मुद्दे