HTML Table

By /

এইচটিএমএল টেবিল

HTML টেবিল ট্যাগ ট্যাবুলার আকারে (সারি * কলাম) ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এক সারিতে অনেক কলাম থাকতে পারে।

আমরা <tr> , <td> এবং <th> উপাদানগুলির সাহায্যে <table> এলিমেন্ট ব্যবহার করে ট্যাবুলার আকারে ডেটা প্রদর্শনের জন্য একটি টেবিল তৈরি করতে পারি।

প্রতিটি টেবিলে, টেবিলের সারি <tr> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়, টেবিল হেডারকে <th> দ্বারা সংজ্ঞায়িত করা হয়, এবং টেবিলের ডেটা <td> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।

এইচটিএমএল টেবিলগুলি পৃষ্ঠার বিন্যাস পরিচালনা করতে ব্যবহৃত হয় যেমন হেডার সেকশন, নেভিগেশন বার, বডি কন্টেন্ট, ফুটার সেকশন ইত্যাদি। কিন্তু পৃষ্ঠার লেআউট পরিচালনা করতে টেবিলের উপরে ডিভ ট্যাগ ব্যবহার করার পরামর্শ দেওয়া হয়।

HTML Table Tags

Tag Description
<table> এটি একটি টেবিল সংজ্ঞায়িত করে।
<tr> এটি একটি টেবিলে একটি সারি সংজ্ঞায়িত করে।
<th> এটি একটি টেবিলে একটি হেডার সেল সংজ্ঞায়িত করে।
<td> এটি একটি টেবিলে একটি ঘর সংজ্ঞায়িত করে।
<caption> এটি টেবিলের ক্যাপশন সংজ্ঞায়িত করে।
<colgroup> এটি বিন্যাস করার জন্য একটি টেবিলে এক বা একাধিক কলামের একটি গ্রুপ নির্দিষ্ট করে।
<col> প্রতিটি কলামের জন্য কলামের বৈশিষ্ট্য নির্দিষ্ট করতে এটি <colgroup> উপাদানের সাথে ব্যবহার করা হয়।
<tbody> এটি একটি টেবিলে শরীরের বিষয়বস্তু গ্রুপ করতে ব্যবহৃত হয়।
<thead> এটি একটি টেবিলে শিরোনাম বিষয়বস্তু গ্রুপ করতে ব্যবহৃত হয়।
<tfooter> এটি একটি টেবিলে ফুটার বিষয়বস্তু গ্রুপ করতে ব্যবহৃত হয়।

HTML টেবিলের উদাহরণ

আসুন HTML টেবিল ট্যাগের উদাহরণ দেখি। এটির আউটপুট উপরে দেখানো হয়েছে।

  1. <table>  
  2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
  4. <tr><td>James</td><td>William</td><td>80</td></tr>  
  5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
  6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
  7. </table>  

আউটপুট:

প্রথম_নাম শেষ_নাম চিহ্ন

সোনু

জয়সওয়াল

60

জেমস

উইলিয়াম

80

স্বাতী

সিরোনি

82

চেতনা

সিং

72

উপরের html টেবিলে, 5টি সারি এবং 3টি কলাম = 5*3 = 15টি মান রয়েছে।

বর্ডার সহ HTML টেবিল

HTML টেবিলের জন্য সীমানা নির্দিষ্ট করার দুটি উপায় আছে।

  1. HTML এ টেবিলের বর্ডার এট্রিবিউট দ্বারা
  2. CSS এ বর্ডার প্রপার্টি দ্বারা

1) HTML বর্ডার অ্যাট্রিবিউট

আপনি বর্ডার নির্দিষ্ট করতে HTML এ টেবিল ট্যাগের বর্ডার অ্যাট্রিবিউট ব্যবহার করতে পারেন। কিন্তু এখন এটি সুপারিশ করা হয় না।

  1. <table border=“1”>  
  2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
  4. <tr><td>James</td><td>William</td><td>80</td></tr>  
  5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
  6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
  7. </table>  

আউটপুট:

First_Name Last_Name Marks
  সোনু জয়সওয়াল 60 জেমস উইলিয়াম 80 স্বাতী সিরোনি 82 চেতনা সিং 72

2) CSS বর্ডার সম্পত্তি

এখন টেবিলে সীমানা নির্দিষ্ট করতে CSS-এর বর্ডার প্রপার্টি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4. }  
  5. </style>

আপনি সীমানা-পতন সম্পত্তি দ্বারা একটি সীমানায় সমস্ত সীমানা ভেঙে ফেলতে পারেন। এটি সীমানাকে একটিতে ভেঙ্গে ফেলবে।

  1. <style>  
  2. table, th, td {  
  3.   border: 2px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. </style>  

আউটপুট:

Name Last Name Marks
  সোনু জয়সওয়াল 60 জেমস উইলিয়াম 80 স্বাতী সিরোনি 82 চেতনা সিং 72

সেল প্যাডিং সহ HTML টেবিল

আপনি দুটি উপায়ে টেবিল হেডার এবং টেবিল ডেটার জন্য প্যাডিং নির্দিষ্ট করতে পারেন:

  1. HTML এ টেবিলের সেলপ্যাডিং বৈশিষ্ট্য দ্বারা
  2. CSS এ প্যাডিং সম্পত্তি দ্বারা

HTML টেবিল ট্যাগের সেলপ্যাডিং অ্যাট্রিবিউট এখন অপ্রচলিত। সিএসএস ব্যবহার করার পরামর্শ দেওয়া হয়। তো চলুন CSS এর কোড দেখি।

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid pink;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 10px;  
  8. }  
  9. </style>  

