Tt के अंदर Html table tr

Question

मैं HTML में एक तालिका बनाने का प्रयास कर रहा हूं। मेरे पास बनाने के लिए निम्नलिखित डिज़ाइन है। मैंने <tr>अंदर से जोड़ा था , <td>लेकिन किसी तरह डिज़ाइन के अनुसार तालिका नहीं बनाई गई है।

क्या कोई मुझे सुझाव दे सकता है कि मैं इसे कैसे प्राप्त कर सकता हूं?

मैं Name1 बनाने में असमर्थ हूँ | मूल्य 1 खंड।

Answer 1

आपको td के अंदर एक पूर्ण तालिका जोड़ना होगा

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

Comments

क्या td के अंदर फुल टेबल जोड़ना संभव है ?? मैंने ऐसा कभी नहीं किया, इसीलिए मैं यह पूछ रहा हूं। अगर यह अपने वास्तव में महान है

— बिच्छू

आप लगभग सब कुछ एक td में डाल सकते हैं, केवल html, शरीर और सिर को अनुमति नहीं है मुझे लगता है

— herrhansen

हाँ, यह वही है जिससे मैं डर गया था। मैंने गूगल पर यह देखने की उम्मीद की कि एक और तरीका है

— जियाको टेका पिगानी

खैर अब के रूप में, यह कोई त्रुटि नहीं फेंकती है जब मैं td में t s डाल देता हूं, तो मैंने कुछ td s के अंदर कई tr s लगा दिए हैं क्योंकि मेरा ऐप कुछ गुणों के भीतर वस्तुओं के सरणियों को प्रस्तुत करता है, और यह सभी ब्राउज़रों में काम करता है, (IE के बारे में पता नहीं है, जैसा कि मैंने IE में इसका परीक्षण नहीं किया है), कोई भी व्यक्ति इसे देख सकता है - stackblitz.com/edit/angular-u7aman , नोट: यह एक कोणीय ऐप है, यह निश्चित नहीं है कि इसके पीछे एंगुलर है व्यवहार।

— हसिंथा अबेकून

भले ही यह आपके ब्राउज़र में कोई त्रुटि न फेंके, यह गलत है, और अन्य ब्राउज़रों या परिस्थितियों में त्रुटियों को फेंक सकता है। आपको हमेशा अपने इच्छित उपयोग में एचटीएमएल-तत्वों का उपयोग करने की कोशिश करनी चाहिए, जैसे कि इनलाइन तत्वों के अंदर ब्लॉक-तत्वों का उपयोग नहीं करना

— herrhansen

Answer 2

आप td के अंदर tr नहीं डाल सकते हैं। आप एमडीएन वेब डॉक्स प्रलेखन से अनुमत सामग्री देख सकते हैं td। प्रासंगिक जानकारी अनुमत सामग्री अनुभाग में है।

इसे प्राप्त करने का एक और तरीका है उपयोग colspanऔर rowspan। इस फिडल को चेक करें ।

HTML:

<table width="100%">
 <tr>
  <td>Name 1</td>
  <td>Name 2</td>
  <td colspan="2">Name 3</td>
  <td>Name 4</td>
 </tr>

 <tr>
  <td rowspan="3">ITEM 1</td>
  <td rowspan="3">ITEM 2</td>
  <td>name1</td>
  <td>price1</td>
  <td rowspan="3">ITEM 4</td>
 </tr>

 <tr>
  <td>name2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>name3</td>
  <td>price3/td>
 </tr>
</table>

और कुछ सीएसएस:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}

Comments

टेबल के अंदर टेबल लगाना पूरी तरह से मान्य है, एक साधारण HTML कोड लिखें जहां आप टीडी के अंदर एक टेबल डालें और इसे w3 के सत्यापनकर्ता में पेस्ट करें: validator.w3.org/check आप यह देखेंगे कि यह पारित हो जाएगा। सभी त्रुटियाँ doctype और हेड गुम टैग से संबंधित हैं।

— मल्लोक

tr के अंदर एक टेबल एलिमेंट को अवैध रूप से डालते समय, td के अंदर एक टेबल को रखना वैध होता है..आप सत्यापनकर्ता

— Lucky

मैं अर्थ का इरादा है कि यहाँ एक मेज के एक तालिका के अंदर, परिदृश्य के लिए एक अजीब तरीका है के रूप में था लगता है colspanऔर rowspanइस समस्या को हल करने के लिए करना है।

