টেবিল টেক্সট এলাইনমেন্ট | সি এস এস বাংলা টিউটোরিয়াল

টেবিল টেক্সট এলাইনমেন্ট (Table Text Alignment)

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

td
{
text-align:right;

}

 

ডানে রাখতে হলে Declaration করতে হবে text-align:left;
মাঝখানে রাখতে হলে Declaration করতে হবে text-align:center;


এখন যদি প্রতিটা সেলের টেক্সট সমূহের ভার্টিক্যাল এলাইনমেন্ট অর্থাৎ প্রতিটা সেলের মধ্যে টেক্সট সমূহ উপরের দিকে থাকবে না নিচের দিকে থাকবে অথবা মাঝামাঝি অবস্থানে থাকবে কিনা নির্ধারণ করতে হয় তাহলে Declaration এ vertical-align নির্ধারণ করে দিতে হবে।টেক্সট সমূহ নিচের দিকে রাখার জন্য Declaration করতে হবে,

td
{
vertical-align:bottom;
}

 

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
}
table,th,td
{
border:1px solid #F00;
}
table
{
width:300px; height:200px;
}
th
{
height:50px;
}
td
{
text-align:center;
}
td
{
vertical-align:bottom;
}

</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।


লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট টিউটোহোস্ট ২০১০-২০১২