Theory
आपकी Portfolio में Gridlock
आप अपनी portfolio website पर अपने top तीन college projects दिखाना चाहते हैं। आप project titles, वे semesters जिनमें आपने उन्हें बनाया, और अपने final grades अगल-बगल दिखाना चाहते हैं। पर जब आप उन्हें साधारण text tags इस्तेमाल करके type करते हैं, वे बेतरतीब कतार में लगते हैं, अव्यवस्थित और भ्रामक दिखते हुए। आपकी site visit करता एक recruiter titles को grades के साथ align नहीं कर सकता। हम इस structured information को साफ़ horizontal rows और vertical columns में कैसे सफ़ाई से बिठाएँ जो पूरी तरह professional दिखे?
Theory
Graph Paper Notebook
अपने school के दिन याद कीजिए जब math के लिए एक graph paper notebook इस्तेमाल करते थे। जब आप एक chart बनाते हैं, आप पहले से छपे grid boxes इस्तेमाल करते हैं। हर individual box एक number रखता है, और हर horizontal line एक पूरा record दर्शाती है। आप adjacent boxes को भी जोड़ सकते हैं अगर आपको एक चौड़ी title row चाहिए। एक HTML table बिल्कुल graph paper की तरह काम करती है। यह एक सख़्त structural mesh बनाती है जहाँ content जगह से खिसक नहीं सकता, आपकी grid को बेदाग़ align रखते हुए।
Theory
एक HTML Table की Anatomy
web engineering में, एक HTML table data को एक grid format में दिखाने के लिए इस्तेमाल एक element है। यह बाहरी <table> tag container इस्तेमाल करके बनाई जाती है। इस container के अंदर, हर individual row <tr> (table row) tag इस्तेमाल करके शुरू होती है। एक row के अंदर, आप individual cells या तो bold केंद्रित titles के लिए <th> (table header), या regular text cells के लिए <td> (table data) इस्तेमाल करके परिभाषित करते हैं। आप table खोलने के तुरंत बाद एक title के रूप में काम करने के लिए एक वैकल्पिक <caption> tag भी निर्दिष्ट कर सकते हैं।
At a glance
data grids जोड़ने के लिए इस्तेमाल मुख्य HTML elements।
| Tag | Purpose | Default Visual Behavior |
|---|---|---|
| <table> | पूरे grid layout के लिए मुख्य बाहरी wrapper | बिना borders के अदृश्य boundaries |
| <caption> | grid के ऊपर एक accessible title देता है | बिल्कुल शीर्ष पर केंद्रित text |
| <tr> | cells के लिए एक horizontal container declare करता है | एक block level line breaker की तरह काम करता है |
| <th> | एक row के अंदर प्रमुख column headings बनाता है | Bold text और अपने-आप केंद्रित |
| <td> | data values रखता एक standard data cell बनाता है | Regular left aligned text content |
Practical
एक Standard Projects Grid Layout
<table width="100%" height="150">
<caption>My Semester Projects</caption>
<tr>
<th>Project Name</th>
<th>Semester</th>
<th>Grade</th>
</tr>
<tr>
<td>Portfolio Site</td>
<td>Semester 2</td>
<td>A+</td>
</tr>
<tr>
<td>Library App</td>
<td>Semester 1</td>
<td>A</td>
</tr>
</table>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Spacing Controls और Cell Merging
अपनी grid presentation परिष्कृत करने के लिए, आपको spacing और merging पर महारत हासिल करनी होगी। cellpadding attribute internal spacing नियंत्रित करता है: एक cell border और उसके अंदर text के बीच buffer distance। cellspacing attribute external spacing तय करता है: adjacent cell borders के बीच साफ़ gap। जब आपको cells merge करने हों, एक अकेले cell को कई columns भर horizontally फैलाने के लिए colspan इस्तेमाल कीजिए, या एक cell को कई rows भर vertically नीचे फैलाने के लिए rowspan इस्तेमाल कीजिए।
Quiz
आप एक lab assignment के लिए एक financial report table बना रहे हैं और चाहते हैं कि bottom row में एक अकेला 'Total Expenses' label cell बिल्कुल तीन columns भर फैले। कौन सी attribute combination valid है?
- <td rowspan="3">
- <td colspan="3">
- <td size="3">
- <td width="300%">
Show the answer
<td colspan="3">
colspan attribute एक cell को columns भर horizontally विस्तारित करता है, colspan="3" को तीन columns मिलाने के लिए सही चुनाव बनाते हुए। rowspan cells को rows भर vertically नीचे merge करता है, जो यहाँ row flow बिगाड़ देता।
Think first
Spacing और Padding Behavior का अनुमान
मन में एक table की जाँच कीजिए जहाँ text cell grid borders से कसकर चिपका है, पर grid boxes ख़ुद के बीच बड़े white gaps हैं। आप इसे कैसे ठीक करते हैं? tap करने से पहले सोचिए।
Show the answer
आपको cellpadding attribute का value बढ़ाना होगा ताकि cell walls अंदर के text से दूर धकेले जाएँ, internal breathing room बनाते हुए। साथ ही, आपको cellspacing attribute का value घटाना होगा ताकि cell borders के बीच gaps घटें और grid blocks को क़रीब खींचें।
Watch out
टूटी Floating Cell का जाल
university semester practical exams में एक गंभीर ग़लती rows भर cell counts का बेमेल होना है। अगर आपकी header row में तीन <th> tags हैं, पर आपकी data row में केवल दो <td> tags हैं, browser line के अंत में एक भद्दा ख़ाली गड्ढा render करता है। याद रखिए: अगर आप एक अकेले cell पर colspan="2" इस्तेमाल करते हैं, वह cell उस row के कुल cell allotment की ओर 2 गिनी जाती है। हमेशा पक्का कीजिए कि हर एक row बिल्कुल एक जैसे cell sum तक जोड़ती है!
Formula
Exam Answer Recipe: सुरक्षित Table निर्माण
जब एक theory question आपसे एक जटिल grid layout के लिए code लिखने को कहे, पूर्ण marks के लिए ये programmatic steps execute कीजिए:
- मुख्य
<table>wrapper खोलिए और तुरंत एक<caption>insert कीजिए। - column headers के लिए
<th>tags के साथ<tr>इस्तेमाल करके अपनी पहली row बनाइए। - मेल खाते
<tr>और<td>containers इस्तेमाल करके data rows क्रमिक रूप से भरिए। - अगर cells merge होती हैं तो tags के अंदर explicit
rowspanयाcolspanmodifiers embed कीजिए। - elements को structural क्रम में साफ़-सुथरे बंद कीजिए: data cell बंद कीजिए, row बंद कीजिए, फिर table बंद कीजिए।
Summary
Key takeaways
<table>tag parent container के रूप में काम करता है, जबकि<caption>एक ऊपरी description set करता है।- Rows
<tr>से बनते हैं, जिसमें headers के लिए<th>और structural data cells के लिए<td>हैं। - Cellpadding internal padding room set करता है, जबकि cellspacing external border spacing नियंत्रित करता है।
- Colspan adjacent cells को columns भर merge करता है, जबकि rowspan एक cell को rows भर नीचे विस्तारित करता है।
- structural integrity बनाए रखने के लिए हर row को explicit रूप से एक जैसा कुल cell count देना होगा।
- Memory Hook: Rows चौड़े जाते हैं, columns गहरे जाते हैं, हर cell गिनिए वरना आपकी grid structure रोएगी।