HTML TUTORIAL: TABLE

HTML TUTORIAL IN HINDI

HTML TUTORIAL: TABLE

  • Introduction to HTML Table
  • Important tags of table
  • Creating HTML Table

INTRODUCTION TO HTML TABLE

HTML document me table bnane ke liye table tag ko use karna hota hai. table ki opening aur closing tag hoti hai. Jaise ki sabhi tag opening tag suru aur closing tag se band waise table me bhi kar sakte hai.

Table ki madat se koi bhi data ko structure form me dekha sakte ho. Data ko structure form me dekhane se user ki attractive badhti hai.



Table me apni hisab se koi bhi data rakh sakte hai. jaise: text, audio, video, image or links etc.Table 3 element milkar bante hai, rows, colums aur cells

Rows: Table me horizontal khane ko rows khte hai. HTML me rows ko <tr> element dwara define karte hai.

Columns: Table me vertically khane ko columns kahte hai.

Cell: row aur columns milkar ek cell bante hai. jise cell kahte hai. koi bhi data ko define karna to cell me hi karna hoga.

IMPORTANT TAGS OF TABLE

Table ko bnane ke liye aur bhi bhut tags ko milana padta hai tabhi jakar ek table bnta hai. Niche un sabhi important tags ko bataya gaya hai.

  • <table>: table element dwara HTML table ko define kiya jaata hai.
  • <tr>: Isse table row kahte hai or is element se table rows ko define kiya jata hai.
  • <th>: isse table heading kahte or heading ko define karne ke liye <th> tag ko define karne ke liye tag ko use kiya jata hai.
  •  <td>: isse table Data kahte hai. Table me jo data hota hai usse define karne ke liye use kiya jaata hai.
  • <caption>: iska use table title define karne ke liye kiya jaata hai.

CREATING TABLES IN HTML

Table ki baat kare to row aur columns milkar bna hota hai. HTML me table bnane ke liye <table> tag ko use karna hoga.

Table me hme row create karne liye <tr> tag or columns ke liye <td> tag ko use karna hoga. <tr> aur <td> tag ki madat se jitni chahe uttni tag ko define karke row and columns create kar sakte ho.



Example of HTML tables:
<!DOCTYPE html>
<html>
<head>
<title>table heading</title>
</head>
<body>
<table border= "1">
<tr>
<td> First row first colum</td>
<td> First row second colum</td>
</tr>
<tr>
<td> second row first colum</td>
<td> second row second colum</td>
</tr>
</table>
</body>
</html>

Result:
HTML TUTORIAL: TABLE, HTML Tutorial In Hindi

HTML me table create karne ke liye table ki order hmesa dhyan rakhna hoga. Table create karne ke liye <table> ko use kiya jaata uske badh <tr>, <th> aur <td> tags ko.

Note: table me aapko border attribute ko define karna hai tb jakar table ki border show hogi. Agar border define nahi karte hai to border show nahi hogi.

CREATING TABLE HEADING

Heading jo dusre text se mota hoga. HTML me heading aasani se create kar sakte hai. isme heading bnane ke liye <th> tag ka istemal kiya jaata hai jisse table heading tag kahte hai. Is tag me aap job hi information likhte hai wo heading ke rup me show hogi. <tr> tag ke andar hi likhna hoga. Niche example dekh sakte hai.

Example:
<!DOCTYPE html>
<html>
<head>
<title>table heading</title>
</head>
<body>
<table border= "1">
<tr>
<th> Name </th>
<th> phone </th>
<th> address </th>
</tr>
<td> Arun </td>
<td> 12344566 </td>
<td> Delhi </td>
</tr>
<tr>
<td> Gopal </td>
<td> Nepal </td>
</tr>
</table>
</body>
</html>

Result:
HTML TUTORIAL: TABLE, HTML Tutorial In Hindi

CREATING TABLE TITLE

