সিএসএস টেবিল - CSS Table


সিএসএস এর টেবিল প্রপার্টি গুলো ব্যবহার করে এইচটিএমএল টেবিলে সম্পূর্ণ স্টাইলিং করা যায়। নিছে একটি টেবিল দেখুন।

বিষয়বিস্তারিত নাম
ফুলের নামগোলাপ, বেলী, বকুল, হাস্নাহেনা।
ফলের নামআম, কমলা, জাম, কাঁঠাল।
পাখির নামটিয়ে, দোয়েল, শালিক, কোয়েল।
পশুর নামবাঘ, সিংহ, বেড়াল, কুকুর।


টেবিল প্রপার্টি

এইচটিএমএল টেবিলে সিএসএস এর যে সব প্রপার্টি ব্যবহার করা যায় সেগুলো হল border, border-collapse, color, background-color, width, height, padding, text-align, vertical-align ইত্যাদি।


border প্রোপার্টি

সিএসএস border প্রোপার্টি ব্যবহার করে এইচটিএমএল এর টেবিলে স্টাইল করা যায়। এর মাধ্যমে টেবিলে বর্ডার তৈরি করা যায়।

টেবিলে বর্ডার প্রপার্টি ব্যবহার করে নিচে একটি উদাহরণ দেখুন -

উদাহরণ

table, th, td {
    border: 2px solid blue;
    }

কোড এডিটর


বর্ডার প্রপার্টির ব্যবহার সিএসএস বর্ডারের মতই, প্রথমে বর্ডারের width, তারপর বর্ডারের স্টাইল যেমন- solid, dotted ইত্যাদি এবং সর্বশেষে বর্ডারের রং বা color উল্লেখ করতে হয়।

সিএসএস এর border প্রোপার্টির ব্যবহার জানতে আমাদের সিএসএস বর্ডার টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

এই কোডের ফলে double border প্রদর্শিত হবে। এর কারন টেবিলের th এবং td এর নিজস্ব বর্ডার। টেবিলে single বর্ডার প্রদর্শন করতে হলে Collapse Border প্রপার্টি ব্যবহার করতে হবে।


border-collapse প্রোপার্টি

সিএসএস border-collapse প্রপার্টি ব্যবহার করার ফলে টেবিলের বর্ডার single বা আলাদা আলাদা ভাবে প্রদর্শিত হয়।

টেবিলে border-collapse প্রপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

table {
   border-collapse: collapse;
   }

table, th, td {
   border: 2px solid teal;
   }

কোড এডিটর



border-spacing প্রোপার্টি

সিএসএস border-spacing প্রপার্টি ব্যবহার করে টেবিলের ঘর গুলো এবং বর্ডার এর মধ্যস্থিত দূরত নির্ধারণ করা যায়। তবে এর জন্য অবশ্যই সিএসএস এর border-spacing প্রোপার্টির মান বা value separate নির্ধারিত করতে হবে।

border-spacing প্রপার্টির মান হতে পারে px, cm, em ইত্যাদি।

নিছে একটি উদাহরন দেখুন, যেখানে টেবিলে border-collapse প্রপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

#table_1 {
  border-collapse: separate;
  border-spacing: 15px;
}

#table_2 {
  border-collapse: separate;
  border-spacing: 15px 50px;
}

কোড এডিটর


নোট - border-collapse প্রপার্টি তে ০১ টি মান বা value নির্ধারণ করলে, তা আনুভূমিক এবং উলম্ব দুররত নির্ধারণ করে। আবার ২ টি মান বা value নির্ধারণ করলে, তখন প্রথমটি আনুভূমিক বা horizontal এবং দ্বিতীয়টি উলম্ব বা vertical দুররত নির্ধারণ করে।


color প্রপার্টি ব্যবহার

সিএসএস এর colorbackground-color প্রপার্টি ব্যবহার করে একই সাথে টেবিলের বর্ডার, টেক্সট এবং ব্যাকগ্রাউন্ড এর রঙ নির্ধারণ করা যায়।

