টিডির ভিতরে এইচটিএমএল টেবিল টিআর

Question

আমি এইচটিএমএলে একটি টেবিল তৈরি করার চেষ্টা করছি। আমি তৈরি করতে নিম্নলিখিত নকশা আছে। আমি এর <tr>ভিতরে একটি সংযোজন করেছি <td>তবে ডিজাইন অনুযায়ী কোনওভাবে টেবিলটি তৈরি করা হয়নি।

আমি কীভাবে এটি অর্জন করতে পারি কেউ আমাকে পরামর্শ দিতে পারে?

আমি নাম 1 তৈরি করতে অক্ষম মূল্য 1 বিভাগ।

Answer 1

আপনাকে অবশ্যই টিডি-র ভিতরে একটি পূর্ণ টেবিল যুক্ত করতে হবে

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

Comments

একটি টিডি-র ভিতরে পুরো টেবিল যুক্ত করা কি সম্ভব ?? আমি কখনই তা করি নি, এজন্যই আমি এটি জিজ্ঞাসা করছি। এটি যদি এর সত্যই দুর্দান্ত থেকে থাকে তবে

— বৃশ্চিক

আপনি প্রায় সমস্ত কিছু

— টিডি

হ্যাঁ, এটাই আমি ভয় পেয়েছিলাম। আমি

— গুগলের

এখনকার মতো, আমি যখন টিআরডিতে টিআর রাখি তখন এটি কোনও ত্রুটি ছুঁড়ে না, আসলে আমি অনেক টিআরএসকে কিছু টিডি-র ভিতরে রেখেছি কারণ আমার অ্যাপ্লিকেশনটি কিছু বৈশিষ্ট্যের মধ্যে অবজেক্টের অ্যারে সরবরাহ করে এবং এটি সমস্ত ব্রাউজার জুড়ে কাজ করে, ( আইআই সম্পর্কে জানেন না, যেমন আমি এটি আই-তে পরীক্ষা করিনি), আগ্রহী যে কেউ এটি পরীক্ষা করে দেখতে পারেন - stackblitz.com/edit/angular-u7aman , দ্রষ্টব্য: এটি একটি কৌনিক অ্যাপ্লিকেশন, এটি নিশ্চিত নয় যে এর পিছনে অ্যাঙ্গুলার রয়েছে কিনা আচরণ

— হাসিন্থা আবেইকুন

যদিও এটি আপনার ব্রাউজারে কোনও ত্রুটি না ফেলে এটি মিথ্যা এবং অন্য ব্রাউজারগুলিতে বা পরিস্থিতিতে ত্রুটি ফেলে দিতে পারে আপনার ইনডল-এলিমেন্টের ভিতরে ব্লক-এলিমেন্টগুলি ব্যবহার না করার মতো আপনার লক্ষ্যযুক্ত ব্যবহারে এইচটিএমএল-এলিমেন্টগুলি ব্যবহার করার চেষ্টা করা উচিত

— herrhansen

Answer 2

আপনি টিডির ভিতরে টিআর রাখতে পারবেন না। আপনি MDN ওয়েব ডক্স ডকুমেন্টেশন থেকে অনুমোদিত সামগ্রী দেখতে পারেন td। সম্পর্কিত তথ্য অনুমোদিত সামগ্রীর বিভাগে।

আরেকটি উপায় এই অর্জন করার ব্যবহার করা colspanএবং rowspan। এই কোলাহলটি পরীক্ষা করে দেখুন ।

এইচটিএমএল:

<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

টেবিলের ভিতরে টেবিল স্থাপন সম্পূর্ণ বৈধ, আপনি টিডির অভ্যন্তরে কোনও টেবিলটি সন্নিবেশ করান এমন একটি সাধারণ এইচটিএমএল কোডটি লিখুন এবং এটি ডাব্লু 3 ভ্যালিডেটরে পেস্ট করুন: ভ্যালিডেটর.ডব্লু । সমস্ত ত্রুটি ডক্টাইপ এবং মাথা অনুপস্থিত ট্যাগ সম্পর্কিত।

— মলোক

অবৈধ মধ্যে TR ভিতরে একটি টেবিল উপাদান নির্বাণ যখন একটি TD ভিতরে একটি টেবিল নির্বাণ valid..you উপর যাচাই করতে পারেন validator.w3.org/check

— লাকি

আমি মনে করি যে এখানে উদ্দেশ্যযুক্ত অর্থটি ছিল যে কোনও টেবিলের অভ্যন্তরে একটি টেবিলটি দৃশ্যের জন্য একটি বিজোড় দৃষ্টিভঙ্গি, যেহেতু colspan& যেমন rowspanএই সমস্যাটি সমাধান করার উদ্দেশ্যে তৈরি করা হয়েছে।

— কনারবোড

নিশ্চিত না কেন এই সমাধানটি এতগুলি উপার্জন পায়। পোস্ট কোডটি কোনও ব্রাউজার ছাড়াই সম্পূর্ণ অস্বচ্ছ, কোনও টেবিল প্রতিনিধিত্ব করে বলে মনে করা হয় এমন যৌক্তিক সম্পর্কের ব্যয় করে একটি ভিজ্যুয়াল লক্ষ্য অর্জন করে। এবং, @ মলোক দ্বারা উল্লিখিত হিসাবে, এর প্রথম বাক্যটি স্পষ্টতই মিথ্যা।

— bianpck

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>