একটি সিএসএস "প্রদর্শন: টেবিল-কলাম" কীভাবে কাজ করার কথা?

Question 1

নিম্নলিখিত এইচটিএমএল এবং সিএসএস দেওয়া, আমি আমার ব্রাউজারে একেবারে কিছুই দেখতে পাই না (লেখার সময় Chrome এবং IE সর্বশেষ)। সমস্ত কিছু 0x0 পিক্সে নেমে যায়। কেন?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Question 2

সিএসএস সারণী মডেলটি এইচটিএমএল টেবিল মডেলের উপর ভিত্তি করে http://www.w3.org/TR/CSS21/tables.html

একটি টেবিলটি ROWS এ বিভক্ত এবং প্রতিটি সারিতে এক বা একাধিক ঘর রয়েছে। ঘরগুলি ROWS এর শিশু, এগুলি কলামের কখনও নেই।

"প্রদর্শন: টেবিল-কলাম" কলামার লেআউটগুলি তৈরি করার জন্য কোনও প্রক্রিয়া সরবরাহ করে না (যেমন একাধিক কলাম সহ সংবাদপত্রের পৃষ্ঠা, যেখানে সামগ্রীটি একটি কলাম থেকে অন্য স্তরে প্রবাহিত হতে পারে)।

বরং, "টেবিল-কলাম" কেবলমাত্র টেবিলের সারিগুলির মধ্যে সংশ্লিষ্ট কক্ষগুলিতে প্রযোজ্য বৈশিষ্ট্য সেট করে। উদাহরণস্বরূপ "প্রতিটি সারিতে প্রথম কক্ষের পটভূমি রঙ সবুজ" বর্ণিত হতে পারে।

টেবিলটি নিজেই সর্বদা একইভাবে যেমন এটি এইচটিএমএল তে কাঠামোযুক্ত হয়।

এইচটিএমএলে (লক্ষ্য করুন যে "টিডি" গুলি "টিআর" এর ভিতরে রয়েছে, "কোল" এর ভিতরে নয়):

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

সিএসএস সারণী বৈশিষ্ট্য ব্যবহার করে এইচটিএমএল সম্পর্কিত (নোট করুন যে "কলাম" ডিভগুলিতে কোনও সামগ্রী নেই - মানকটি সরাসরি কলামগুলিতে সামগ্রীর জন্য অনুমতি দেয় না):

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 1</div>
    <div class="mycell">contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 2</div>
    <div class="mycell">contents of second cell in row 2</div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

বিকল্প : উভয় "সারি" এবং "কলাম" নীচে প্রতিটি সারি এবং ঘরে একাধিক ক্লাস বরাদ্দ করে স্টাইল করা যেতে পারে। এই পদ্ধতির মাধ্যমে বিভিন্ন ঘর বা পৃথক কোষকে স্টাইল করার জন্য সুনির্দিষ্ট করে সর্বাধিক নমনীয়তা পাওয়া যায়:

//Useful css declarations, depending on what you want to affect, include:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1, wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.mytable .cell1 {
}

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow row1">
    <div class="mycell cell1">contents of first cell in row 1</div>
    <div class="mycell cell2">contents of second cell in row 1</div>
  </div>
  <div class="myrow row2">
    <div class="mycell cell1">contents of first cell in row 2</div>
    <div class="mycell cell2">contents of second cell in row 2</div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

আজকের নমনীয় ডিজাইনে, যা <div>একাধিক উদ্দেশ্যে ব্যবহৃত হয়, প্রতিটি ডিভিতে কিছু শ্রেণি স্থাপন করা, এটি উল্লেখ করতে সহায়তা করা বুদ্ধিমানের কাজ । এখানে, <tr>HTML এ যা ব্যবহৃত হত তা হয়ে ওঠে class myrow, এবং <td>হয়ে ওঠে class mycell। এই সম্মেলনটি হ'ল উপরের সিএসএস নির্বাচনকারীদের দরকারী করে তোলে।

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

পুনরায় পারফরম্যান্স সরিয়ে নেওয়ার মূল পয়েন্টটি হ'ল নির্বাচকের সর্বশেষ আইটেমটি যথাসম্ভব নির্দিষ্ট হওয়া উচিত এবং এটি কখনই হওয়া উচিত নয় *।

Question 3

"টেবিল-কলাম" প্রদর্শনের ধরণটির অর্থ এটি <col>HTML এ ট্যাগের মতো কাজ করে - যেমন একটি অদৃশ্য উপাদান যার প্রস্থ * এনকোলেসিং টেবিলের সংশ্লিষ্ট শারীরিক কলামের প্রস্থকে পরিচালনা করে।

সিএসএস টেবিলের মডেল সম্পর্কে আরও তথ্যের জন্য ডাব্লু 3 সি স্ট্যান্ডার্ডটি দেখুন ।

* এবং কয়েকটি অন্যান্য বৈশিষ্ট্য যেমন সীমানা, ব্যাকগ্রাউন্ড।