ICT Class

এইচটিএমএল টেবিল থেকে পরীক্ষায় প্রশ্ন থাকলে টেবিলে ক্যাপশন আছে কি না, মোট কতটি সারি আছে, rowspan, colspan এবং align ব্যবহার করতে হবে কি না এসব বিষয় সতর্কতার সাথে লক্ষ্য করতে হবে। টেবিলটি খুব ভালভাবে পর্যবেক্ষণ করে শুরু করলে টেবিলের জন্য এইচটিএমএল কোড লেখা সহজ হবে।

টেবিল এর জন্য কিছু ট্যাগ এর বর্ণনা
ট্যাগ	বর্ণনা
tables	এইচটিএমএল টেবিল এর সকল কোড table ট্যাগ ভিতরে রাখতে হবে
caption	টেবিলের ক্যাপশন দেওয়ার জন্য
th	Table Heading কে th লেখা হয়েছে
td	Table Data কে td লেখা হয়েছে
tr	Table Row কে tr লেখা হয়েছে

টেবিল এর জন্য কিছু অ্যাট্রিবিউট এর বর্ণনা
অ্যাট্রিবিউট	বর্ণনা
border	টেবিলের বর্ডার (টেবিলের দাগ) দেওয়ার জন্য ব্যবহার করা হয়। যেমন: border="1" দ্বারা বুঝানো হয় টেবিলের বর্ডার এর দাগ হবে ১ পিক্সেল।
width	টেবিলের প্রস্থ (আনুভূমিক দৈর্ঘ্য) কতটুকু হবে সেটা বুঝানো হয়। যেমন: width="50%" দ্বারা বুঝানো হয় টেবিলের আনুভূমিক দৈর্ঘ্য হবে সম্পূর্ণ পৃষ্ঠার অর্ধেক।
align	টেবিলের ডেটা এবং শিরোনামগুলো বামে, মাঝে নাকি ডানে হবে সেটা বুঝানো হয়। যেমন: align="center" দ্বারা বুঝানো হয় টেবিলের ডেটা সেলগুলোর মাঝখানে অবস্থান করবে।
rowspan	সারির বিস্তৃতি বাড়াতে rowspan অ্যাট্রিবিউট ব্যবহার করা হয়।
colspan	কলামের বিস্তৃতি বাড়াতে colspan অ্যাট্রিবিউট ব্যবহার করা হয়।

১। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> Name </th>
        <th> Class </th>
        <th> Address </th>
      </tr>
      <tr>
         <td> Shakib </td>
         <td> Five </td>
         <td> Bhaluka </td>
      </tr>
      <tr>
         <td> Sajjad </td>
         <td> Six </td>
         <td> Mymensingh </td>
      </tr>
      <tr>
         <td> Anik </td>
         <td> Six </td>
         <td> Mymensingh </td>
      </tr>
    </table>
</body>
</html>

২। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> Name </th>
        <th> Photo </th>
      </tr>
      <tr>
         <td> Computer </td>
         <td>  <img src= "ictclass.png" >  </td>
      </tr>
    </table>
</body>
</html>

৩। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
<head>
    <title> HTML Table </title>
</head>
<body>
    <table border="1">
        <caption> Student Table </caption>
        <tr>
            <th align="center"> Roll </th>
            <th align="center"> Name </th>
            <th align="center"> GPA </th>
        </tr>
        <tr>
            <td align="center"> 01 </td>
            <td align="center"> Emran </td>
            <td align="center"> A+ </td>
        </tr>
        <tr>
            <td align="center"> 02 </td>
            <td align="center"> Rakib </td>
            <td align="center"> A </td>
        </tr>
        <tr>
            <td align="center"> 03 </td>
            <td align="center"> Sajid </td>
            <td align="center"> A </td>
        </tr>
    </table>
</body>
</html>

৪। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
<head>
    <title> HTML Table </title>
