Scribd
Upload
100 views7 pages

HTML Table Tags and Attributes Guide

The document provides information on how to create tables in HTML. It discusses the basic table structure using <table>, <tr>, and <td> tags. It also covers more advanced table features like rowspan and colspan to merge cells, as well as using <thead>, <tbody>, <tfoot> to add headers, bodies and footers. The document includes examples of simple tables, as well as tables using these advanced features.

Uploaded by

shoaib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
100 views7 pages

HTML Table Tags and Attributes Guide

The document provides information on how to create tables in HTML. It discusses the basic table structure using <table>, <tr>, and <td> tags. It also covers more advanced table features like rowspan and colspan to merge cells, as well as using <thead>, <tbody>, <tfoot> to add headers, bodies and footers. The document includes examples of simple tables, as well as tables using these advanced features.

Uploaded by

shoaib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

MD.

ABU NUR SHOIAB


BSC IN CSSE
(AIUB)
NURSHOAIB8@[Link]
01676293379

বিবিন্ন ওয়েি সাইয়ে টেবিল বিবিক টেো টেয়েয়েন বনশ্চেই। বিয়েষ কয়ে টেলাধুলাে সাইয়েে
টেয়লাোেয়েে টকাে, টরাফাইল, সমেসূবি, টেোে িাজায়েে বিসাি ইত্যাবে কায়জ টেবিল লায়ে।
টেবিলবিবিক টেো টেোয়নাে জনয এইিটেএমএল এে টিেবকেু েযাে আয়ে টেগুবল বেয়ে নানন ধেয়নে
টেবিল তত্েী কো োে। একো টেবিল তত্েীয়ত্ রাথবমকিায়ি ৩টে েযাে লায়ে

১. <table></table>

২. <tr></tr> (tr তে table row)

৩. <td></td> (td তে table data)

এই ৩টে েযাে বেয়ে একো টেবিল িানায়ত্ পােয়িন। পুয়ো grid বসয়েম িানায়না োয়ি। row এিং column
বেয়ে

tr বেয়ে row িা সাবে এিং td বেয়ে column িা স্তম্ভ িানায়না িে। একো সাধােন টেবিল

রেেন:
শ

HTML JS SQL
CSS PHP MySQL

<table>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>

</tr>
</table>
ROWSPAN & COLSPAN

td, th এ rowspan এবং COLSPAN এট্রিববউট দুট্রট বযবহার করর জট্রটল ধররের তটববল বাোরো
যায়্। rowspan এর সংখ্যাত্নক মাে বদরয় ট্রিক করা যায় CELL ট্রট কেট্রট ROW এর সমাে হরব
তযমে

01.<table border="1">
02.<tr>
03.<th rowspan="2">Web Language</th>
04.<td>HTML</td>
05.<td>CSS</td>
06.</tr>
07.<tr>
08.<td>PHP</td>
09.<td>JS</td>
10.</tr>
11.<tr>
12.<th>Framework</th>
13.<td>CI</td>
14.<td>Bootstrap</td>
15.</tr>
16.</table>

রেেন:
শ

HTML CSS
Web Language
PHP JS
Framework CI Bootstrap

তকাথায় th, td ইেযাবদ বদরয়বি ভালভারব লক্ষ্য করুে োহরল বকিুই বুঝরবেো। তদখ্ুে দুট্রট row
এর জায়গা বকভারব একট্রট cell th(Web Language) বদরয় দখ্ল করা হরয়রি, rowspan বদরয়।

colspan বদরয় কলাম দখ্ল করা যায় তযমে উপররর তটববল C তদখ্ুে তসখ্ারে Tough দুট্রট কলারম
রাখ্া হরয়রি তযটা অপ্ররয়াজেীয়, ইরে কররল colspan বযবহার করর একট্রট কলামরকই দুট্রটর
সমাে করর বদরে পাবর। তযমে ঐ উদাহরেট্রটর ১৩ এবং ১৪ েম্বর লাইেদুট্রট বাদবদরয় বেরের
লাইেট্রট বদে

1.<td colspan="2"></td>
<p>Simple table with header</p>
<table border="1">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>

<p>Table with thead, tfoot, and tbody</p>


<table border="1">
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
</table>
<p>Table with colgroup</p>
<table border="1">
<colgroup span="4"></colgroup>
<tr>
<th>Countries</th>
<th>Capitals</th>
<th>Population</th>
<th>Language</th>
</tr>
<tr>
<td>USA</td>
<td>Washington, D.C.</td>
<td>309 million</td>
<td>English</td>
</tr>
<tr>
<td>Sweden</td>
<td>Stockholm</td>
<td>9 million</td>
<td>Swedish</td>
</tr>
</table>

<p>Table with colgroup and col</p>


<table>
<colgroup>
<col style="background-color: #0f0">
<col span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
<p>Simple table with caption</p>
<table>
<caption>Awesome caption</caption>
<tr>
<td>Awesome data</td>
</tr>
</table>

You might also like