Html Tables in Hindi : Html mein hume koi bhi tables banana ho to uss ke liya hum <table> tag ka use karte hai, Abhi tak humne html ke bare mein bhaut kuch pada hai previous post mein to ajj hum html tables ko acha sa samajega or puri koshish karoga ki app ko acha sa html tables ke bare mein pta chale ki ussme kya or kesa use hota hai.
* Html tables hamesha <table> tag [Starting tag] or </table> [Closing Tag] mein hota hai.
Iss table ko dhyan sa deko
*Yeh ek table hai iska matlab <table> tag lagaga
*Iss table mein sabse phela table ki row hai jiske liya hum <tr> tag use karega.
*Table ki row mein humne table ka heading lika hua hai Firstname, Lastname,Age, Jiske liya hum <td> tag ka use karega
*jab humari heading comple ho jayegi fir hum fir sa table ki row ko dekega jisme hoga humara table ka data uske liya hum <td> ka use karega
Example ko acha sa deko
Output:
Output humare pass kuch aisa ayega
so isme distance create karne ke liya hum table mein width ko use karega
For example :
App dyan sa dek sakte ho mena table mein kya change kiya hai dono tables mein deko mena isme style attribute ka use kiya hai jisme width mena 100% rakki hai
or iska output kuch iss tarah sa fir dikegga
Output:
I hope app samaj gaye hone style attribute sa kya huaa
Chalo itna to humne samaj liki table mein head kesa banate hai or usme style attribute ko kesa use karte hai
Iske baad humne table ke row ka data likna hai jiske liya hum hum table ki row <tr> ke ander table ka data likega <td> ke ander
For example:
Itna bada code dek kar dar mat jana bhaut easy hai app dyan sa deko jha humara table ka head katam ho rha hai uske baad humne tab row ka tag ke baad table ka data likna start kiya hai jesa humne table ke head mein lika hai bass ussi tara table ke data mein hum uss head ka data dala hai
Iska output necha dekko
Abb table ko deko or iss output ko deko app samaj jaoge kesa kya kiya sath mein jab app iski pratice karoge to app or bethar tarika sa samaj jaogee
Lekin ek baat apne abbi bhi notice nahi ki hoga humne table to bana liya lekin iski outline kha hai matlab jesa ek tab dikata hai boxes ke ander
To uss ke liya hum style tag ka use karega <head> element mein Jha tittle likka hota hai
Example:
App deko mena upper head mein style element ko kesa use kiya hai
*Sabse phela mena <style>tag ko use kiya
*Fir style mein table ,tr (table ki row), th( table ka head),td(table ka data ) lika kis muje isko change karna hai
*Uske baad mena brackets mein border attribute ka use kiya jisme mena 1px silid black lika hai jiska matlab yeh hai jo table banna hai mena vo 1px ka or solid black line colour ka ho
Output:
Vo fir kuch aise dikegga lekin app dek sakte hai abbi bhi isme double double boxes mein show ho rha hai to usko hatane ke liya hum border attribute ke baad he ek or attribute use karegga border-collapse ka necha example mein app dek sakte hai :
Example:
Output:
Abb app dek sakte hai vo hat chuka hai or ek table humara ban chuka hai
Note: Hamesha bolta ho ki pratice nahi karoge to tab tak apko samaj nahi ayegga ,Khud pratice karoge to app samjoge ki kon si cheez sa kya hoga kya nahi, Ek baar nahi 100 baar karo lekin aise uss cheez ko samjo jo kabhi app bhuloge nahhi
I hope apko acha sa samaj a gaya hoga ki tablesa kesa banate hai Html mein .
* Html tables hamesha <table> tag [Starting tag] or </table> [Closing Tag] mein hota hai.
Iss table ko dhyan sa deko
*Yeh ek table hai iska matlab <table> tag lagaga
*Iss table mein sabse phela table ki row hai jiske liya hum <tr> tag use karega.
*Table ki row mein humne table ka heading lika hua hai Firstname, Lastname,Age, Jiske liya hum <td> tag ka use karega
*jab humari heading comple ho jayegi fir hum fir sa table ki row ko dekega jisme hoga humara table ka data uske liya hum <td> ka use karega
Example ko acha sa deko
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table >
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Education</th>
<th>College</th>
<th>Result</th>
</tr>
</table>
</body>
</html>
Output:
Output humare pass kuch aisa ayega
so isme distance create karne ke liya hum table mein width ko use karega
For example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Education</th>
<th>College</th>
<th>Result</th>
</tr>
</table>
</body>
</html>
App dyan sa dek sakte ho mena table mein kya change kiya hai dono tables mein deko mena isme style attribute ka use kiya hai jisme width mena 100% rakki hai
or iska output kuch iss tarah sa fir dikegga
Output:
I hope app samaj gaye hone style attribute sa kya huaa
Chalo itna to humne samaj liki table mein head kesa banate hai or usme style attribute ko kesa use karte hai
Iske baad humne table ke row ka data likna hai jiske liya hum hum table ki row <tr> ke ander table ka data likega <td> ke ander
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Education</th>
<th>College</th>
<th>Result</th>
</tr>
<tr>
<td>Rakshak</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Bonnie Foi College</td>
<td>Pass</td>
</tr><tr>
<td>Anisha</td>
<td>Devi</td>
<td>M.Sc </td>
<td>Dav Patil College</td>
<td>Pass</td>
</tr><tr>
<td>Amika</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Prade Girls College</td>
<td>Pass</td>
</tr><tr>
<td>Ajay</td>
<td>Thakur</td>
<td>12th</td>
<td>May Fair Hr sec School</td>
<td>Pass</td>
</tr><tr>
<td>Monika</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Prade Girls College</td>
<td>Pass</td>
</tr><tr>
<td>Sonika</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Jammu University</td>
<td>Pass</td>
</tr>
</table>
</body>
</html>
Itna bada code dek kar dar mat jana bhaut easy hai app dyan sa deko jha humara table ka head katam ho rha hai uske baad humne tab row ka tag ke baad table ka data likna start kiya hai jesa humne table ke head mein lika hai bass ussi tara table ke data mein hum uss head ka data dala hai
Iska output necha dekko
Abb table ko deko or iss output ko deko app samaj jaoge kesa kya kiya sath mein jab app iski pratice karoge to app or bethar tarika sa samaj jaogee
Lekin ek baat apne abbi bhi notice nahi ki hoga humne table to bana liya lekin iski outline kha hai matlab jesa ek tab dikata hai boxes ke ander
To uss ke liya hum style tag ka use karega <head> element mein Jha tittle likka hota hai
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
table,th,tr,td{
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Education</th>
<th>College</th>
<th>Result</th>
</tr>
<tr>
<td>Rakshak</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Bonnie Foi College</td>
<td>Pass</td>
</tr><tr>
<td>Anisha</td>
<td>Devi</td>
<td>M.Sc </td>
<td>Dav Patil College</td>
<td>Pass</td>
</tr><tr>
<td>Amika</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Prade Girls College</td>
<td>Pass</td>
</tr>
</table>
</body>
</html>
App deko mena upper head mein style element ko kesa use kiya hai
*Sabse phela mena <style>tag ko use kiya
*Fir style mein table ,tr (table ki row), th( table ka head),td(table ka data ) lika kis muje isko change karna hai
*Uske baad mena brackets mein border attribute ka use kiya jisme mena 1px silid black lika hai jiska matlab yeh hai jo table banna hai mena vo 1px ka or solid black line colour ka ho
Output:
Vo fir kuch aise dikegga lekin app dek sakte hai abbi bhi isme double double boxes mein show ho rha hai to usko hatane ke liya hum border attribute ke baad he ek or attribute use karegga border-collapse ka necha example mein app dek sakte hai :
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Education</th>
<th>College</th>
<th>Result</th>
</tr>
<tr>
<td>Rakshak</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Bonnie Foi College</td>
<td>Pass</td>
</tr><tr>
<td>Anisha</td>
<td>Devi</td>
<td>M.Sc </td>
<td>Dav Patil College</td>
<td>Pass</td>
</tr><tr>
<td>Amika</td>
<td>Thakur</td>
<td>Graduation</td>
<td>Prade Girls College</td>
<td>Pass</td>
</tr>
</table>
</body>
</html>
Output:
Abb app dek sakte hai vo hat chuka hai or ek table humara ban chuka hai
Note: Hamesha bolta ho ki pratice nahi karoge to tab tak apko samaj nahi ayegga ,Khud pratice karoge to app samjoge ki kon si cheez sa kya hoga kya nahi, Ek baar nahi 100 baar karo lekin aise uss cheez ko samjo jo kabhi app bhuloge nahhi
I hope apko acha sa samaj a gaya hoga ki tablesa kesa banate hai Html mein .