HTML टेबल का संक्षिप्त परिचय

Overview

• इस लेक्चर में HTML Tables का कॉन्सेप्ट समझाया गया।
• टेबल की संरचना, टैग्स, और row/column span का प्रयोग सिखाया गया।

टेबल क्या है? (Rows, Columns, Cells)

• टेबल डेटा को rows और columns में व्यवस्थित करने की व्यवस्था है।
• Row: क्षैतिज दिशा में डेटा का समूह (row1, row2, आदि)।
• Column: लंबवत दिशा में डेटा का समूह (column1, column2, आदि)।
• Cell: टेबल की सबसे छोटी इकाई; हर row और column का मिलन बिंदु।

HTML Table के मुख्य टैग

• table: टेबल कंटेनर; border जैसे attributes से दृश्यता बढ़ाई जाती है (जैसे border="1")।
• thead: टेबल की headings रखने के लिए सेक्शन।
• tbody: टेबल का actual डेटा रखने का सेक्शन।
• tfoot: टेबल की summary या कुल (जैसे total expense) रखने का सेक्शन।
• tr: एक row बनाने के लिए।
• th: heading cell बनाने के लिए (thead के अंदर उपयोग)।
• td: सामान्य डेटा cell (tbody/tfoot के अंदर)।

Rowspan और Colspan

• rowspan: एक cell को कई rows तक लंबवत फैलाने के लिए (row span = N)।
• colspan: एक cell को कई columns तक क्षैतिज फैलाने के लिए (col span = N)।
• उपयोग नियम:
  • rowspan देने पर नीचे की rows में ओवरलैपिंग td न बनाएं।
  • colspan देने पर उसी row में अतिरिक्त td की संख्या घटाएं।

बेसिक टेबल निर्माण प्रक्रिया

• step 1: table बनाएं, border सेट करें।
• step 2: thead में th से headings जोड़ें।
• step 3: tbody में tr बनाएं; हर tr में td की संख्या columns के अनुसार रखें।
• step 4: tfoot में summary/total जैसा डेटा रखें।
• step 5: जहाँ ज़रूरत हो rowspan/colspan लगाकर layout match करें।

उदाहरण 1: सरल Student टेबल

• Headings: Student ID, Student Name, Gender, Age।
• Rows: चार students का डेटा भरा गया।
• नोट्स:
  • thead में चार th।
  • tbody में चार tr, हर tr में चार td।
  • नाम और अन्य मान बदले जा सकते हैं; संरचना स्थिर रहे।

उदाहरण 2: Rowspan/Colspan डेमो

• आवश्यकता: किसी cell (जैसे age 17) को नीचे तक फैलाना।
• समाधान: td में rowspan="3" देकर तीन rows तक फैलाया।
• आवश्यकता: किसी नाम (जैसे Bill) को दाएँ तीन columns में फैलाना।
• समाधान: td में colspan="3" देकर तीन columns तक फैलाया।
• ध्यान: फैलाए गए हिस्सों के ओवरलैपिंग td हटाएँ।

उदाहरण 3: A–I लेआउट मैचिंग

• लक्ष्य: 4 rows, 3 columns का पैटर्न बनाना।
• स्टेप्स:
  • पहले rows/columns गिनें: 4 rows, 3 columns।
  • तीसरी row में पहला cell ऊपर से फैल रहा; नया td न जोड़ें।
  • चौथी row में एक cell तीनों columns खा रहा; colspan="3" लगाएँ।
• सत्यापन: UI में अपेक्षित अक्षर व्यवस्था A–I के समान दिखे।

उदाहरण 4: Company Founders टेबल

• thead: 5 headings।
• tbody: 4 rows; पहले row में "Company Founder" cell चार rows तक फैला (rowspan="4")।
• tfoot: Total Expense वाला row; "Total Expense" cell तीन columns तक फैला (colspan="3"), राशि $4600।
• नोट्स:
  • हर data row में td की संख्या rowspan/colspan के बाद संतुलित रखी गई।
  • दोहराव वाले cells (जैसे "Company Founder") के लिए rowspan अपनाया।

उदाहरण 5: Country–State–City–Street–Counts टेबल

• Headings: Country, State, City, Street, Male, Female, Others।
• स्ट्रक्चर योजना:
  • 10 rows का डेटा संरचित।
  • Country "1" को 8 rows तक फैलाया (rowspan="8")।
  • State "Maharashtra" को 4 rows तक फैलाया (rowspan="4")।
  • City के अनुसार उप-रोज़; Street और counts (Male, Female, Others) प्रति row।
• नोट्स:
  • जहाँ city दो rows ले, वहाँ city का rowspan="2"।
  • नई state/city आने पर पूर्व rowspan समाप्त; नए td बनाए।
  • अंतिम ब्लॉक में Alaska, AK Central आदि के लिए अलग rowspans लागू।

संरचित सारणी: टैग्स और प्रयोजन

Key Terms & Definitions

• Row: क्षैतिज पंक्ति; tr से परिभाषित।
• Column: लंबवत स्तंभ; th/td की स्थितियों से बनता।
• Cell: टेबल की बुनियादी इकाई; th या td।
• thead/tbody/tfoot: टेबल के अर्थपूर्ण सेक्शन्स; headings, data, summary।
• Rowspan: किसी cell को कई rows तक फैलाने का गुण।
• Colspan: किसी cell को कई columns तक फैलाने का गुण।

Action Items / Next Steps

• होमवर्क: सोमवार–शुक्रवार शेड्यूल टेबल बनाएं।
  • Monday का rowspan="2", Tuesday का rowspan="3"।
  • Seminar का colspan="3", Schedule का colspan="2", Topic सामान्य।
• अभ्यास:
  • किसी भी दिए गए लेआउट में पहले rows/columns गिनें।
  • फैलने वाले cells के लिए सही rowspan/colspan निर्धारित करें।
  • ओवरलैपिंग td/th हटाकर संरचना संतुलित रखें।