সিএসএস এর টেবিল প্রপার্টি গুলো ব্যবহার করে এইচটিএমএল টেবিলে সম্পূর্ণ স্টাইলিং করা যায়। নিছে একটি টেবিল দেখুন।
বিষয় | বিস্তারিত নাম |
---|---|
ফুলের নাম | গোলাপ, বেলী, বকুল, হাস্নাহেনা। |
ফলের নাম | আম, কমলা, জাম, কাঁঠাল। |
পাখির নাম | টিয়ে, দোয়েল, শালিক, কোয়েল। |
পশুর নাম | বাঘ, সিংহ, বেড়াল, কুকুর। |
এইচটিএমএল টেবিলে সিএসএস এর যে সব প্রপার্টি ব্যবহার করা যায় সেগুলো হল border, border-collapse, color, background-color, width, height, padding, text-align, vertical-align ইত্যাদি।
সিএসএস border প্রোপার্টি ব্যবহার করে এইচটিএমএল এর টেবিলে স্টাইল করা যায়। এর মাধ্যমে টেবিলে বর্ডার তৈরি করা যায়।
টেবিলে বর্ডার প্রপার্টি ব্যবহার করে নিচে একটি উদাহরণ দেখুন -
table, th, td { border: 2px solid blue; }
বর্ডার প্রপার্টির ব্যবহার সিএসএস বর্ডারের মতই, প্রথমে বর্ডারের width, তারপর বর্ডারের স্টাইল যেমন- solid, dotted ইত্যাদি এবং সর্বশেষে বর্ডারের রং বা color উল্লেখ করতে হয়।
সিএসএস এর border প্রোপার্টির ব্যবহার জানতে আমাদের সিএসএস বর্ডার টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।
এই কোডের ফলে double border প্রদর্শিত হবে। এর কারন টেবিলের th এবং td এর নিজস্ব বর্ডার। টেবিলে single বর্ডার প্রদর্শন করতে হলে Collapse Border প্রপার্টি ব্যবহার করতে হবে।
সিএসএস border-collapse প্রপার্টি ব্যবহার করার ফলে টেবিলের বর্ডার single বা আলাদা আলাদা ভাবে প্রদর্শিত হয়।
টেবিলে border-collapse প্রপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
table { border-collapse: collapse; } table, th, td { border: 2px solid teal; }
সিএসএস 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 ও background-color প্রপার্টি ব্যবহার করে একই সাথে টেবিলের বর্ডার, টেক্সট এবং ব্যাকগ্রাউন্ড এর রঙ নির্ধারণ করা যায়।
নীচে একই সাথে টেবিলের বর্ডার, টেক্সট এবং ব্যাকগ্রাউন্ড এ রঙ নির্ধারণ করার একটি উদাহরণ দেয়া হল -
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
সিএসএস এর রঙ সম্পর্কে জানতে আমাদের সিএসএস রঙ টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।
সিএসএস এর width এবং height প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল টেবিল এর আকার অর্থাৎ দৈর্ঘ্য ও প্রস্থ নির্ধারণ করা যায়।
width এবং height প্রোপার্টির মান বা value বিভিন্ন ভাবে নির্ধারণ করা যায়। যেমন - পিক্সেল বা px এর সাহায্যে, শতকরা বা % পদ্ধতি ইত্যাদি ব্যবহার করে।
width এবং height প্রোপার্টি ব্যবহার করে নিছে একটি উদাহরন দেখুন।
table { width:100%; } th { height:50px; }
সিএসএস এর vertical-align প্রপার্টি ব্যবহার করে টেবিল এর ঘর গুলতে অর্থাৎ <th> এবং <td> এলিমেন্ট এর মধ্যস্থিত কোন কন্টেন্ট যেমন লেখা বা text এর উলম্ব অবস্থান নির্ধারণ করা যায়।
vertical-align প্রপার্টির মান বা value হতে পারে top, middle, এবং bottom.
সিএসএস এর vertical-align প্রপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
td { height: 100px; vertical-align: middle; }
সিএসএস এর text-align প্রপার্টি ব্যবহার করে টেবিল এর ঘর গুলতে অর্থাৎ <th> এবং <td> এলিমেন্ট এর মধ্যস্থিত কোন কন্টেন্ট যেমন লেখা বা text এর আনুভূমিক অবস্থান নির্ধারণ করা যায়।
text-align প্রপার্টির মান বা value হতে পারে left, right, এবং center.
সিএসএস এর text-align প্রপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
th { text-align: center; }
সিএসএস এর 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 |