HTML table ka title define karne ke liye <caption> tag ka use kiya jaata hai. title jo table ko pahchane me aasan hoga, aapke pass jitni table hai un sabhi ka title de sakte ho.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML table title</title>
</head>
<body>
<table border= "1">
<caption> Student information </caption>
<tr>
<td> First row first colum</td>
<td> First row second colum</td>
</tr>
<tr>
<td> second row first colum</td>
<td> second row second colum</td>
</tr>
</table>
</body>
</html>

Result:
HTML TUTORIAL: TABLE, HTML Tutorial In Hindi



CREATING TABLE BORDER

Table ki border bnane k eliye border attribute ka istemal kiya jata hai. yaj tak aap apne table ki border define nahi karenge tb tk aapke table ki border show nahi hogi.

Border ko jitna mota rakhna chahte ho utna value dena hoga. Agar aap chahte ho ki hmare border ka color apni pasand ka ho to uske liye border color attribute ka istemal karna hoga.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML table title</title>
</head>
<body>
<table border= "1" bordercolor=  "blue">
<caption> Student information </caption>
<tr>
<th> Name </th>
<th> phone </th>
</tr>
<th> Arun </th>
</tr>
<tr>
<th> Gopal </th>
</tr>
</table>
</body>
</html>


HTML table background change

HTML table me background color set karne ke liye 2 attribute ka istemal kiya jaata hai.

1. bgcolor- yah attribute ki madat se puri table ya kisi particular ceel ka background color ko change kar sakte hai.
2. background- yah attribute ki madat se aap kisi image ko table background ke rup me istemal kr sakte ho.

<table border= “1”>
Border color= “blue” height= “150” width= “180” bgcolor= “ green”>

Aap is code ko table border ki example me add karke dekh sakte hai.

COLSPAN ATTRIBUTE & ROWSPAN

Colspan and rowspan attribute ko istemal hmare pass bhut sara data ho aur data ek row and column me na hokar dusre me ho.

Sabse pehle jaante hai colspan attribute ke bare me. Agar ek column ko devide karna hai bhut sara column me to colspan attribute se kar sakte hai. jis column me aap colspan define karte hai us column ko utne hi column me merge kar deta hai.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML table title</title>
</head>
<body>
<table border= "1">
<tr>
<th> Name </th>
<th colspan= "2"> phone no </th>
</tr>
<th> Arun </th>
<td> 5848435 </td>
<td> 4535345 </td>
</tr>
<tr>
<td> Gopal </td>
<td colspan= " 2"> 532536 </td>
</tr>
</table>
</body>
</html>

Result:
HTML TUTORIAL: TABLE, HTML Tutorial In Hindi

Upper ki example me aap samajh sakte hai ki kisi ek student ke pass do monile no. hai aur dono mobile no. ko apne record me add kran hai. tab aap ek column me ek se jyada no. ko add kar sakte ho.

ROWSPAN ATTRIBUTE

Colspan attribute ko ache se samajh gaye ho to rowspan attribute same waise hai. rowspan ko <tr> tag me define karte ho. Isme jitni value dete ho wah utni row me devide ho jayega.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML table title</title>
</head>
<body>
<table border= "1">
<tr>
<th rowspan= "2"> friends </th>
<td> Gopal </td>
</tr>
<td> mohan</td>
</tr>
<tr>
<th rowspan= "2"> relations </th>
<td> sister </td>
</tr>
<tr>
<td> brother</td>
</tr>
</table>
</body>
</html>
Result:
HTML TUTORIAL: TABLE, HTML Tutorial In Hindi

Table tag me aapko bhut kuch sikhne ko mila. Aapko ek bar me table tag ko samajh me nahi aata to bar-bar path HTML page bnaye . HTML page bnane smay sabhi tag aur attribute ko dhyan me rakh kar karna hai. aba age ki lesson me dekhenge list tag ki bare me.

Previous: Image Tags
Next : List Tag


HTML TUTORIAL: TABLE HTML TUTORIAL: TABLE Reviewed by Phaguni Mandal on 12/13/2018 Rating: 5

No comments:

Powered by Blogger.