HTML Tables Tutorial (এইচটিএমএল টেবিল টিউটোরিয়াল)

এইচটিএমএল টেবিল (HTMLTables)

টেবিল হল Horizontal সারি এবং vertical কলামের বিন্যাস। এটা tabular data প্রদর্শনের ক্ষেত্রে অনেক গুরুত্বপুর্ন। ডকুমেন্টের এলিমেন্ট নিয়ন্ত্রনের জন্য ওয়েব ডিজাইনারদের কাছে এটা আরো বেশি গুরুত্বপুর্ন । সারি এবং কলামের ইন্টারসেকশনকে cell বলে। সকল এইচটিএমএল টেবিল <table> ট্যাগ দিয়ে শুরু হয় এবং </table> ট্যাগ দিয়ে শেষ হয়।

১.<tr> ট্যাগ Horizontal সারি নিদের্শ করে।

২  <td> ট্যাগ ঐ Horizontal সারির data cell নিদের্শ করে।

৩ <th> ট্যাগ data cell এর টেবিল heading হিসাবে কাজ করে।

৪ <tfoot> ট্যাগ টেবিলের footer যোগ করার জন্য ব্যবহার হয়।

<table border="1">

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>

<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>

প্রদর্শন:

Row 1 Cell 1

Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

অনেকগুলো সারি এবং কলামেরবিস্তার:

Rowspan ব্যাবহার করে অনেকগুলো সারির বিস্তার এবং colspan  ব্যাবহার করে অনেকগুলো কলামের বিস্তার করা হয়। আপনি যদি কলামের header দিতে চান তাহলে <th> ট্যাগ ব্যাবহার করতে হবে। <th> ট্যাগ ব্যাবহার করলে default হিসাবে  header টি বোল্ড আকারে দেখাবে।

<table border="1">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>

<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>

</table>

প্রদর্শন:

Row 1 Cell 1    Row 1 Cell 2

Row 2 Cell 1    Row 2Cell 2

Cell padding এবং spacing

এখানে cellpadding বলতে বোঝায় টেবিলের বর্ডার এবং টেবিলের মধ্যে ধারনকৃত অংশ (লেখা, সংখ্যা) এর মধ্যে স্পেস (space) বা ফাকা অংশ এবং cellspacing বলতে বোঝায় টেবিলের দুটি cell এর মধ্যে স্পেস(space) বা ফাকা অংশ ।

<table border="1" cellspacing="10"

bgcolor="rgb(0,255,0)">

<tr>

<th>Column 1</th>

<th>Column 2</th>

</tr>

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>

<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>