</head>
<body>
    <table border="1">
        <tr>
            <th> Roll </th>
            <th> Name </th>
            <th> Subject </th>
        </tr>
        <tr>
            <td> 01 </td>
            <td> Rifat </td>
            <td>
                <ol>
                    <li> Physics </li>
                    <li> Chemistry </li>
                    <li> Maths </li>
                </ol>
            </td>
        </tr>
        <tr>
            <td> 02 </td>
            <td> Kabir </td>
            <td>
                <ol>
                    <li> Social Works </li>
                    <li> Psychology </li>
                    <li> Economics </li>
                </ol>
            </td>
        </tr>
    </table>
</body>
</html>

৫। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> SL No </th>
        <th> Name </th>
        <th> Website </th>
     </tr>
     <tr>
        <td> 01 </td>
        <td> Mark <br> Zuckerberg </td>
        <td> <a href="http://www.facebook.com"> Facebook </a> </td>
     </tr>
     <tr>
        <td> 02 </td>
        <td> Larry <br> Page </td>
        <td> <a href="http://www.google.com"> Google </a> </td>
     </tr>
    </table>
</body>
</html>

৬। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
<head>
    <title> HTML Table </title>
</head>
<body>
    <table border="1">
    <tr>
        <th colspan="3"> Result </th>
    </tr>
    <tr>
        <th>Roll</th>
        <th>Name</th>
        <th>GPA</th>
    </tr>
    <tr>
        <td> 01 </td>
        <td> Emran </td>
        <td> A+ </td>
    </tr>
    <tr>
        <td> 02 </td>
        <td> Rakib </td>
        <td> A </td>
    </tr>
</table>
</body>
</html>

৭। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
    <caption> Employee Information </caption>
     <tr>
        <th> ID No </th>
        <th> Emp. Name </th>
        <th> Salary </th>
      </tr>
      <tr>
         <td> 1001 </td>
         <td> Nafis </td>
         <td rowspan="2"> 50,000 </td>
      </tr>
      <tr>
         <td> 1005 </td>
         <td> Sajal </td>
      </tr>
    </table>
</body>
</html>

৮। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
<head>
    <title> HTML Table </title>
</head>
<body>
    <table border="1">
        <tr>
           <td rowspan="2" align="center"> A </td>
           <td align="center"> B </td>
           <td colspan="2" align="center"> C </td>
        </tr>
        <tr>
           <td align="center"> D </td>
           <td align="center"> <br> </td>
           <td align="center"> E </td>
        </tr>
        <tr>
           <td align="center"> F </td>
           <td rowspan="2" align="center"> G </td>
           <td align="center"> H </td>
           <td align="center"> I </td>
        </tr>
        <tr>
            <td align="center"> <br> </td>
            <td align="center"> J </td>
            <td align="center"> K </td>
        </tr>
    </table>
</body>
</html>

৯। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> Roll </th>
        <th> Name </th>
        <th> Group </th>
        <th> Result </th>
     </tr>
     <tr>
         <td> 01 </td>
         <td> Sohag </td>
         <td rowspan="2"> Science </td>
         <td> A+ </td>
     </tr>
     <tr>
         <td> 02 </td>
         <td> Emran </td>
         <td align="center"> A+ </td>
     </tr>
    <tr>
         <td> 03 </td>
         <td> Jalal </td>
         <td> Commerce </td>
         <td align="right"> A </td>
     </tr>
    </table>
</body>
</html>

১০। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th colspan="4"> Test Result </th>
        <td rowspan="6"><img src="image.jpg">
         </td>
      </tr>
      <tr>
         <th> Roll </th>
         <th> Group </th>
         <th> Name </th>
         <th> Result </th>
      </tr>
      <tr>
         <td> 101 </td>
         <td> Hum </td>
         <td> Reza </td>
         <td> A+ </td>
      </tr>
      <tr>
         <td> 102 </td>
         <td> Hum </td>
         <td> Nafis </td>
         <td> B </td>
      </tr>
      <tr>
         <td> 103 </td>
         <td> Hum </td>
         <td> Jaber </td>
         <td> A- </td>
      </tr>
      <tr>
         <td> 104 </td>
         <td> Hum </td>
         <td> Rakib </td>
         <td> C </td>
      </tr>
    </table>
