<table>কেলেণ্ডাৰ আৰু তাৰিখ পিকাৰৰ দৰে তৃতীয়-পক্ষ ৱিজেটসমূহত উপাদানসমূহৰ ব্যাপক ব্যৱহাৰৰ বাবে , বুটষ্ট্ৰেপৰ টেবুলসমূহ অপ্ট-ইন কৰা হয় । .tableযিকোনো ত ভিত্তি শ্ৰেণী যোগ কৰক <table>, তাৰ পিছত আমাৰ বৈকল্পিক পৰিবৰ্তক শ্ৰেণীসমূহ বা স্বনিৰ্বাচিত শৈলীসমূহৰ সৈতে সম্প্ৰসাৰণ কৰক। সকলো টেবুল শৈলী Bootstrap ত উত্তৰাধিকাৰী নহয়, অৰ্থাৎ যিকোনো নেষ্টেড টেবুলক মূলৰ পৰা স্বাধীন শৈলী কৰিব পাৰি ।
আটাইতকৈ মূল টেবুল মাৰ্কআপ ব্যৱহাৰ কৰি, ইয়াত .table-ভিত্তিয় টেবুলসমূহ Bootstrap ত কেনেকৈ দেখা যায় ।
#
প্ৰথম
অন্তিম
চম্ভালা
১
মাৰ্ক
অট্টো
@mdo
২
যাকোব
থৰ্ণ্টন
@শকত
৩
লেৰী দ্য বাৰ্ড
@টুইটাৰত
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
ভিন্নতাসমূহ
টেবুলসমূহ, টেবুল শাৰীসমূহ বা ব্যক্তিগত ঘৰসমূহ ৰং কৰিবলৈ প্ৰসংগভিত্তিক শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।
শ্ৰেণী
শিৰোনাম
শিৰোনাম
ডিফল্ট
কোষ
কোষ
প্ৰাথমিক
কোষ
কোষ
মাধ্যমিক
কোষ
কোষ
সফলতা
কোষ
কোষ
বিপদ
কোষ
কোষ
সতৰ্কবাণী
কোষ
কোষ
তথ্য
কোষ
কোষ
পাতল
কোষ
কোষ
অন্ধকাৰ
কোষ
কোষ
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
সহায়ক প্ৰযুক্তিসমূহলৈ অৰ্থ প্ৰদান কৰা
অৰ্থ যোগ কৰিবলৈ ৰং ব্যৱহাৰ কৰিলে কেৱল এটা দৃশ্যমান ইংগিতহে পোৱা যায়, যিটো সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলক প্ৰেৰণ কৰা নহ’ব – যেনে স্ক্ৰীণ ৰিডাৰ। সুনিশ্চিত কৰক যে ৰঙেৰে চিহ্নিত তথ্য হয় বিষয়বস্তুৰ পৰা নিজেই স্পষ্ট (যেনে দৃশ্যমান লিখনী), বা বিকল্প উপায়ৰ যোগেদি অন্তৰ্ভুক্ত কৰা হৈছে, যেনে .visually-hiddenশ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী।
--bs-table-bgআমি কাষ্টম প্ৰপাৰ্টিৰ সৈতে এটা টেবুল চেলৰ বেকগ্ৰাউণ্ড ছেট কৰি আৰম্ভ কৰোঁ । তাৰ পিছত সকলো টেবুল ভেৰিয়েন্ট টেবুল কোষসমূহক ৰং কৰিবলে সেই স্বনিৰ্বাচিত বৈশিষ্ট্য সংহতি কৰে। এইদৰে, অৰ্ধ-স্বচ্ছ ৰং টেবুলৰ পটভূমি হিচাপে ব্যৱহাৰ কৰিলে আমি সমস্যাত নপৰো।
তাৰ পিছত আমি টেবুল চেলসমূহত এটা ইনছেট বক্স শ্বেডো যোগ কৰোঁ যাৰ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ওপৰত যিকোনো নিৰ্দিষ্ট ৰ ওপৰত to layer ৰ সৈতে background-color। কাৰণ আমি এটা বিশাল স্প্ৰেড ব্যৱহাৰ কৰো আৰু কোনো ব্লাৰ নাই, ৰংটো একস্বৰ হ’ব। যিহেতু --bs-table-accent-bgঅবিকল্পিতভাৱে আনছেট কৰা হৈছে, আমাৰ হাতত ডিফল্ট বক্স ছাঁ নাই।
যেতিয়া হয় .table-striped, .table-hoverবা .table-activeশ্ৰেণীসমূহ যোগ কৰা হয়, --bs-table-accent-bgপটভূমি ৰং কৰিবলে এটা অৰ্ধস্বচ্ছ ৰঙলৈ সংহতি কৰা হয়।
প্ৰতিটো টেবুল ভেৰিয়েন্টৰ বাবে, আমি --bs-table-accent-bgসেই ৰঙৰ ওপৰত নিৰ্ভৰ কৰি সৰ্বোচ্চ কনট্ৰাষ্টৰ সৈতে এটা ৰং সৃষ্টি কৰোঁ। উদাহৰণস্বৰূপে, ৰ বাবে উচ্চাৰণ ৰং .table-primaryগাঢ় হোৱাৰ বিপৰীতে .table-darkউচ্চাৰণৰ ৰং পাতল।
লিখনী আৰু সীমা ৰংসমূহ একে ধৰণে সৃষ্টি কৰা হয়, আৰু সিহতৰ ৰংসমূহ অবিকল্পিতভাৱে উত্তৰাধিকাৰী সূত্ৰে পোৱা যায়।
এই কোষটোৱে vertical-align: middle;টেবুলৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
এই কোষটোৱে vertical-align: middle;টেবুলৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
এই কোষটোৱে vertical-align: middle;টেবুলৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
এইটো ইয়াত কিছুমান প্লেচহোল্ডাৰ লিখনী, যথেষ্ট উলম্ব স্থান লোৱাৰ উদ্দেশ্যেৰে, পূৰ্বৰ ঘৰসমূহত উলম্ব প্ৰান্তিককৰণে কেনেকৈ কাম কৰে তাক দেখুৱাবলৈ।
vertical-align: bottom;এই ঘৰটোৱে টেবুল শাৰীৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
vertical-align: bottom;এই ঘৰটোৱে টেবুল শাৰীৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
vertical-align: bottom;এই ঘৰটোৱে টেবুল শাৰীৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
এইটো ইয়াত কিছুমান প্লেচহোল্ডাৰ লিখনী, যথেষ্ট উলম্ব স্থান লোৱাৰ উদ্দেশ্যেৰে, পূৰ্বৰ ঘৰসমূহত উলম্ব প্ৰান্তিককৰণে কেনেকৈ কাম কৰে তাক দেখুৱাবলৈ।
এই কোষটোৱে vertical-align: middle;টেবুলৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
এই কোষটোৱে vertical-align: middle;টেবুলৰ পৰা উত্তৰাধিকাৰী সূত্ৰে লাভ কৰে
এই কোষটো ওপৰৰ ফালে প্ৰান্তিককৃত হৈ থাকে।
এইটো ইয়াত কিছুমান প্লেচহোল্ডাৰ লিখনী, যথেষ্ট উলম্ব স্থান লোৱাৰ উদ্দেশ্যেৰে, পূৰ্বৰ ঘৰসমূহত উলম্ব প্ৰান্তিককৰণে কেনেকৈ কাম কৰে তাক দেখুৱাবলৈ।
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
নেষ্টেড টেবুলসমূহলৈ কোনো শৈলী লিক হোৱাত বাধা দিবলৈ, আমি >আমাৰ CSS ত চাইল্ড কম্বিনেটৰ ( ) নিৰ্বাচক ব্যৱহাৰ কৰো। যিহেতু আমি , , আৰু ৰ সকলো tds আৰু ths লক্ষ্য কৰিব লাগিব , আমাৰ নিৰ্বাচক ইয়াৰ অবিহনে যথেষ্ট দীঘল দেখা যাব। তেনেদৰে, আমি ৰ সকলো s আৰু s লক্ষ্য কৰিবলৈ যথেষ্ট অদ্ভুত দেখা নিৰ্বাচক ব্যৱহাৰ কৰো , কিন্তু কোনো সম্ভাৱ্য নেষ্টেড টেবুলৰ কোনোটোৱেই নহয়।theadtbodytfoot.table > :not(caption) > * > *tdth.table
মন কৰিব যে যদি আপুনি <tr>s এটা টেবুলৰ প্ৰত্যক্ষ সন্তান হিচাপে যোগ কৰে, সেইবোৰ অবিকল্পিতভাৱে <tr>a ত ৰেপ কৰা হ'ব , যাৰ ফলত আমাৰ নিৰ্বাচকসমূহে উদ্দেশ্য কৰা ধৰণে কাম কৰিব।<tbody>
শৰীৰবিজ্ঞান
টেবুলৰ মূৰ
টেবুল আৰু গাঢ় টেবুলৰ দৰেই, পৰিবৰ্তক শ্ৰেণীসমূহ ব্যৱহাৰ কৰক বা .table-lights ক পাতল বা গাঢ় ধূসৰ দেখাবলৈ।.table-dark<thead>
A এ <caption>টেবুলৰ বাবে হেডিঙৰ দৰে কাম কৰে। ই স্ক্ৰীণ ৰিডাৰ থকা ব্যৱহাৰকাৰীসকলক এটা টেবুল বিচাৰি উলিয়াবলৈ আৰু ইয়াৰ বিষয়ে বুজিবলৈ আৰু তেওঁলোকে ইয়াক পঢ়িব বিচাৰে নে নাই সেইটো সিদ্ধান্ত ল’বলৈ সহায় কৰে।
ব্যৱহাৰকাৰীৰ তালিকা
#
প্ৰথম
অন্তিম
চম্ভালা
১
মাৰ্ক
অট্টো
@mdo
২
যাকোব
থৰ্ণ্টন
@শকত
৩
লেৰী দ্য বাৰ্ড
@টুইটাৰত
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
টেবুলৰ <caption>ওপৰত .caption-top.
ব্যৱহাৰকাৰীৰ তালিকা
#
প্ৰথম
অন্তিম
চম্ভালা
১
মাৰ্ক
অট্টো
@mdo
২
যাকোব
থৰ্ণ্টন
@শকত
৩
লেৰী
চৰাইটো
@টুইটাৰত
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>