X

X

X

HTML টেবিল


Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

HTML টেবিল

<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Table তৈরি করার নিয়ম

<table> ট্যাগের দ্বারা টেবিল বর্ণনা বা তৈরি করা হয়।

টেবিলের প্রতিটি সারিকে <tr>  দ্বারা বর্ণনা করা হয়।<th> দ্বারা টেবিলের হেডার বর্ণনা করা হয়। সাধারণত টেবিলের হেডার সমূহ বোল্ড এবং সেন্টার এলাইনড হয়ে থাকে। <td>ট্যাগ দ্বারা টেবিলের সেল বা ডাটা কন্টেইনার তৈরি করা হয়।

HTML Table Defining

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র:  <td> ইলামেন্টসমূহ হচ্ছে টেবিলের ডাটা কন্টেইনার। যেকোনো ধরণের HTML ইলামেন্ট এতে রাখা যায়। যেমন, ছবি, ভিডিও , টেক্সট লিংক ইত্যাদি।


HTML Table এ বর্ডার যোগ করার নিয়ম

যদি টেবিলের জন্য বর্ডারের মান সেট করে না দেওয়া হয়, তবে টেবিলে বর্ডার প্রদর্শিত হবে না। বর্ডার দেখানোর জন্য অবশ্যই বর্ডারের মান উল্লেখ করতে হবে। CSS border property এর মাধ্যমে টেবিলের বর্ডার নির্ধারণ করতে হয়।

HTML Table এ বর্ডার প্রদর্শণ

<style>
table, th, td {
    border: 1px solid black;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

মনে রাখবেন সঠিকভাবে টেবিলের বর্ডার উপস্থাপণের জন্য টেবিল এবং টেবিল সেল দুটোরই বর্ডার উল্লেখ করতে হবে।

HTML Table -এ কলাপস্ড বর্ডার

সাধারণভাবে টেবিলের বর্ডার এবং সেলের বর্ডার আলাদাভাবে উপস্থাপিত হবে । দুটোকে একটি বর্ডার হিসেবে দেখানোর জন্য CSS border-collapse property ব্যবহার করতে হবে।

HTML Table Collapsed Border

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Table এ সেল প্যাডিং যোগ করার নিয়ম

সেল প্যাডিং এর মাধ্যমে টেবিল সেল এবং এর কন্টেন্ট এর মধ্যে ফাকা জায়গার পরিমান নির্ধারণ করতে হয়। প্যাডিং নির্ধারণ না করে দিলে টেবিল সেলে কন্টেন্টসমূহ কোনো প্যাডিং ছাড়াই প্রদর্শিত হবে।

প্যাডিং সেট করার জন্য CSS padding property ব্যবহার করতে হবে।

HTML Table Adding Cell Padding

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Table এ লেফট এলাইন্ড শিরোনাম

সাধারণভাবে টেবিলের শিরোনামগুলো বোল্ড এবং সেন্টারড হয়ে থাকে। লেফট এলাইন করার জন্য CSS text-align property ব্যবহার করতে হবে।

HTML Table Left Align Heading

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Table – এ বর্ডার স্প্যাসিং

টেবিল সেলের মধ্যবর্তী ফাকা জায়গা নির্ধারণ করার জন্য বর্ডার স্প্যাসিং প্রোপার্টি ব্যবহার করতে হয়। টেবিলের বর্ডার স্প্যাসিং নির্ধারণ করার জন্য CSS border-spacing property ব্যবহার করতে হবে।

HTML Table Adding Border Spacing

<style>
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
table {
    border-spacing: 15px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: যদি বর্ডারগুলো কলাপসড হয় তবে বর্ডার স্প্যাসিং ব্যবহার করার কোনো প্রয়োজন নেই।

ডাটা সেলকে একাধিক কলাম দ্বারা উপস্থাপণ

কোনো ডাটা সেলকে একাধিক কলাম এর মাধ্যমে উপস্থপণ করার প্রয়োজন হলে colspan attribute ব্যবহার করতে হবে। colspan attribute এর মান সংখ্যায় যত দেওয়া হবে, এটি ততটি কলাম দ্বারা উপস্থাপিত হবে।

Code Example

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ডেটা সেলকে একাধিক সারি দ্বারা উপস্থাপণ

কোনো ডেটা সেলকে একাধিক সারি দ্বারা উপস্থাপণ করার জন্য rowspan attribute ব্যবহার করতে হবে।

Code Example

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Table -এ শিরোনাম উপস্থাপণ

টেবিলের শিরোনাম উপস্থাপণ করার জন্য <caption> tag ব্যবহার করতে হবে।

Code Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: <caption> ট্যাগকে অবশ্যই <table> tag এর পরপরই উপস্থাপণ করতে হবে।

স্পেশাল স্টাইল

প্রতিটি টেবিলের জন্য আলাদা আলাদা স্টাইল নির্ধারণ করার জন্য id attribute ব্যবহার করতে হবে। তারপর সিএসএস এর নিয়মে স্টাইল ব্যবহার করতে হবে।

Code Example

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 {
    width: 100%;    
    background-color: #f1f1c1;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Code Example

<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th {
    background-color: black;
    color: white;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


চ্যাপ্টারের সারাংশ

  • <table> element দ্বারা টেবিল বর্ণনা।
  • <tr> element দ্বারা টেবিলের সারি বর্ণনা।
  • <td> element দ্বারা টেবিলের ডেটা কন্টেইনার বর্ণনা।
  • <th> element দ্বারা টেবিলের শিরোনাম বর্ণনা।
  • <caption> element দ্বারা টেবিলের ক্যাপশন বর্ণনা।
  • CSS border property দ্বারা টেবিলের বর্ডার বর্ণনা।
  • CSS border-collapse property দ্বারা টেবিলের বর্ডারকে কে সংকুচিত করা।
  • CSS padding property দ্বারা সেলে প্যাডিং যুক্তকরণ।
  • CSS text-align property দ্বারা কন্টেন্টের এলাইনমেন্ট নির্ধারণ।
  • CSS border-spacing property দ্বারা পাশাপাশি সেলে মধ্যে ফাকা জায়গা নির্ধারণ।
  • colspan attribute এর মাধ্যমে একটি ডেটা কন্টেইনারকে একাধিক কলাম দ্বারা উপস্থাপণ।
  • rowspan attribute এর মাধ্যমে একটি ডেটা কন্টেইনারকে একাধিক সারি দ্বারা উপস্থাপণ।
  • id attribute এর মাধ্যমে প্রতিটি টেবিলকে আলাদা আলাদা ভাবে চিহ্নিতকরণ।

HTML Table তৈরিতে ব্যবহৃত ট্যাগসমূহ

ট্যাগ বর্ণনা
<table> এটি দ্বারা টেবিল বর্ণনা করা হয়
<th> এটি দ্বারা হেডার সেল বর্ণনা করা হয়
<tr> এটি দ্বারা টেবিলে নতুন সারি যুক্ত করা হয়
<td> এটি দ্বারা টেবিলে নতুন টেবিল সেল যুক্ত করা হয়
<caption> এটি দ্বারা টেবিলের শিরোনাম যুক্ত করা হয়।
<colgroup> এটি দ্বারা কয়েকটি ডেটা সেলকে গ্রুপ করা হয়।
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table