আউটপুট:

Name Last Name Marks
  সোনু জয়সওয়াল 60 জেমস উইলিয়াম 80 স্বাতী সিরোনি 82 চেতনা সিং 72

HTML টেবিল প্রস্থ:

আমরা CSS width প্রপার্টি ব্যবহার করে HTML টেবিলের প্রস্থ নির্দিষ্ট করতে পারি। এটি পিক্সেল বা শতাংশে নির্দিষ্ট করা যেতে পারে।

আমরা আমাদের প্রয়োজন অনুযায়ী আমাদের টেবিলের প্রস্থ সামঞ্জস্য করতে পারি। প্রস্থ সহ টেবিল প্রদর্শনের উদাহরণ নিচে দেওয়া হল।

  1. table{  
  2.      width: 100%;   
  3.     }  

উদাহরণ:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>table</title>  
  5.     <style>  
  6.         table{  
  7.             border-collapse: collapse;  
  8.             width: 100%;   
  9.         }  
  10.     th,td{  
  11.         border: 2px solid green;   
  12.         padding: 15px;  
  13.     }  
  14.                
  15.     </style>  
  16.   </head>  
  17. <body>  
  18.   <table>  
  19.     <tr>  
  20.         <th>1 header</th>  
  21.         <th>1 header</th>  
  22.         <th>1 header</th>  
  23.     </tr>  
  24.     <tr>  
  25.         <td>1data</td>  
  26.         <td>1data</td>  
  27.         <td>1data</td>  
  28.     </tr>  
  29.     <tr>  
  30.         <td>2 data</td>  
  31.         <td>2 data</td>  
  32.         <td>2 data</td>  
  33.     </tr>  
  34.     <tr>  
  35.         <td>3 data</td>  
  36.         <td>3 data</td>  
  37.         <td>3 data</td>  
  38.     </tr>  
  39. </table>  
  40. </body>  
  41. </html>  

কলস্প্যান সহ এইচটিএমএল টেবিল

আপনি যদি একটি সেল স্প্যান একাধিক কলাম করতে চান, আপনি colspan বৈশিষ্ট্য ব্যবহার করতে পারেন।

এটি একটি ঘর/সারিকে একাধিক কলামে ভাগ করবে এবং কলামের সংখ্যা কলস্প্যান অ্যাট্রিবিউটের মানের উপর নির্ভর করে।

দুই কলাম স্প্যান যে উদাহরণ দেখুন.

CSS কোড:

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 5px;  
  8. }  
  9. </style>  

HTML কোড:

 
  1. <table style=“width:100%”>  
  2.   <tr>  
  3.   <th>Name</th>  
  4.   <th colspan=“2”>Mobile No.</th>  
  5.   </tr>  
  6.   <tr>  
  7.   <td>Ajeet Maurya</td>  
  8.   <td>7503520801</td>  
  9.   <td>9555879135</td>  
  10.   </tr>  
  11. </table>  

আউটপুট:

Name Mobile No.
  অজিত মৌর্য 7503520801 9555879135

রোস্প্যান সহ এইচটিএমএল টেবিল

আপনি যদি একটি সেল স্প্যান একাধিক সারি করতে চান, আপনি rowspan বৈশিষ্ট্য ব্যবহার করতে পারেন।

এটি একটি ঘরকে একাধিক সারিতে ভাগ করবে। বিভক্ত সারির সংখ্যা সারি-স্প্যান মানের উপর নির্ভর করবে।

দুই সারি স্প্যান যে উদাহরণ দেখুন.

CSS কোড:

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 10px;  
  8. }  
  9. </style>  

HTML কোড:

 
  1. <table>    
  2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>    
  3. <tr><th rowspan=“2”>Mobile No.</th><td>7503520801</td></tr>    
  4. <tr><td>9555879135</td></tr>    
  5. </table>   

আউটপুট:

Name অজিত মৌর্য
Mobile No. 7503520801
9555879135

ক্যাপশন সহ HTML টেবিল

HTML ক্যাপশন টেবিলের উপরে প্রদর্শিত হয়। এটা শুধুমাত্র টেবিল ট্যাগ পরে ব্যবহার করা আবশ্যক.

  1. <table>  
  2. <caption>Student Records</caption>  
  3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>  
  5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>  
  6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>  
  7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>  
  8. </table>  

এইচটিএমএল টেবিল জোড় এবং বিজোড় কক্ষের স্টাইলিং

CSS code:

 
  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 10px;  
  8. }  
  9. table#alter tr:nth-child(even) {  
  10.   background-color: #eee;  
  11. }  
  12. table#alter tr:nth-child(odd) {  
  13.   background-color: #fff;  
  14. }  
  15. table#alter th {  
  16.   color: white;  
  17.   background-color: gray;  
  18. }  
  19. </style>  

আউটপুট:

দ্রষ্টব্য: আপনি আপনার টেবিলের বিভিন্ন CSS বৈশিষ্ট্য ব্যবহার করে বিভিন্ন ধরণের টেবিল তৈরি করতে পারেন।



Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top