একটি HTML টেবিলকে CSS এর সাহায্যে সুন্দরভাবে উপস্থাপন করা যায়। নিম্নে একটি টেবিলের উদাহরণ দেয়া হলো:
টেবিল বর্ডার (Borders)
CSS এ টেবিল বর্ডার যোগ করার জন্য border property ব্যবহার করতে হবে।
নিম্নে উদাহরণে <table>, <th>, এবং <td> এলিমেন্টে কালো (black) বর্ডার যোগ করা হয়েছে:
table, th, td {
border: 1px solid black;
}
উপরোক্ত উদাহরণে টেবিলটিতে double border যুক্ত হয়েছে, কেননা টেবিল এবং <th>/<td> এলিমেন্টে উভয়ের অলাদা বর্ডার রয়েছে।
এখন, টেবিলটিতে single border দেখাতে চাইলে border-collapse property যোগ করতে হবে।
Collapse Borders
border-collapse property এর সাহায্যে টেবিলের বর্ডার single অথবা separated হবে তা নির্ধারণ করা হয়। নিম্নের উদাহরনে টেবিলে single বর্ডার দেখানো হয়েছে:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
টেবিলের Table Width এবং Height
width এবং height properties এর সাহায্যে টেবিলের Width ও Height নির্দিষ্ট করা যায়।
নিম্নের উদাহরণে টেবিলের Width 100% এবং <th> এলিমেন্টের Height 50px নির্দিষ্ট করা হয়েছে:
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Text Alignment
text-align property এর সাহায্যে Text এর Alignment left, right বা center নির্দিষ্ট করা যায়।
সাধারণত, <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে center Align, <td> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে left Align.
নিম্নের উদাহরণে <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment, left এ নির্দিষ্ট করা হয়েছে:
th {
text-align: left;
}
Vertical Text Alignment
vertical-align property এর সাহায্যে টেবিলে সেলের vertical alignment নির্ধারণ করা হয়।
এক্ষেত্রে সেলের Text Alignment top, bottom অথবা middle নির্ধারণ করা হয়। (<th> এবং <td> উভয় এলিমেন্ট এর জন্য)
নিম্নের উদাহরণে <td> এলিমেন্টের এর জন্য Text এর vertical Alignment, bottom এ নির্দিষ্ট করা হয়েছে:
td {
height: 50px;
vertical-align: bottom;
}
টেবিল Padding
টেবিল বর্ডার এবং content এর মাঝখানের space নির্ধারণ করার জন্য <td> and <th> এলিমেন্টে padding property ব্যবহার করা হয়।
td {
padding: 15px;
}
টেবিল Color
নিচের উদাহরণে টেবিলের বর্ডার Color যোগ করার জন্য “border:” property ব্যবহার করা হয়েছে।
<th> এলিমেন্টে background color যোগ করার জন্য “background-color:” property ব্যবহার করা হয়।
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
