HTML টেবিল

আপনি HTML দ্বারা টেবিল তৈরি করতে পারেন

উদাহরণ

টেবিল
এই উদাহরণ HTML ডকুমেন্টে টেবিল তৈরি করার কথা দেখায়。
টেবিল সীমানা
এই উদাহরণ বিভিন্ন ধরনের টেবিল সীমানা দেখায়。

（এই পাতার নিচে আরও উদাহরণ পাবেন。）

টেবিল

টেবিল <table> ট্যাগ দ্বারা নির্বাচিত হয়। প্রত্যেক টেবিলের কিছুটা হলো একটি সারি (যা <tr> ট্যাগ দ্বারা নির্বাচিত হয়), যার প্রত্যেকটি কিছুটা হলো একটি সেল (যা <td> ট্যাগ দ্বারা নির্বাচিত হয়)। সংখ্যা td টেবিল ডেটা (টেবিল ডেটা) হয়, যার মধ্যে ডেটা সেলের অন্তর্ভুক্ত হয়। ডেটা সেলগুলি টেক্সট, ছবি, তালিকা, প্যারাগ্রাফ, ফর্ম, হরিজন্টাল লাইন, টেবিল, ইত্যাদি সমেত হতে পারে。

<table border="1">
<tr>
<td>রোয় ১, সেল ১</td>
<td>রোয় ১, সেল ২</td>
</tr>
<tr>
<td>রোয় ২, সেল ১</td>
<td>রোয় ২, সেল ২</td>
</tr>
</table>

এই ব্রাউজারে এমনভাবে দেখা যাবে:

রোয় ১, সেল ১ রোয় ১, সেল ২
রোয় ২, সেল ১ রোয় ২, সেল ২

টেবিল এবং সীমানা এসবিডি

যদি সীমানা এসবিডি নির্বাচিত না হয়, তবে টেবিল সীমানা দেখা যাবে না। কিছু সময়ে এটা অত্যন্ত উপযোগী, কিন্তু বেশিরভাগ সময়ে আমরা সীমানা দেখাতে চাই。

সীমানা এসবিডি ব্যবহার করে একটি সীমানা সহ টেবিল প্রদর্শন করুন:

<table border="1">
<tr>
<td>রোয় ১, সেল ১</td>
<td>রোয় ১, সেল ২</td>
</tr>
</table>

টেবিলের শিরোনাম

টেবিলের শিরোনামটি <th> ট্যাগ দ্বারা নির্বাচিত হয়。

অধিকাংশ ব্রাউজার শিরোনামকে বোল্ড মধ্যস্থানীয় টেক্সট হিসাবে প্রদর্শন করে:

<table border="1">
<tr>
<th>শিরোনাম</th>
<th>আরও শিরোনাম</th>
</tr>
<tr>
<td>রোয় ১, সেল ১</td>
<td>রোয় ১, সেল ২</td>
</tr>
<tr>
<td>রোয় ২, সেল ১</td>
<td>রোয় ২, সেল ২</td>
</tr>
</table>

এই ব্রাউজারে এমনভাবে দেখা যাবে:

শিরোনাম আরও শিরোনাম
রোয় ১, সেল ১ রোয় ১, সেল ২
রোয় ২, সেল ১ রোয় ২, সেল ২

টেবিলের খালি কোষ

কিছু ব্রাউজারে, কোনও সামগ্রী ছাড়া টেবিল ইউনিটগুলির প্রদর্শন খারাপ হতে পারে। যদি কোনও ইউনিট খালি (কোনও সামগ্রী ছাড়া) হয়, তবে ব্রাউজার সেই ইউনিটের সীমানা দেখাতে পারে না。

<table border="1">
<tr>
<td>রোয় ১, সেল ১</td>
<td>রোয় ১, সেল ২</td>
</tr>
<tr>
<td></td>
<td>রোয় ২, সেল ২</td>
</tr>
</table>

ব্রাউজার এমনভাবে দেখা যেতে পারে:

টেবিলের খালি কোষ

নোট:মন্তব্য: এই ক্ষেত্রে, খালি সেলের সীমানা দেখা যায় না। এই ধরনের পরিস্থিতিকে এড়াতে, খালি সেলে একটি খালি স্পেস অবস্থানকারী যোগ করলে, সীমানা দেখা যাবে。

<table border="1">
<tr>
<td>রোয় ১, সেল ১</td>
<td>রোয় ১, সেল ২</td>
</tr>
<tr>
<td> </td>
<td>রোয় ২, সেল ২</td>
</tr>
</table>

এই ব্রাউজারে এমনভাবে দেখা যাবে:

রোয় ১, সেল ১ রোয় ১, সেল ২
　 রোয় ২, সেল ২

আরও উদাহরণ

বিন্দুমুক্ত টেবিল
চারপাশের ফ্রেম না থাকা টেবিল প্রদর্শিত হয়
টেবিলের শীর্ষভাগ (Heading)
টেবিলের শীর্ষভাগ দেখান
খালি সেল
শুধু কনটেন্ট না থাকা সেল প্রক্রিয়াকরণ
শিরোনাম সহ টেবিল
শিরোনাম (caption) সহ টেবিল প্রদর্শিত হয়
অলপত্র বা অলকলাম সেল
অলপত্র বা অলকলাম সেল নির্দিষ্ট করুন
টেবিলের ট্যাগ
বিভিন্ন এলিমেন্টের মধ্যে এলিমেন্ট দেখান
সেল প্যাডিং (Cell padding)
সেল প্যাডিং (Cell padding) ব্যবহার করে সেল কনটেন্ট এবং সেল চারপাশের মধ্যে হলস্ট তৈরি করা
সেল স্পেসিং (Cell spacing)
সেল স্পেসিং ব্যবহার করে সেলের মধ্যের দূরত্ব বাড়ান
টেবিলে পটভূমির রঙ বা পটভূমি ছবি যোগ করুন
টেবিলে পটভূমি যোগ করুন
টেবিল কোর্নারে পটভূমির রঙ বা পটভূমি ছবি যোগ করুন
টেবিল কোর্নারে পটভূমি যোগ করুন
টেবিল কোর্নারের মধ্যে কনটেন্ট সাজানো
এই উদাহরণ দেখিয়ে দেওয়া হয়েছে কিভাবে "align" অ্যাট্রিবিউট ব্যবহার করে টেবিল কোর্নারের জন্য সুন্দর টেবিল তৈরি করা যায়。
ফ্রেম (frame) অ্যাট্রিবিউট
এই উদাহরণ দেখিয়ে দেওয়া হয়েছে কিভাবে "frame" অ্যাট্রিবিউট ব্যবহার করে টেবিল চারপাশের ফ্রেম নিয়ন্ত্রণ করা যায়。

টেবিল ট্যাগ

টেবিল বর্ণনা
<table> টেবিল নির্দিষ্ট করুন
<caption> টেবিল শিরোনাম নির্দিষ্ট করুন
<th> টেবিলের শীর্ষভাগ নির্দিষ্ট করুন
<tr> টেবিলের পদ নির্দিষ্ট করুন
<td> টেবিল কোর্নার নির্দিষ্ট করুন
<thead> টেবিলের শীর্ষভাগ নির্দিষ্ট করুন
<tbody> টেবিলের মূলস্থান নির্দিষ্ট করুন
<tfoot> টেবিলের পাদভাগ নির্দিষ্ট করুন
<col> টেবিল কলামের জন্য অ্যাট্রিবিউট নির্দিষ্ট করুন
<colgroup> টেবিল কলামের গুপ্তবিন্যাস