আমরা কি একই <টেবিল> একাধিক <টবডি> থাকতে পারি?

Question

আমরা কি এক সাথে একাধিক <tbody>ট্যাগ রাখতে পারি <table>? যদি হ্যাঁ হয় তবে কোন পরিস্থিতিতে আমাদের একাধিক <tbody>ট্যাগ ব্যবহার করা উচিত ?

Answer 1

হ্যাঁ আপনি এগুলি ব্যবহার করতে পারেন, উদাহরণস্বরূপ আমি এগুলি আরও সহজেই ডেটা গোষ্ঠীর গোষ্ঠীগুলিতে ব্যবহার করি, যেমন:

thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5;  border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5;  border: solid 1px #ddd; }

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

আপনি এখানে একটি উদাহরণ দেখতে পারেন । এটি কেবলমাত্র নতুন ব্রাউজারগুলিতে কাজ করবে, তবে এটিই আমি আমার বর্তমান অ্যাপ্লিকেশনটিতে সমর্থন করছি, আপনি জাভাস্ক্রিপ্টের জন্য গোষ্ঠীকরণ ইত্যাদি ব্যবহার করতে পারেন thing । অবশ্যই অন্যান্য ব্যবহার রয়েছে, তবে যথাযথ উদাহরণ হিসাবে, এটি আমার জন্য সবচেয়ে সাধারণ।

Comments

ঠিক আছে মহান উত্তরের জন্য ধন্যবাদ। এক tbodyবা একাধিক পর্দা পাঠকের পক্ষে কি ব্যাপার ?

— জিতেন্দ্র ব্যাস

@ ধাতু-গিয়ার-কঠিন - আমার অভিজ্ঞতায় তারা এগুলি দুর্দান্তভাবে পরিচালনা করে, যেমন: যেন তারা এক <tbody>। আপনি যখন নীড় টেবিলগুলি শুরু করেন, তখন সাধারণত পর্দা পাঠকের জন্য রিয়েল নেভিগেশন সমস্যা হয় gives

— নিক ক্র্যাভার

