ওয়েব পেজে অনেক সময় টেবিলভিক্তিক
ডেটা প্রদর্শনের প্রয়োজন হয়। তখন টেবিল ট্যাগ ব্যাবহার করে ডেটা প্রদর্শন করানো
হয়ে থাকে।
টেবিল তৈরি করতে প্রাথমিক
ভাবে ৪টি ট্যাগ লাগে।
<table>
</table>, <th></th> ,
<tr></tr> ,<td></td>,
টেবিল শুরু ট্যাগ হল <table> আর শেষ ট্যাগ হল </table> এর মাঝে আরও ট্যাগ ব্যাবহার করে টেবিলের row বা সারি এবং column বা স্তম্ভ বানানো হয়। row এর জন্য <tr></tr> ব্যাবহার করা হয়।আর column এর জন্য <td></td> ব্যাবহার করা হয়। টেবিলের হেডিং বা শিরোনাম দিতে <th></th> ব্যাবহার করা হয়।
নিচে একটা border সহ টেবিলের নমুনা
দেখানো হল।
<html>
<head>
<title> bdtutorialweb.blogspot.com</title>
</head>
<body bgcolor=" #eee" style="text-align:center">
<table border="1">
<tr>
<th>SL</th>
<th>Table Hedding1</th>
<th> Table Hedding2</th>
<th> Table Hedding3</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> <tr>
<td>03</td>
<td>500</td>
<td>800</td>
<td>200</td>
</tr>
</table>
</body>
</html>
<table
border="1"> এখানে border="1" এর মাধ্যমে টেবিলের জন্য সিঙ্গেল বর্ডার
ব্যবহার করা হয়েছে , প্রয়োজন অনুসারে 1 এর স্থানে 2,3,4 ইত্যাদি ব্যবহার
করা যাবে।
টেবিলের সারি
তৈরির জন্য <tr></tr> ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির
জন্য <td></td>ব্যবহার করা হয়।
<th></th> এর মাধ্যমে টেবিল হেডার তৈরি করা হয়েছে।<th>Book</th> এর মধ্যের Book লেখাটি একটু মোটা
দেখাবে।
দেখুন th এলিমেন্টের
লেখাগুলি হেডিং আকারে দেখাচ্ছে।
তবে টেবিল দেয়ার
উপযুক্ত নিয়ম হচ্ছে টেবিলের হেডার, বডি এবং ফুটার সহ
দেয়া।
টেবিলের মধ্যে
কোন সেল খালি রাখার জন্য <td></td>
এর মাঝে কিছু না লেখলেই
হবে। শুধুমাত্র <td></td> ব্যবহার করতে হবে।
সাইটের নেভিগেশন
বার তৈরির জন্য টেবিল ব্যবহার করা যেতে পারে, এক্ষেত্রে প্রতিটা সেলের
লেখার সাথে লিংক তৈরি করে দিলেই হবে যেমন <td><a href=" www.bdtutorialweb.blogspot.com "> Web
Design</a></td> অথবা <th><a href=" www.bdtutorialweb.blogspot.com
"> Web Design </a></th>
আপনি চাইলে সিএসএস ব্যাবহার
করেও টেবিল border দিতে পারেন। এর জন্য আপনাকে head section এর ভিতরে style ব্যাবহার করে কোড লিখতে
হবে।
<head>
<style>
table, th, td {
border: 1px
solid black;
}
</style>
</head>
উপরে লেখা কোড দিয়ে টেবিল
এর border 1px করে দেয়া হয়েছে। এবং কালার
দেয়া হয়েছে কালো। সিএসএস দিয়ে টেবিলকে সুন্দর করে ডিজাইন করা যায়।যেমন আপনি যদি
টেবিল এর padding বাড়াতে চান তাহলে style ব্যাবহার করে কোড লিখেন
নিচের মতো।
<head>
<style>
th, td {
padding: 15px;
}
</style>
</head>
এভাবে কোড লিখেন তাহলে
টেবিল দেখাবে নিচের ছবির মতো।
text-align ব্যাবহার করে টেবিলের ভিতরের লেখাকে ডানে,বামে বা মাঝখানে
রাখা যায়।
<head>
<style>
th {
text-align: left;
}
</style>
</head>
টেবিলের border spacing দেয়ার জন্য css দিয়ে border-spacing:
15px; এভাবে কোড ব্যাবহার করতে পারেন।
rowspan এবং colspan
rowspan এবং colspan ব্যাবহার করে টেবিল ব্যাবহার করা নিচে দেখানো হল।
colspan ব্যাবহার করে টেবিল।
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px
solid black;
border-collapse: collapse;
}
th, td {
padding:
5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th
colspan="2">Mobile Number</th>
</tr>
<tr>
<td>Hridoy Khan</td>
<td>+880171******</td>
<td>+8801558******</td>
</tr>
</table>
</body>
</html>
rowspan ব্যাবহার করে
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:
1px solid black;
border-collapse: collapse;
}
th, td {
padding:
5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th
colspan="2">Mobile Number</th>
</tr>
<tr>
<td>Hridoy Khan</td>
<td>+880171******</td>
<td>+8801558******</td>
</tr>
</table>
</body>
</html>
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন