আপনি কীভাবে এইচটিএমএল টেবিলগুলিতে কলস্পান এবং সারি স্প্যান ব্যবহার করবেন?

Question

এইচটিএমএল টেবিলগুলির মধ্যে কীভাবে সারি এবং কলামগুলি মার্জ করতে হয় তা আমি জানি না।

আপনি কি আমাকে এইচটিএমএলে এমন একটি টেবিল তৈরি করতে সহায়তা করতে পারেন?

Comments

তাদের ঠিক একীভূত করবেন? মানে colspan?

— animuson

@ ডেভিড থমাস আমি 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 থেকে শুরু হয় এবং তাদের পথ ধরে কাজ করে। আসুন গ্রাফিক্স দিয়ে ব্যাখ্যা করি, কারণ তারা এত মজা করে!

আপনি যখন কোনও টেবিল শুরু করেন, আপনি একটি গ্রিড তৈরি করেন। আপনার প্রথম সারি এবং ঘর শীর্ষ বাম কোণে থাকবে। এটিকে অ্যারের পয়েন্টারের মতো ভাবেন, এক্স এর প্রতিটি বর্ধিত মানের সাথে ডানদিকে চলে যাওয়া এবং y এর প্রতিটি বর্ধিত মানের সাথে নিচে চলে যাওয়া।

আপনার প্রথম সারির জন্য, আপনি কেবলমাত্র দুটি ঘর নির্ধারণ করছেন। একটিতে 2 টি সারি নিচে এবং একটি জুড়ে 4 টি কলাম বিস্তৃত। সুতরাং আপনি যখন আপনার প্রথম সারির শেষ প্রান্তে পৌঁছেছেন তখন এমন কিছু দেখাচ্ছে:

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

এখন সারিটি শেষ হয়ে গেছে, "অ্যারে পয়েন্টার" পরবর্তী সারিতে নেমে আসে। যেহেতু এক্স পজিশন 0 ইতিমধ্যে কোনও পূর্ববর্তী কক্ষ দ্বারা নেওয়া হয়েছে, তাই কোষ পূরণ করা শুরু করতে এক্স পজিশনটি 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>

বিকল্পভাবে , আপনি যদি একটি বিদ্যমান রোসেটটিতে বাম এবং ডানদিকে যুক্ত করতে চান তবে আপনি একই ধরণের ফলাফলটি একটি বিপর্যয়ের 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

আপনি rowspan="n"এটির স্প্যান nসারি তৈরি করার জন্য একটি টিডি উপাদান ব্যবহার করতে পারেন , এবং colspan="m"একটি টিডি উপাদানের উপর স্প্যান mকলাম তৈরি করতে পারেন ।

দেখে মনে হচ্ছে আপনার প্রথম টিডির একটি দরকার rowspan="2"এবং পরের টিডির একটি দরকার colspan="4"।

Answer 6

আপনি যে প্রথম টিডিটির জন্য সন্ধান করছেন তা হ'ল 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

কলস্পান এবং রোউস্পান একটি টেবিলকে সারিগুলিতে বিভক্ত করা হয় এবং প্রতিটি সারিটি কোষে বিভক্ত হয়। কিছু পরিস্থিতিতে আমাদের একাধিক কলাম বা সারি জুড়ে টেবিল সেলগুলির স্প্যান (বা মার্জড) প্রয়োজন। এই পরিস্থিতিতে আমরা কলস্পান বা রওস্পান বৈশিষ্ট্যগুলি ব্যবহার করতে পারি।

কলস্পান কলস্পান বৈশিষ্ট্যটি এমন একটি কলামের সংখ্যা নির্ধারণ করে যা একটি ঘরের অনুভূমিকভাবে বিস্তৃত হওয়া উচিত (বা মার্জ করা)। এটি হ'ল আপনি একটি সারিতে পরপর দুটি বা আরও বেশি ঘর একত্রীকরণ করতে চান।

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

রোউস্পান সারি স্প্যান বৈশিষ্ট্যটি উল্লম্বভাবে একটি ঘরের বিস্তৃত হওয়া সারিগুলির সংখ্যা নির্দিষ্ট করে। এটি হল, আপনি একই কলামে দুটি বা আরও বেশি ঘর উল্লম্বভাবে একত্রীকরণ করতে চান।

<td rowspan=2 >

কীভাবে রওস্পান করবেন?

<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

আমি আমার অনুরূপ একটি যুক্তির জন্য এনজিআইফ ব্যবহার করেছি। এটি নিম্নরূপ:

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

এখানে, আমি আমার মডেল অবজেক্ট থেকে সারি স্প্যান মান পাচ্ছি।

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>