— कोनरबोडे

निश्चित नहीं है कि इस समाधान को इतने सारे उभार क्यों मिलते हैं। पोस्ट किए गए कोड को ब्राउज़र के बिना पूरी तरह से अपारदर्शी है, तार्किक संबंध की कीमत पर एक दृश्य लक्ष्य प्राप्त करना है जिसे एक तालिका का प्रतिनिधित्व करना है। और, जैसा कि @Malloc ने उल्लेख किया है, इसका पहला वाक्य वर्तमान में गलत है।

— 22

Answer 3

आप बिना नेस्टिंग टेबल के हल कर सकते हैं।

<table border="1">
    <thead>
        <tr>
            <th>ABC</th>
            <th>ABC</th>
            <th colspan="2">ABC</th>
            <th>ABC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Item1</td>
            <td rowspan="4">Item1</td>
            <td colspan="2">Item1</td>
            <td rowspan="4">Item1</td>
        </tr>
        <tr>
            <td>Name1</td>
            <td>Price1</td>
        </tr>
        <tr>
            <td>Name2</td>
            <td>Price2</td>
        </tr>
        <tr>
            <td>Name3</td>
            <td>Price3</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td>Item2</td>
            <td colspan="2">Item2</td>
            <td>Item2</td>
        </tr>
    </tbody>
</table>

Answer 4

इस कोड को आज़माएं

<table border="1" width="100%">
<tr>
    <td>Name 1</td>
    <td>Name 2</td>
    <td colspan="2">Name 3</td>
    <td>Name 4</td>
</tr>

<tr>
    <td rowspan="3">ITEM 1</td>
    <td rowspan="3">ITEM 2</td>
    <td>name</td>
    <td>price</td>
    <td rowspan="3">ITEM 4</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
</table>

Answer 5

इस तरह से td तत्व के अंदर एक और टेबल रखें ।

<table>
    <tr>
        ...
    </tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            <table>
                <tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr>
...
            </table>
        </td>
        <td>ABC</td>
    </tr>
...
</table>

Answer 6

बस आप चाहते हैं tableमें एक नया जोड़ें td। उदाहरण: http://jsfiddle.net/AbE3Q/

<table border="1">
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
    </tr>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td><table border="1">
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            </table></td>
        <td>Item3</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>  
</table>

Answer 7

पूर्ण उदाहरण:

<table border="1" style="width:100%;">
  <tr>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 1</td>
    <td>
      <table border="1" style="width: 100%;">
        <tr>
          <td>Name 1</td>
          <td>Price 1</td>
        </tr>
        <tr>
          <td>Name 2</td>
          <td>Price 2</td>
        </tr>
        <tr>
          <td>Name 3</td>
          <td>Price 3</td>
        </tr>
      </table>
    </td>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
  </tr>
</table>

Answer 8

आप इस तरह से तालिका के अंदर सिर्फ तालिका का उपयोग कर सकते हैं

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
      </tr>
      <tr>
        <td>Item1</td>
        <td>Item1</td>
        <td>
          <table style="width:100%">
            <tr>
              <td>name1</td>
              <td>price1</td>
            </tr>
            <tr>
              <td>name2</td>
              <td>price2</td>
            </tr>
            <tr>
              <td>name3</td>
              <td>price3</td>
            </tr>
          </table>
        </td>
        <td>item1</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
      </tr>
      <tr>
        <td>E</td>
        <td>R</td>
        <td>T</td>
        <td>T</td>
      </tr>
    </table>
  </body>
</html>

Answer 9

<table border="1px;" width="100%" >
        <tr align="center">
            <td>Product</td>
            <td>quantity</td>
            <td>Price</td>
            <td>Totall</td>
        </tr>
        <tr align="center">
            <td>Item-1</td>
            <td>Item-1</td>
            <td>
                <table border="1px;" width="100%">
                    <tr align="center">
                        <td>Name1</td>
                        <td>Price1</td>
                    </tr>
                    <tr align="center">
                        <td>Name2</td>
                        <td>Price2</td>
                    </tr>
                    <tr align="center">
                        <td>Name3</td>
                        <td>Price3</td>
                    </tr>
                    <tr>
                        <td>Name4</td>
                        <td>Price4</td>
                    </tr>
                </table>
            </td>
            <td>Item-1</td>
        </tr>
        <tr align="center">
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
        </tr>
        <tr align="center">
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
        </tr>
    </table>