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

আমি দুটি row এবং ৩টি করে কলাম ব্যবহার করেছি আপনি ইচ্ছে মত row ব্যবহার করতে পারবেন।

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

<th> নামে একটা ট্যাগ আছে এটা দেয়া টেবিলের হেডার বানানো যায় যেমন

<table>

<tr>

<th>Markup</th>

<th>Programming</th>

<th>Database</th>

</tr>

<tr>

<td>HTML</td>

<td>JS</td>

<td>SQL</td>

</tr>

<tr>

<td>CSS</td>

<td>PHP</td>

<td>MySQL</td>

</tr> 

</table>

প্রদর্শন

Markup

Programming

Database

HTML

JS

SQL

CSS

PHP

MySQL

 দেখুন th  এলিমেন্টের লেখাগুলি heading আকারে দেখাচ্ছে।

তবে table দেয়ার উপযুক্ত নিয়ম হচ্ছে টেবিলের হেডার, বডি এবং ফুটার সহ দেয়া। এজন্য কিছু ট্যাগ আছে এগুলি ব্যবহার করলে গ্রামাটিকালি টেবিলটি সঠিক হয় এরুপ একটি উদাহরন

<table>

<thead> 

<tr>

<th>Markup</th>

<th>Programming</th>

<th>Database</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Easy</td>

<td>Tough</td>

<td>Tough</td>

</tr> 

</tfoot>

<tbody> 

<tr>

<td>HTML</td>

<td>JS</td>

<td>SQL</td>

</tr>

<tr>

<td>CSS</td>

<td>PHP</td>

<td>MySQL</td>

</tr>

</tbody>

</table>

প্রদর্শন (টেবিল C)

Markup

Programming

Database

Easy

Tough

Tough

HTML

JS

SQL

CSS

PHP

MySQL

 

<tfoot> tag <tbody> এর আগে দেয়া হয়েছে, আর এভাবেই ব্রাউজার সঠিকভাবে দেখাতে পারে।(দেখুন tfoot এর ডেটা নিচেই দেখাচ্ছে)

 

 

উপরের table গুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য <table> element a বেশ কয়েকটি attribute আছে যেগলি দিয়ে টেবিল সুন্দর সাজানো যায়। যেমন টেবিলে বর্ডার দিতে চাইলে <table border="1"> এভাবে দিবেন  ফলে টেবিলটি কিছুটা সুন্দর লাগবে আবার আছে cellpadding এবং cellspacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে প্যাডিং (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন উপরের টেবিলে <table border="1" cellpadding="10">