</body>
</html>

১১। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th align="center"> ID No </th>
        <th align="center"> Name </th>
        <th align="center"> Group </th>
        <th align="center"> Result </th>
     </tr>
     <tr>
        <td align="center"> 101 </td>
        <td align="center"> Shihab </td>
        <td align="center"> Arts </td>
        <td align="center"> A <sup>-</sup> </td>
     </tr>
     <tr>
        <td align="center"> 102 </td>
        <td align="center"> Siyam </td>
        <td align="center"> <br> </td>
        <td align="center"> A <sup>+</sup> </td>
     </tr>
     <tr>
        <td align="center"> 103 </td>
        <td align="center"> Mahmud </td>
        <td align="center"> Science </td>
        <td align="center"> <i> B </i> </td>
     </tr>
     <tr>
         <td colspan="4" align="center"> <a href="http://www.eboardresults.com">  More Result </a> </td>
     </tr>
    </table>
</body>
</html>

১২। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
       <caption> Marks Distribution </caption>
       <tr>
           <th colspan="3"> Compulsory </th>
           <th> Optional </th>
       </tr>
       <tr>
           <td align="center"> Bangla </td>
           <td align="center"> English </td>
           <td align="center"> ICT </td>
           <td align="center"> Mathematics </td>
       </tr>
       <tr>
           <td align="center"> 100 </td>
           <td align="center"> 100 </td>
           <td align="center"> 75 </td>
           <td align="center"> 75 </td>
       </tr>
   </table>
</body>
</html>

১৩। নিচের টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
       <tr>
           <th> Year </th>
           <th> Semester </th>
           <th> Students </th>
           <th> Total </th>
       </tr>
       <tr>
           <td rowspan="2"> 2017 </td>
           <td> 1<sup>st</sup> Semester </td>
           <td> 200 </td>
           <td rowspan="2"> 500 </td>
       </tr>
       <tr>
           <td> 2<sup>nd</sup> Semester </td>
           <td> 300 </td>
       </tr>
       <tr>
           <td rowspan="3"> 2018 </td>
           <td> 1<sup>st</sup> Semester </td>
           <td> 100 </td>
           <td rowspan="3"> 600 </td>
       </tr>
       <tr>
           <td> 2<sup>nd</sup> Semester </td>
           <td> 300 </td>
       </tr>
       <tr>
           <td> 3<sup>rd</sup> Semester </td>
           <td> 200 </td>
       </tr>
   </table>
</body>
</html>

১৪। নিচের টেবিলের সারিকে কলামে রূপান্তর করে টেবিলের জন্য এইচটিএমএল কোড লিখ:

Table

সমাধান

উদ্দীপকের টেবিলের সারিকে কলামে এবং কলামকে সারিতে রূপান্তর করলে পাই:

উদ্দীপকের টেবিলের জন্য প্রয়োজনীয় এইচটিএমএল কোড:


<!DOCTYPE html>
<html>
<head>
    <title> HTML Table </title>
</head>
<body>
    <table border="1">
        <tr>
            <th> Student Name </th>
            <td colspan="3"> Harry Porter </td>
        </tr>
        <tr>
            <th rowspan="3"> Compulsory </th>
            <td colspan="3"> Bangla </td>
        </tr>
        <tr>
            <td colspan="3"> English </td>
        </tr>
        <tr>
            <td colspan="3"> ICT </td>
        </tr>
        <tr>
            <th> Optional </th>
            <td> Physics </td>
            <td> Math </td>
            <td> Biology </td>
        </tr>
    </table>
</body>
</html>