চতুর্থ অধ্যায় পাঠ-৯ টেবিল তৈরি করার HTML কোড।

এই পাঠ শেষে যা যা শিখতে পারবে-

১। ওয়েবপেইজে টেবিল তৈরি করতে পারবে।
২। টেবিলের রো মার্জ করতে পারবে।
৩। টেবিলের কলাম মার্জ করতে পারবে।

HTML এ টেবিলঃ ওয়েবপেইজ তৈরি করার সময় বিভিন্ন ডেটা এবং তথ্য ছক আকারে উপস্থাপন করার জন্য টেবিলের প্রয়োজন হয়। টেবিল হলো কতকগুলো সারি (row) এবং স্তম্ভ (column) এর সমন্বয়ে গঠিত। একটি টেবিলের সকল উপাদানগুলো <table></table> ট্যাগ এর মধ্যে থাকে। টেবিলের সারি (row) তৈরি করার জন্য <tr>…</tr> ট্যাগ ব্যবহার করা হয়। টেবিলের সেলগুলো সারির মধ্যে থাকে। টেবিলের হেডার সেল তৈরি করার জন্য <th>…</th> ট্যাগ এবং ডেটা/অবজেক্ট সেল তৈরি করার জন্য <td> </td> ট্যাগ ব্যবহার করা হয়। <th>…</th> এবং <td> </td> ট্যাগ দুইটি সবসময় <tr>…</tr> ট্যাগের মধ্যে ব্যবহৃত হয়। প্রতিটি টেবিলে ঐচ্ছিক উপাদান হিসেবে ক্যাপশন থাকতে পারে। ক্যাপশন লেখার জন্য <caption>–</caption> ট্যাগ ব্যবহৃত হয়।

টেবিল সম্পর্কিত বিভিন্ন ট্যাগ এবং অ্যাট্রিবিউট ও এদের ব্যবহারঃ

ট্যাগ	অ্যাট্রিবিউট	ভ্যালু বা মান	ব্যবহার
<table>	border	2,3,4….	টেবিলের বর্ডার তৈরির জন্য ব্যবহৃত হয়।
	bgcolor	color code	টেবিলের ব্যাকগ্রাউন্ড কালার সেট করার জন্য ব্যবহৃত হয়।
	cellspacing	2,3,4….	সেলগুলোর মধ্যে ফাঁকা স্থান নির্ধারণে ব্যবহৃত হয়।
	cellpadding	2,3,4….	সেলের কনটেন্ট এর মধ্যে ফাঁকা স্থান নির্ধারণে ব্যবহৃত হয়।
	align	left,right,center	ব্রাউজার উইন্ডোতে টেবিলের অবস্থান(ডানে,বামে,কেন্দ্রে) নির্ধারণে ব্যবহৃত হয়। বাই-ডিফল্ট লেফট আল্যাইনে থাকে।
	width	50%,70%,…	ব্রাউজার উইন্ডোতে টেবিলের প্রশস্ততা নির্ধারণে ব্যবহৃত হয়।
<tr>	align	left,right,center	রো এর কনটেন্ট গুলোর অবস্থান(ডানে,বামে,কেন্দ্রে) নির্ধারণে ব্যবহৃত হয়। বাই-ডিফল্ট লেফট আল্যাইনে থাকে।
<th>	rowspan	2,3,4….	একাধিক রো কে একত্র বা মার্জ করতে ব্যবহৃত হয়।
<th>	colspan	2,3,4….	একাধিক কলামকে একত্র বা মার্জ করতে ব্যবহৃত হয়।
<td>	align	left,right,center	সেলের কনটেন্ট গুলোর অবস্থান(ডানে,বামে,কেন্দ্রে) নির্ধারণে ব্যবহৃত হয়। বাই-ডিফল্ট লেফট আল্যাইনে থাকে।
	rowspan	2,3,4….	একাধিক রো কে একত্র বা মার্জ করতে ব্যবহৃত হয়।
	colspan	2,3,4….	একাধিক কলামকে একত্র বা মার্জ করতে ব্যবহৃত হয়।

