HSC ICT Chaper 4 Part-6

Introduction to Web Design and HTML

In this HSC ICT Chapter 4 Part-6 : Introduction to Web Design And Html we will learn about What is Table , How To Create Tables In Html, Use of different Table Tags, use of different table attributes ,Easy table example.


51.টেবিল তৈরি করা ( How To Create Tables In Html )?

উঃ ওয়েবপেইজে কীভাবে Table তৈরি করতে হবে তা শেখার আগে টেবিল কী, সে বিষয়ে আমাদের কিছুটা ধারণা থাকা প্রয়ােজন। টেবিল হচ্ছে ভিন্ন ধরনের কোনাে বৃহৎ আকারের ডেটাকে সুস্থ বা সারিভাবে প্রকাশের একটি পদ্ধতি। প্যারাগ্রাফ বা বক্সের পরিবর্তে যেকোনাে ডেটাকে টেবিল হিসেবে সাজিয়ে ওয়েবপেইজ উপস্থাপন করা যায় । এমন কিছু তথ্য আছে যা প্যারাগ্রাফ বা বক্সের পরিবর্তে টেবিল আকারে উপস্থাপিত হলে অধিক অর্থসহ ও মনােরম হয়। HTML এ এই ধরনের তথ্য বা ডেটাকে মার্কআপ করার জন্যে টেবিল ব্যবহৃত হয়। যেমন- একটি ক্লাসের ছাত্র ছাত্রীদের রােল, নাম, বিভাগ এবং প্রাপ্ত নম্বর ওয়েবে প্রকাশ করার জন্যে টেবিলের কাঠামােতে উপস্থাপন করাই ভালাে। যে সমস্ত উপাদান নিয়ে একটি টেবিল কাঠামাে গড়ে ওঠে সেগুলাে হলাে- রাে, কলাম, সেল। টেবিল তৈরির জন্যে <table> ট্যাগটি ব্যবহার করা হয় । এই <table> ট্যাগটি একটি Containe ট্যাগ বিধায় এর Closing ট্যাগ </table> ও রয়েছে ।

এবং
এ ট্যাগ দুটির মধ্যবর্তী স্থানে আরও কিছু ট্যাগ ব্যবহৃত হয়। lets familiar with some table Tag


Start Tag End Tag Description
<caption> </caption> টেবিল টাইটেল বা লেবেল প্রদর্শনের জন্যে এটি ব্যবহৃত হয়। <table> ট্যাগ এর পরই টেবিলের Row ট্যাগের আগে <caption> ট্যাগটি ব্যবহৃত হয়। যদি টাইটেল লিখতে চাই তবে <table> ট্যাগটির পরেই <caption> ট্যাগটি লিখতে হবে।
<th> </th> টেবিলের মধ্যে হেডিং দেওয়ার জন্যে <th> ট্যাগ ব্যবহার করা হয়ে থাকে।
<td> </td> প্রতিটি রাে আবার <td> ট্যাগ দ্বারা ডেটা সেলসমূহ বিভক্ত থাকে। td এর মানে হলাে Table Data যা একটি ডেটা সেলের কনটেন্ট।
<tr> </tr> একটি টেবিল <tr> ট্যাগ দ্বারা Row বিভক্ত থাকে। টেবিলের Row বা সারি ধারণ করার জন্যে <tr> ....</tr> ট্যাগটি ব্যবহৃত হয়।
<thead> </thead> <thead> এর ভিতরে <th> গুলোকে রাখা হয় ।
<tbody> </tbody> <tbody> এর ভিতরে <td> গুলোকে রাখা হয় ।
<tfoot> </tfoot> <tbody> এর ভিতরে <td> গুলোকে রাখা হয় কিন্তু এগুলো শেষের লাইনে থাকে ।

