 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका फिर स्वागत है। आज हम लेसन १६ सीखेंगे।
पिछले लेसन में हम ने वेब पेज में ऑडियो इन्सर्ट करना सीखा।
आज हम टेबल बनाना सीखेंगे।
HTML tables
टेबल्स बनाने के लिये <table> tag होता है। एक टेबल में rows और columns होते हैं। हर एक column को heading होता है। टेबल का नाम होता है। इसे caption कहते हैं। हम जो टेबल बनानेवाले हैं, उसमें तीन columns हैं, पहला column serial number, दूसरा देश का नाम और तीसरा खण्ड का नाम। जितने देश हम देंगे उतने rows होंगे। हर एक column को एक heading है। हमारे टेबल का नाम "Countries and Continents" है। |
| आकृति १६-१ Table rows, columns, column heading, table caption |
अब हम table बनाने के लिये coding लिखेंगे। एक Notepad फाइल ओपन कीजिये। इसमें लेसन-15 का पहले लाइन से <body> तक कोड कॉपी कीजिये। इस के नीचे लिखिये
<table>
<table> tag का उपयोग वेब पेज में टेबल बनाने के लिए होता है। <tr> tag टेबल में row define करने के लिए होता है। <tr> element में लिखा हुआ <th> element हर column का heading देता है। इस लिए टेबल में ऐसे headings लिखते हैं।
<tr>
<th>column heading-1</th>
<th>column heading-2</th>
</tr>
इसी तरह टेबल के दूसरे rows लिखे जाते हैं। ऊपर लिखे हुए कोड में जहाँ "th" है उसकी जगह पर "td" लिखने पर टेबल के दूसरे rows आते हैं।
तो rows का coding ऐसा होगा।
<tr> first row
<td>first data</td>
<td>second data data</td>
<td>second data data</td>
</tr>
<caption> tag का उपयोग टेबल का नाम देने के लिये होता है। यह सेन्टर में डिस्प्ले होता है। हर एक column का heading बोल्ड और centered होता है।
अब हमारे प्रोग्राम में <body> के नीचे table का कोड लिखिये।
<table>
<caption>Countries and Continents</caption>
<tr>
<th>Serial Number</th>
<th>Country</th>
<th>Continent</th>
</tr>
<tr>
<td>01</td>
<td>India</td>
<td>Asia</td>
</tr>
<tr>
<td>02</td>
<td>United Kingdom</td>
<td>Europe</td>
</tr>
<tr>
<td>03</td>
<td>United States of America</td>
<td>North America</td>
</tr>
<tr>
<td>04</td>
<td>Japan</td>
<td>Asia</td>
</tr>
<tr>
<td>05</td>
<td>Germany</td>
<td>Europe</td>
</tr>
</table>
</ body> और </html> दीजिये। इसे "Lesson-16" और "Lesson-16.html" के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति १६-२. पर क्लिक कीजिये।
 |
| आकृति १६-२. HTML table |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये। हमारा टेबल डिस्प्ले हुआ है।
 |
| आकृति १६-३ Table in a web page |
इस टेबल में हम rows और columns के बीच लाइन्स निकाल सकते हैं, कलर दे सकते है। इसके लिये CSS का उपयोग किया जाता है। हम यह सब CSS टेबल लेसन में सीखेंगे।
Important Point:
१. <table> का उपयोग वेब पेज में टेबल दिखाने के लिये होता है।२. <tr> टेबल की row के लिये होता है।
३. सब से पहले row में heading होता है। इस के लिये <th> का उपयोग करते हैं।
४. हर एक row में data लिखने के लिए <td> का उपयोग करते हैं।
५. टेबल का नाम centered होता है।
६. कॉलम के headings bold और centered होते हैं।
लेसन १५ लेसन १७