উদাহরণ-১ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।

Horizontal headers

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

 <body>

  <table border="1">

   <Caption>Horizontal headers</Caption>

   <tr>

    <th>Name</th>

    <th>Mobile</th>

    <th>Email</th>

   </tr>

   <tr>

    <td>Mizan</td>

    <td>01724351470</td>

    <td>mizanjust@gmail.com</td> 

   </tr>

   <tr>

    <td>Amir</td>

    <td>01918038095</td>

    <td>amir@gmail.com</td> 

   </tr>

  </table>

 </body> 

</html>

উদাহরণ-২ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।

Table with Vertical headers

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

 <body>

  <table border="1">

   <Caption> Vertical headers </Caption>

   <tr>

    <th>Name</th>

    <td> Mizan</td>

    <td> Amir</td>

   </tr>

   <tr>

    <th>Mobile</th>

    <td>01724351470</td>

    <td>01918038095</td>

   </tr>

   <tr>

    <th>Email</th> 

    <td>mizanjust@gmail.com</td>

    <td>amir@gmail.com</td>

   </tr>

  </table>

 </body> 

</html>

উদাহরণ-৩ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।

উপরের টেবিলটির দুটি রো মার্জ করা আছে। তাই rowspan অ্যাট্রিবিউট ব্যবহার করতে হবে।

Table with row span

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

 <body>

  <table border="1">

   <Caption> Table with rowspan </Caption>

   <tr>

    <th>Name</th> 

    <td> Mizan</td>

    <td> Amir</td>

   </tr>

   <tr>

    <th rowspan="2">Contact</th>

    <td>01724351470</td>

    <td>01918038095</td>

   </tr>

   <tr> 

    <td>mizanjust@gmail.com</td>

    <td>amir@gmail.com</td>

   </tr>

  </table>

 </body> 

</html>

উদাহরণ-৪ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।

উপরের টেবিলটির দুটি কলাম মার্জ করা আছে। তাই colspan অ্যাট্রিবিউট ব্যবহার করতে হবে।

Table with column span

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

 <body>

  <table border="1">

   <Caption>Table with colspan</Caption>

   <tr>

    <th>Name</th>

    <th colspan="2">Contact</th>    

   </tr>

   <tr>

    <td>Mizan</td>

    <td>01724351470</td>

    <td>mizanjust@gmail.com</td> 

   </tr>

   <tr>

    <td>Amir</td>

    <td>01918038095</td>

    <td>amir@gmail.com</td> 

   </tr>

  </table>

 </body> 

</html>

উদাহরণ-৫ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।

উপরের টেবিলটির সেলগুলোর মাঝে স্পেস আছে। তাই cellspacing অ্যাট্রিবিউট ব্যবহার করতে হবে।

Table With cell spacing

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

 <body>

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

   <Caption>Table With cell spacing</Caption>

   <tr>

    <th>Name</th>

    <th>Mobile</th>

    <th>Email</th>

   </tr>

   <tr>

    <td>Mizan</td>

    <td>01724351470</td>

    <td>mizanjust@gmail.com</td> 

   </tr>

   <tr>

    <td>Amir</td>

    <td>01918038095</td>

    <td>amir@gmail.com</td> 

   </tr>

  </table>

 </body> 

</html>

উদাহরণ-৬ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।

উপরের টেবিলটির সেলের কনটেন্টের মাঝে প্যাডিং আছে। তাই cellpadding অ্যাট্রিবিউট ব্যবহার করতে হবে।

Table With cell padding

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

 <body>

  <table border="1" cellpadding="10">

   <Caption>Table With cell padding</Caption>

   <tr>

    <th>Name</th>

    <th>Mobile</th>

    <th>Email</th>

   </tr>

   <tr>

    <td>Mizan</td>

    <td>01724351470</td>

    <td>mizanjust@gmail.com</td> 

   </tr>

   <tr>

    <td>Amir</td>

    <td>01918038095</td>

    <td>amir@gmail.com</td> 

   </tr>

  </table>

 </body> 

</html>