টেবিলের মধ্যে কিছু অ্যাট্রিবিউট ব্যবহার করা হয়। যেমন-

  • border:টেবিলের row colum অনুযায়ী দাগ দেয়ার জন্য border অ্যাট্রিবিউট ব্যাবহার করা হয় ।
  • align: Table Data এর align ঠিক করার জন্য এটা ব্যাবহার করা হয় ।
  • width: টেবিলের width নির্ধারণ করার জন্য এই অ্যাট্রিবিউট ব্যাবহার করা হয় ।
  • cellspacing: টেবিলের cell space নির্ধারণ করার জন্য এই অ্যাট্রিবিউট ব্যাবহার করা হয় ।
  • cellpadding: টেবিলের border থেকে ডাটা গুলো কত ফাকা থাকবে তা নির্ধারণ করার জন্য এই অ্যাট্রিবিউট ব্যাবহার করা হয় ।
  • Colspan: টেবিলের column size বড় করার জন্য এই অ্যাট্রিবিউট ব্যাবহার করা হয় ।
  • rowspan: টেবিলের row size বড় করার জন্য এই অ্যাট্রিবিউট ব্যাবহার করা হয় ।

52.নিচে কিছু টেবিলের ঊদাহরন দেয়া হলোঃ


Table example 1

<!DOCTYPE html>
<html> 
  <head>

  </head>

  <body>

    <table border = "1" width = "100%">
    <caption> Monthly Income </caption>

    <thead style="color:#0c0b0b">
      <tr>
        <th>Month</th>
        <th>Earnings</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>January</td>
        <td>$1000.00</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$2000.00</td>
      </tr>
    </tbody>

    <tfoot style="color:#cc0808">
      <tr>
        <td>Total</td>
        <td>$3000.00</td>
      </tr>
    </tfoot>

  </table>

</body>
</html>

Output:

Monthly Income
Month Earnings
January $1000.00
February $2000.00
Total $3000.00



Table Example 2?

Mark Distribution Total
CQ 50 100
MCQ 25
PC 25

উপরের টেবিলটির জন্য কোড লিখ?

<!DOCTYPE html>
<html> 
  <head>
  </head>
  <body>
    <table border="1" width="100%" style="text-align: center;">
      <thead>
        <tr>
          <th colspan="2"> Mark Distribution</th>
          <th >Total</th>     
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>CQ</td>
          <td>50</td>
          <td rowspan="3">10</td>
        </tr>
        <tr>
          <td>MCQ</td>
          <td>25</td>
        </tr>
        <tr>
          <td>PC</td>
          <td>25</td>
        </tr>
      </tbody>

    </table> 
  </body>
</html>

Table Example 3 ?

ICT Coaching Center
Student List
Others Subject GPA
2016 Pass Fail Ban Eng ICT
93% 7% A+ A+ A+
2015 65% 35% B A- A+
70% 30% A- F A
2014 60% 40% A A A-

উপরের টেবিলটির জন্য কোড লিখ?

<!DOCTYPE html>
<html> 
  <head>
  </head>
  <body>
    <table border="1" width="100%" >
      <tr >  
      <td colspan="6" >
      <Center > ICT Coaching Center </center >
      </td >
      </tr > 
      <tr >  
        <td colspan="3" >   
        <Center > Student List  </center>
        </td >  
        <td colspan="3" >       
            <Center >  Others Subject GPA  </center>  
        </td >  
      </tr > 
      <tr>  
        <td rowspan="2">2016 </td>  
        <td>Pass </td>  
        <td>Fail </td>  
        <td>Ban </td>  
        <td>Eng </td>  
        <td>ICT </td>  
      </tr> 
      <tr>
        <td>93% </td>
        <td>7% </td>  
        <td>A+ </td>  
        <td>A+ </td>
        <td>A+ </td> 
      </tr>                                         
      <tr >  
        <td rowspan="2">2015 </td>
        <td>65% </td>  
        <td>35% </td>  
        <td>B </td> 
        <td>A- </td>  
        <td>A+ </td> 
      </tr> 
      <tr>  
        <td>70% </td>  
        <td>30% </td>  
        <td>A- </td>  
        <td> F </td>  
        <td>A </td> 
      </tr> 
      <tr>  
        <td rowspan="2">2014 </td>              
        <td>60% </td>  
        <td>40% </td>  
        <td>A </td>  
        <td>A </td>  
        <td>A- </td> 
      </tr> 
  </table> 
  </body>
</html>

Best way of learing

Self learing is the best learing in the world. Discover yourself first then will get what you are And what you want to do .It will push you for self learing.

Why you need to learn coding?

Coding will play a vital role in one's life . It will help to open a new window of thinking . You can think better way than past . It helps to organise all the thing in better way .