HTML TUTORIAL IN HINDI
- Introduction
- Basic Tags
- First Webpages
- Attributes
- Formatting
- Meta Tags
- Comment Tags
- Images Tags
- Table Tags
- List Tags
- LInk Tags
- List Tags
- Frame Tags
- Block Tags
- Background
- Color
- Fonts Tags
- Form Tags
- Heading
- Marquees
- Embed Multimedia
- Layout
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 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:
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:
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:
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:
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
Previous: Image Tags
Next : List Tag
0 Comments