@ মেটাল: না, অর্থগত পার্থক্য রয়েছে - <tbody>উত্তরে বর্ণিত হিসাবে একাধিক উপাদান সারণীতে পৃথক গোষ্ঠী বর্ণনা করে। এছাড়াও আমার যুক্ত করা উচিত যে ব্যাকগ্রাউন্ডের জন্য সেলগুলি লক্ষ্য করা সাধারণত ভাল, সুতরাং সিএসএস হওয়া উচিত, উদাহরণস্বরূপtbody:nth-child(odd) td { background: #f5f5f5; }

— অসন্তুষ্টগোট

"নতুন ব্রাউজারগুলি" এর সংজ্ঞা কী?

— টিম ডাউন

@ টিমডাউন - যখন আমি বলেছিলাম "নতুন ব্রাউজারগুলি" এটি কেবল :nth-child()লিঙ্কযুক্ত বিক্ষোভের জন্য সিএসএস ব্যবহারের উল্লেখ করছে , একাধিক <tbody>যে কোনও ব্রাউজারে কাজ করবে।

— নিক ক্র্যাভার

Answer 2

হ্যাঁ. ডিটিডি থেকে

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

সুতরাং এটি এক বা একাধিক আশা করে। এটি তারপর বলতে যায়

সারণী সারিগুলির গোষ্ঠীগুলির মধ্যে যখন বিধিগুলির প্রয়োজন হয় তখন একাধিক টবি বিভাগ ব্যবহার করুন ।

Comments

HTML5 এর বৈশিষ্ট হিসাবে সামান্য এই পরিবর্তন, কিন্তু মৌলিক "হ্যাঁ, একাধিক tbodyউপাদান জরিমানা) দেহাবশেষ হয়। বিশেষ করে, আপনি এখন করছি এক করা অনুমতি দেওয়া tfootউপাদান পরtbody মত যদি আপনি । (তারা সুন্দরভাবে পার্শ্ব-ধাপ ধাপ DTD দৃষ্টিভঙ্গি বলে যে তারা একটি সরবরাহ করে না )) :-)

— টিজে ক্রাউডার

এই প্রতিক্রিয়া জন্য ধন্যবাদ। রেফারেন্সিং স্পেসগুলি আমার বইয়ের # 1 উত্তর।

— কার্নারি ক্যুরি

সুতরাং এটি এক বা একাধিক আশা করে। এই ভুল, এটি একটি সেট করা হতে পারে <tr>তাই এটি শূন্য হতে পারে (যেমন একটি tbody বা TR মানে এটি শুধু একটি TR এবং কোন tbody হতে পারে।)

— অ্যালেক্সিস Wilke

@ অ্যালেক্সিস উইলক্কস অনুসারে এটি সত্য: টেবিডি শুরুর ট্যাগটি সর্বদা প্রয়োজন হয় কেবলমাত্র যখন টেবিলটিতে কেবল একটি টেবিলের দেহ থাকে এবং কোনও টেবিলের মাথা বা পায়ের অংশ থাকে না

— গেকো এটি

Answer 3

এই উদাহরণ অনুসারে এটি করা যেতে পারে: ডাব্লু 3-স্ট্রাক্ট-টেবিল ।

Answer 4

মার্টিন জোয়ারারের সমস্যা <caption>ট্যাগটির ভুল বোঝাবুঝির কারণে ।

<caption>ট্যাগ একটি টেবিল ক্যাপশন সংজ্ঞায়িত করে।

<caption>ট্যাগ এর প্রথম সন্তান হওয়া আবশ্যক <table>ট্যাগ।

আপনি প্রতি টেবিলের জন্য কেবল একটি ক্যাপশন নির্দিষ্ট করতে পারবেন।

এছাড়াও, নোট করুন যে scopeবৈশিষ্ট্যটি কোনও <th>উপাদানের উপরে নয় বরং একটি উপাদানকে রাখা উচিত <tr>।

একটি বহু-শিরোনামের মাল্টি-টডি টেবিলটি লেখার সঠিক উপায়টি এরকম কিছু হবে:

<table id="dinner_table">
    <caption>This is the only correct place to put a caption.</caption>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">First Half of Table (British Dinner)</th>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td>Fish</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Chips</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Peas</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Gravy</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Pizza</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Salad</td>
        </tr>
        <tr>
            <th scope="row">7</th>
            <td>Oil</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Bread</td>
        </tr>
    </tbody>
</table>

Comments

captionট্যাগ উদ্বোধনী অনুসরণ করা উচিত tableট্যাগ। বিকাশকারী.মোজিলা.আর.ইন-

— সাইফার

তুমি ঠিক বলছো. আমি কোনওভাবে ডক্সের ভুল ব্যাখ্যা করেছিলাম। আমি ত্রুটি স্থির করেছি।

— জন স্লেজার

স্পেস হেডারের জন্য scope="rowgroup"(পরিবর্তে col) ব্যবহারের পরামর্শ দেয় tbody। উদাহরণ দেখুন ।

— CletusW

Answer 5

হ্যাঁ. আমি এগুলি কোনও টেবিলের প্রাসঙ্গিক অংশ যেমন গর্জনীয়ভাবে লুকিয়ে / প্রকাশ করার জন্য ব্যবহার করি। উদাহরণস্বরূপ

<table>
  <tbody id="day1" style="display:none">
    <tr><td>session1</td><tr>
    <tr><td>session2</td><tr>
  </tbody>
  <tbody id="day2">
    <tr><td>session3</td><tr>
    <tr><td>session4</td><tr>
  </tbody>
  <tbody id="day3" style="display:none">
    <tr><td>session5</td><tr>
    <tr><td>session6</td><tr>
  </tbody>
</table>

একাধিক সারি পৃথকভাবে প্রক্রিয়াজাত না করে টিবিডিগুলি ম্যানিপুলেট করে প্রতিটি বা ঠিক বর্তমান সময়ের মধ্যে টগল করার জন্য একটি বোতাম সরবরাহ করা যেতে পারে।

Answer 6

সম্পাদনা: captionট্যাগটি টেবিলের অন্তর্ভুক্ত এবং সুতরাং কেবল একবারেই এটি উপস্থিত থাকতে পারে। একটি শরীক না captionসাথে tbodyমত আমি উপাদান:

<table>
    <caption>First Half of Table (British Dinner)</caption>
    <tbody>
        <tr><th>1</th><td>Fish</td></tr>
        <tr><th>2</th><td>Chips</td></tr>
        <tr><th>3</th><td>Pease</td></tr>
        <tr><th>4</th><td>Gravy</td></tr>
    </tbody>
    <caption>Second Half of Table (Italian Dinner)</caption>
    <tbody>
        <tr><th>5</th><td>Pizza</td></tr>
        <tr><th>6</th><td>Salad</td></tr>
        <tr><th>7</th><td>Oil</td></tr>
        <tr><th>8</th><td>Bread</td></tr>
    </tbody>
</table>

খারাপ উদাহরণ উপরে: কপি করবেন না

উপরের উদাহরণটি যেমনটি আপনি প্রত্যাশা করতেন তেমন রেন্ডার করে না কারণ এ জাতীয় লেখা captionট্যাগের ভুল বোঝাবুঝিকে নির্দেশ করে । এটি সঠিকভাবে রেন্ডার করতে আপনার প্রচুর সিএসএস হ্যাকের প্রয়োজন হবে কারণ আপনি মানদণ্ডের বিরুদ্ধে যাচ্ছেন।

আমি captionট্যাগে ডাব্লু 3 সি স্ট্যান্ডার্ড সন্ধান করেছি কিন্তু একটি সুস্পষ্ট নিয়ম খুঁজে পাইনি যে জানিয়েছে যে captionটেবিলের জন্য কেবল একটি উপাদান থাকতে হবে তবে এটি আসলে ক্ষেত্রে is

Answer 7

এছাড়াও, আপনি যদি ডাব্লু 3 সি এর এইচটিএমএল ভ্যালিডেটরের<tbody> মাধ্যমে এইচটিএমএল 5 ডকুমেন্টের মাধ্যমে একাধিক ট্যাগ সহ একটি এইচটিএমএল ডকুমেন্ট চালনা করেন তবে এটি সফলভাবে বৈধতা দেবে।

Answer 8

আমি একটি জেএসফিডাল তৈরি করেছি যেখানে আমার কাছে টেবিলের সাহায্যে দুটি নেস্ট এনজি-রিপিট এবং পিতামাতাকে এনজি-রিপিট করা হয়েছে। আপনি যদি টেবিলের কোনও সারি পরিদর্শন করেন তবে আপনি দেখতে পাবেন যে সেখানে ছয়টি টিডি উপাদান রয়েছে, অর্থাত পিতামাতার স্তর।

এইচটিএমএল

<div>
        <table class="table table-hover table-condensed table-striped">
            <thead>
                <tr>
                    <th>Store ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Cost</th>
                    <th>Sales</th>
                    <th>Revenue</th>
                    <th>Employees</th>
                    <th>Employees H-sum</th>
                </tr>
            </thead>
            <tbody data-ng-repeat="storedata in storeDataModel.storedata">
                <tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
                    <td>{{storedata.store.storeId}}</td>
                    <td>{{storedata.store.storeName}}</td>
                    <td>{{storedata.store.storeAddress}}</td>
                    <td>{{storedata.store.storeCity}}</td>
                    <td>{{storedata.data.costTotal}}</td>
                    <td>{{storedata.data.salesTotal}}</td>
                    <td>{{storedata.data.revenueTotal}}</td>
                    <td>{{storedata.data.averageEmployees}}</td>
                    <td>{{storedata.data.averageEmployeesHours}}</td>
                </tr>
                <tr data-ng-show="dayDataCollapse[$index]">
                    <td colspan="2">&nbsp;</td>
                    <td colspan="7">
                        <div>
                            <div class="pull-right">
                                <table class="table table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Date [YYYY-MM-dd]</th>
                                            <th>Cost</th>
                                            <th>Sales</th>
                                            <th>Revenue</th>
                                            <th>Employees</th>
                                            <th>Employees H-sum</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
                                            <td class="pullright">
                                                <button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
                                                </button>
                                            </td>
                                            <td>{{dayData.date}}</td>
                                            <td>{{dayData.cost}}</td>
                                            <td>{{dayData.sales}}</td>
                                            <td>{{dayData.revenue}}</td>
                                            <td>{{dayData.employees}}</td>
                                            <td>{{dayData.employeesHoursSum}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

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