নীচে একই সাথে টেবিলের বর্ডার, টেক্সট এবং ব্যাকগ্রাউন্ড এ রঙ নির্ধারণ করার একটি উদাহরণ দেয়া হল -

উদাহরণ

table, td, th {
   border:1px solid green;
   }

th {
   background-color:green;
   color:white;
   }

কোড এডিটর


সিএসএস এর রঙ সম্পর্কে জানতে আমাদের সিএসএস রঙ টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।


width এবং height প্রোপার্টি

সিএসএস এর width এবং height প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল টেবিল এর আকার অর্থাৎ দৈর্ঘ্য ও প্রস্থ নির্ধারণ করা যায়।

width এবং height প্রোপার্টির মান বা value বিভিন্ন ভাবে নির্ধারণ করা যায়। যেমন - পিক্সেল বা px এর সাহায্যে, শতকরা বা % পদ্ধতি ইত্যাদি ব্যবহার করে।

width এবং height প্রোপার্টি ব্যবহার করে নিছে একটি উদাহরন দেখুন।

উদাহরণ

table {
   width:100%;
   }

th {
   height:50px;
   }

কোড এডিটর



vertical-align প্রোপার্টি

সিএসএস এর vertical-align প্রপার্টি ব্যবহার করে টেবিল এর ঘর গুলতে অর্থাৎ <th> এবং <td> এলিমেন্ট এর মধ্যস্থিত কোন কন্টেন্ট যেমন লেখা বা text এর উলম্ব অবস্থান নির্ধারণ করা যায়।

vertical-align প্রপার্টির মান বা value হতে পারে top, middle, এবং bottom.

সিএসএস এর vertical-align প্রপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

td {
   height: 100px;
   vertical-align: middle;
   }

কোড এডিটর



text-align প্রোপার্টি

সিএসএস এর text-align প্রপার্টি ব্যবহার করে টেবিল এর ঘর গুলতে অর্থাৎ <th> এবং <td> এলিমেন্ট এর মধ্যস্থিত কোন কন্টেন্ট যেমন লেখা বা text এর আনুভূমিক অবস্থান নির্ধারণ করা যায়।

text-align প্রপার্টির মান বা value হতে পারে left, right, এবং center.

সিএসএস এর text-align প্রপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

th {
   text-align: center;
   }

কোড এডিটর



padding প্রোপার্টি

সিএসএস এর padding প্রোপার্টি ব্যবহার করে কোন টেবিলের বর্ডার এবং কন্টেন্ট যেমন - কোন লেখা বা text, ছবি বা image ইত্যাদির মাঝে ফাকা স্থান নির্ধারণ করা যায়। এ জন্য এইচটিএমএল এর <th> এবং <td> এলিমেন্ট এর সাথে padding প্রোপার্টি ব্যবহার করতে হয়।

নিচে টেবিলে padding প্রোপার্টি ব্যবহার করে একটা উদাহরণ দেখুন।

উদাহরণ

td {
   padding:15px;
   }

কোড এডিটর


সিএসএস এর padding প্রোপার্টি সম্পর্কে জানতে আমাদের সিএসএস প্যাডিং টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।


রেস্পন্সিভ টেবিল

রেস্পন্সিভ টেবিল হল এমন একটি টেবিল, যেটা ব্রাউজার এর স্ক্রীন সাইজ টেবিলের প্রস্থের তুলনায় কম হলে, একটি আনুভূমিক scrool bar প্রদর্শন করে।

একটি কন্টেইনার এলিমেন্ট যেমন - <div> এর সাথে overflow-x:auto প্রোপার্টি ব্যবহার করে এটা করা যায়।

নিছে একটু উদাহরন দেখুন।

উদাহরণ

<div style="overflow-x:auto;">

  <table>
    ... table content ...
  </table>

</div>

কোড এডিটর



সকল টেবিল প্রোপার্টি

প্রোপার্টিমানবর্ণনা
border
border-collapse
border-spacing
caption-side
empty-cells
table-layout