খুব সহজেই এইচটিএমএল দিয়ে টেবিল তৈরি করুন

লেখক : , প্রকাশকাল : 10 January, 2013

বলতে গেলে তেমন কিছু পারি না, তাই প্রতিনিয়ত শেখার চেষ্টা করে যাচ্ছি। শিখতে শিখতে সেদিন আমার সাইট এর জন্য একটা পোস্ট করব ভাবছি। কিন্তু সেই পোস্ট টা টেবিল আকারে না হলে মোটেই ভালো দেখাবে না। এবার টেবিল শেখার পালা :D যাইহোক টেবিলটা শিখে নিলাম এবং আমার সাইট এ সুন্দর করে একটা পোস্ট দিলাম :Pতারপর ভাবলাম আমার মত হইত অনেকেরই এই টেবিল প্রয়োজন । তাই আপনাদের সাথে শেয়ার করতে চলে এলাম।
table_cell_alignments
তো চলুন দেখা যাক কেমন করে এইচটিএমএল দিয়ে একটি আকর্ষণীয় টেবিল তৈরি করা যায় :

<html>
<head>
<title>www.earntricks.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">
<table border="1">
<tr>
<th>SL</th>
<th>Username</th>
<th>Password</th>
<th>Expiration</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>

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

Table এর কিছু কোড এর ব্যবহার:

<table border=”1″> এখানে border=”1″ এর মাধ্যমে টেবিলের জন্য সিঙ্গেল বর্ডার ব্যবহার করা হয়েছে . আপনার প্রয়োজন অনুসারে 1 এর স্থানে 2,3,4 ইত্যাদি ব্যবহার করা যাবে।

টেবিলের প্রতিটা সারি তৈরির জন্য <tr></tr> ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির জন্য <td></td>ব্যবহার করা হয়।
<th></th> এর মাধ্যমে টেবিল হেডার তৈরি করা হয়েছে।<th>Username</th> এর মধ্যের Username লেখাটি একটু মোটা দেখাবে।
টেবিলের মধ্যে কোন সেল খালি রাখার জন্য <td></td> এর মাঝে কিছু না লেখলেই হবে। শুধুমাত্র <td></td> ব্যবহার করতে হবে।

যদি কারো কোনো সমস্যা হয় তাহলে আমাকে জানাবেন। আর একটু সময় থাকলে  আমার ব্লগ থেকে একটু ঘুরে আস্তে পারেন :P

comments

মন্তব্য প্রদান করুন

*