आपने MS Word में Table बनाई होगी. और अपने Data को Tabular Format (सारणी) में सजाया होगा? और ये होना लाजमी भी है. क्योंकि MS Word में Table बनाना बहुत ही आसान है.
Word Document की तरह Webpages में भी Data और Information को Tabular Format (सारणी) में प्रस्तुत किया जाता है. जिसके लिए HTML Table का इस्तेमाल किया जाता है. HTML से HTML Table बनाना बहुत ही सरल कार्य है.
इस Lesson में हम आपको HTML Document में Table बनाने की पूरी जानकारी देंगे. आप जानेंगे कि HTML में Table कैसे बनाई जाती है? HTML में Table Create करने के लिए किस HTML Element का इस्तेमाल किया जाता है?
HTML Table Concept को सरल बनाने के लिए हमने इस Lesson को छोटे-छोटे भागों में बांटा है. इन Sections की सूची नीचे दी जा रही है:
Table of Content
- HTML Table का परिचय – Introduction to HTML Table in Hindi
- HTML Table की बनावट – Structure of an HTML Table
- HTML Table से संबंधित कुछ Important Tags के नाम और उनका उपयोग
- एक HTML Table बनाना – Creating an HTML Table in Hindi
- Table को Title (शीर्षक) देना
- Table में Heading बनाना
- Table में Border Set करना
- Table की Height और Width Set करना
- Table का Background Change करना
- Cellpadding और Cellspacing Attributes का इस्तेमाल करना
- Colspan और Rowspan Attributes का इस्तेमाल करना
- आपने क्या सीखा?
1. HTML Table का परिचय – Introduction to HTML Table in Hindi
HTML Document में Table Element द्वारा Table Define की जाती है. Opening <table> Tag द्वारा एक Table को शुरू किया जाता है. और Closing </table> Tag द्वारा Table का समापन किया जाता है.
Table द्वारा हम Data को Tabular Format में Represent करते है. इस Data में Texts, Images, Videos, Links आदि प्रकार का Data शामिल होता है. हम अपनी जरूरत के अनुसार किसी भी प्रकार के Data को Table में Show करा सकते है.
2. HTML Table की बनावट – Structure of an HTML Table
आप ऊपर दिए गए फोटो को देखकर जान सकते है कि एक Table में Rows, Columns और Cells होते है. ये तीन Element ही एक Table के आधार होते है.
- Columns – एक Table के खडे खाने को Column कहा जाता है. एक Table में आप अपनी जरूरत के अनुसार Columns Add और Remove कर सकते है. दो खडि रेखाओं से एक Column का निर्माण होता है.
- Rows – Table में आडि रेखाओं से बने खाने को Row कहा जाता है. Rows एक Column के बिल्कुल विपरित होती है. दो आडि रेखाओं से एक Row का निर्माण होता है. HTML Table में
<tr>Element द्वारा Row को Define किया जाता है. - Cell – Cell का निर्माण Rows और Columns से होता है. जब Columns और Rows आपस में टकराते है. तब एक Cell का निर्माण होता है. HTML Table में Actual Data को Cells में ही Define किया जाता है.
<td>Element द्वारा Table Data यानि Cell को Define किया जाता है.
3. HTML Table से संबंधित कुछ Important Tags के नाम और उनका उपयोग
Table Element से HTML Table को Define किया जाता है. लेकिन, अकेला Table Element ही एक Table नही बना सकता है. इसलिए एक पूरी Table बनाने के लिए कुछ अन्य Tags का इस्तेमाल भी किया जाता है. जिनके बारे में नीचे बताया जा रहा है:
<table>– इस Element द्वारा HTML Table को Define किया जाता है.<tr>– इस Element का पूरा नाम Table Row है. Table Row Element से Table Rows को Define किया जाता है.<td>– इस Element का पूरा नाम Table Data है. इसे Cell Data के नाम से भी जाना जाता है. Table Data से एक Table में Table Data को Define किया जाता है.<th>– इस Element का पूरा नाम Table Heading होता है. इसका Use Table में Headings को Define करने के लिए किया जाता है.<caption>– इस Element का इस्तेमाल Table Title Define करने के लिए किया जाता है.
4. एक HTML Table बनाना – Creating an HTML Table in Hindi
नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmltable.html नाम से Save कीजिए. और इसे Open कीजिए.
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
जब आप ऊपर दिए कोड को Save करके अपने मन पसंद ब्राउजर में Open करेंगे तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
Example को समझिए
ऊपर दिए कोड से हमने एक Simple HTML Table को बनाया है. जिसमें 2 Rows और 4 Columns को Define किया गया है. Table Rows को Define करने के लिए <tr> Tag का इस्तेमाल किया गया है. और Table Rows में Data Cells को Define करने के लिए <td> Tag का इस्तेमाल किया गया है.
Note: आप एक Row में जितने Columns Define करना चाहते है. आपको उतने ही <td> Tag Define करने होंगे.
5. Table को Title (शीर्षक) देना
HTML Table का Title (शीर्षक) Define करने के लिए <caption> Element का इस्तेमाल किया जाता है. एक Table को शीर्षक देने से Table को पहचानने में आसानी रहती है. आप अलग-अलग प्रकार की Tables को अलग-अलग शीर्षक दे सकते है.
इसे Try कीजिए
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″>
<caption>My First HTML Table</caption>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
उदाहरण को समझिए
ऊपर दे गई HTML Table में हमने शीर्षक को Define किया है. इसके लिए हमने <caption> Tag का इस्तेमाल किया है. हमने इस Table को My First HTML Table शीर्षक दिया है. आप अपने अनुसार कुछ भी शीर्षक दे सकते है. शीर्षक देने के लिए <caption> Tag को <table> Tag के तुंरत बाद Define करना पडता है.
6. Table में Heading बनाना
HTML Table में Heading बनाने के लिए <th> Tag का इस्तेमाल किया जाता है. इस Element का पूरा नाम Table Heading होता है. Table में Heading में हम प्रत्येक Column को एक अलग नाम देते है. जिससे उस Column में उपलब्ध Data को पहचाना आसान हो जाता है. Table Heading By Default Bold और Center Aligned होती है. इस Setting को आप CSS के द्वारा Override भी कर सकते है.
Table Heading को अधिकतर Table की पहली Row में Define किया जाता है. आप अपने Table Data के अनुसार Headings का नाम दे सकते है.
इसे Try कीजिए
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″>
<caption>Heading in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>
</html>
ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:
| First Name | Last Name |
|---|---|
| Rahul | Gautam |
| Subodh | Kumar |
7. Table में Border Set करना
Table में चारों तरफ Border बनाने के लिए Border Attribute का इस्तेमाल किया जाता है. यदि आप Table में Border दिखाना चाहते है, तो Value को “1” रखें. और यदि आप बॉर्डर नही दिखाना चाहते है, तो Value को “0” रखें.
Border लगाने के अलावा आप Border Color भी Set कर सकते है. Border Color Set करने के लिए bordercolor Attribute का इस्तेमाल किया जाता है. आप अपनी पसंद का Color Set कर सकते है.
Note: आप Color Set करने के लिए Color का नाम या फिर उस Color विशेष का Hex Code भी इस्तेमाल कर सकते है. पसंद आपकी है. हम आपको Hex Code का इस्तेमाल करने के लिए कहेंगे.
इसे Try कीजिए
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red”>
<caption>Border in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>
</html>
ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:
| First Name | Last Name |
|---|---|
| Rahul | Gautam |
| Subodh | Kumar |
8. Table की Height और Width Set करना
Table की Height और Width Set करने के लिए height और width Attributes का इस्तेमाल किया जाता है. आप अपनी जरूरत के अनुसार Table की ऊँचाई और चौडाई बना सकते है.
इसे Try कीजिए
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” height=”200″ width=”300″>
<caption>Border in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>
</html>
ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:
| First Name | Last Name |
|---|---|
| Rahul | Gautam |
| Subodh | Kumar |
9. Table का Background Change करना
Table में Background Set करने के लिए दो Attributes का इस्तेमाल किया जाता है.
- bgcolor – इस Attribute द्वारा आप पूरी Table या किसी Particular Cell का Background Color को Change कर सकते है.
- background – इस Attribute से भी आप Table Background को Define कर सकते है. लेकिन, इसके द्वारा आप किसी Image को Table Background के रूप में इस्तेमाल कर सकते है.
इसे Try कीजिए
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” height=”200″ width=”300″ bgcolor=”#FFFF66″>
<caption>Background in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>
</html>
ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:
| First Name | Last Name |
|---|---|
| Rahul | Gautam |
| Subodh | Kumar |
10. Cellpadding और Cellspacing Attributes का इस्तेमाल करना
Table Cells और Texts के बीच खाली जगह (White Space) को Adjust करने के लिए Cellpadding और Cellspacing Attributes का उपयोग किया जाता है.
Cellpadding से Cell Border और Content के बीच की दूरी को Define किया जाता है. और Cellspacing से Cells के बीच की दूरी को Define किया जाता है.
इसे Try कीजिए
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” cellpadding=”15″ cellspacing=”15″>
<caption>Cellpadding and Cellspacing in HTML Table
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>
</html>
ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:
| First Name | Last Name |
|---|---|
| Rahul | Gautam |
| Subodh | Kumar |
11. Colspan और Rowspan Attributes का इस्तेमाल करना
जब हम Table में Data को एक से अधिक Rows और Columns में लिखना चाहते है, तो इसके लिए हमें colspan और rowspan Attributes का इस्तेमाल करना पडता है.
Colspan Attribute दो या अधिक Columns को Merge करके एक Column बना देता है. और Rowspan Attribute दो या अधिक Rows को Merge करके एक Row बना देता है.
इसे Try कीजिए
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” width=”300″ height=”200″>
<caption>Colspan and Rowspan in HTML Table
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
<td rowspan=”2″>Delhi</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
<td colspan=”3″>Sanjay</td>
</tr>
</table>
</body>
</html>
ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:
| First Name | Last Name | City |
|---|---|---|
| Rahul | Gautam | Delhi |
| Subodh | Kumar | |
| Sanjay | ||
आपने क्या सीखा?
इस Lesson में हमने आपको HTML Table की पूरी जानकारी दी है. आपने जाना कि HTML Table को Table Element द्वारा Define किया जाता है. इसके अलावा आपने कुछ Important Attributes के बारे में भी जाना है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.
#BeDigital
Nice