आपस में जुड़ने वाले स्पैन वाली HTML तालिका की योजना बनाने के लिए पहले उसका पूरा ग्रिड बनाएँ, हर मर्ज किए गए सेल को एक आयत दें और सेल केवल वहीं लिखें जहाँ वे आयत शुरू होते हैं। यह मार्गदर्शिका एक काल्पनिक उदाहरण के चरण बताती है, जिसे आप TextEdit में बना सकते हैं और अपने Mac पर देख सकते हैं।

सेल लिखने से पहले ग्रिड तय करें

काम यह है कि पाँच स्तंभों वाली एक तालिका बनाई जाए, जिसमें समूहबद्ध स्तंभ शीर्षक, पंक्तियों और स्तंभों दोनों में फैला एक सेल, और अलग-अलग संख्या में पंक्तियों में फैला एक अन्य सेल हो। नीचे दिए गए लेबल और सामग्री उदाहरण के लिए हैं: वे स्लॉट के अनुसार व्यवस्थित तटस्थ नोड ब्लॉकों को दर्शाते हैं।

HTML तालिकाएँ बहुआयामी डेटा दर्शाती हैं। उनके सेल को बिना ओवरलैप किए तालिका का पूरा ग्रिड भरना चाहिए। यदि आपका अपेक्षित परिणाम केवल असंबद्ध बॉक्सों की पृष्ठ व्यवस्था है, तो HTML मानक लेखकों को इसके बजाय CSS Grid जैसे लेआउट टूल इस्तेमाल करने का निर्देश देता है। यहाँ हर ब्लॉक का अपनी पंक्ति और स्तंभ शीर्षकों से सार्थक संबंध है, इसलिए इस काम के लिए तालिका उपयुक्त है। HTML मानक: table तत्व।

तालिका में कहीं भी मौजूद सबसे छोटे स्तंभों के नाम तय करके शुरुआत करें। इस उदाहरण में वे स्तंभ हैं: Slot, Node A, Node B, Node C और Note। शीर्षक Nodes इनमें से तीन स्तंभों में फैलेगा; इससे कोई अतिरिक्त स्तंभ नहीं बनेगा।

दोनों span एट्रिब्यूट सेल के पूरे विस्तार की गिनती करते हैं, जिसमें उसका शुरुआती स्थान भी शामिल है। इसलिए, colspan="2" दो स्तंभों को कवर करता है, जबकि rowspan="2" दो पंक्तियों को कवर करता है। दोनों का उपयोग करने पर दो-बाई-दो का आयत बनता है। span छोड़ देने पर उसका डिफ़ॉल्ट मान एक होता है। MDN: Table Data Cell तत्व।

“आपस में जुड़ने” का मतलब है कि ये आयत एक-दूसरे के साथ कैसे फिट होते हैं। हर अलग सेल का विस्तार फिर भी आयताकार होता है; कोई एक सेल दूसरे सेल के चारों ओर मुड़ नहीं सकता। इसे चौखानेदार कागज़ पर लेबल लगे आयत फिट करने जैसा समझें।

हर पंक्ति के लिए स्लॉट लेजर बनाएँ

एक विस्तृत योजना तालिका का उपयोग करें, जिसमें दोहराए गए लेबल किसी एक मर्ज किए गए सेल का विस्तार दिखाते हैं। इस लेजर में दोहराव का अर्थ यह नहीं है कि उस सेल को HTML में दोहराया जाए। शीर्षक अनुभाग में दो पंक्तियाँ होंगी; मुख्य भाग में चार।

नियोजित पंक्ति स्तंभ 1 स्तंभ 2 स्तंभ 3 स्तंभ 4 स्तंभ 5
शीर्षक 1 Slot Nodes Nodes Nodes Note
शीर्षक 2 Slot Node A Node B Node C Note
मुख्य भाग 1 Slot 1 Block P Block P Block Q Note X
मुख्य भाग 2 Slot 2 Block P Block P Block R Note X
मुख्य भाग 3 Slot 3 Block S Block T Block T Note X
मुख्य भाग 4 Slot 4 Block U Block U Block U Note Y

अब हर मर्ज किए गए आयत का शुरुआती स्थान और आयाम दर्ज करें। यहाँ निर्देशांक एक से शुरू होते हैं और हर अनुभाग में फिर से शुरू होते हैं।

सेल यहाँ से शुरू होता है कवर की गई पंक्तियाँ कवर किए गए स्तंभ
Slot शीर्षक शीर्षक पंक्ति 1, स्तंभ 1 2 1
Nodes शीर्षक शीर्षक पंक्ति 1, स्तंभ 2 1 3
Note शीर्षक शीर्षक पंक्ति 1, स्तंभ 5 2 1
Block P मुख्य भाग पंक्ति 1, स्तंभ 2 2 2
Note X मुख्य भाग पंक्ति 1, स्तंभ 5 3 1
Block T मुख्य भाग पंक्ति 3, स्तंभ 3 1 2
Block U मुख्य भाग पंक्ति 4, स्तंभ 2 1 3

इस लेजर से मुख्य भाग की दूसरी पंक्ति आसान हो जाती है: Block P पहले ही स्तंभ 2 और 3 घेरता है, और Note X पहले ही स्तंभ 5 में है। वहाँ केवल Slot 2 और Block R शुरू होते हैं, इसलिए उस पंक्ति में सिर्फ़ दो सेल तत्व चाहिए।

हर पंक्ति के लिए यह प्रक्रिया अपनाएँ:

  1. पिछली पंक्तियों में शुरू हुए स्पैन से घिरे स्थान चिह्नित करें।
  2. पहला खाली स्तंभ ढूँढ़ें।
  3. अगला सेल रखें और उसका पूरा आयत चिह्नित करें, जिसमें आगे की पंक्तियाँ भी शामिल हों।
  4. यदि आयत का कोई हिस्सा पहले से घिरे स्थान से ओवरलैप करता है, तो उसे अस्वीकार करें।
  5. तब तक जारी रखें, जब तक पाँचों स्तंभों के स्थानों का हिसाब न हो जाए।

यह प्रक्रिया मानक के तालिका मॉडल से निकला एक योजना-सहायक उपाय है। सेल रखते समय ब्राउज़र पहले से घिरे शुरुआती स्थानों को छोड़कर आगे बढ़ते हैं, लेकिन लेखकों को फिर भी आयतों के ओवरलैप से बचना चाहिए। इसलिए किसी पंक्ति में सेल तत्वों की संख्या गिनना पर्याप्त नहीं है। HTML मानक: प्रोसेसिंग मॉडल।

पंक्ति की जाँच का एक उपयोगी नियम है: पहले से व्याप्त स्तंभ + नए शुरू होने वाले सेल से कवर किए गए स्तंभ = पाँच। मुख्य भाग की पंक्ति 2 में पहले से व्याप्त तीन स्थान और दो नए स्थान हैं। पंक्ति 3 में पहले से व्याप्त एक स्थान और चार नए स्थान हैं। उनके वास्तविक स्थान भी जाँचें: केवल कुल संख्या मेल खाने से ओवरलैप और खाली जगह का पता नहीं चलता।

पंक्ति समूह और शीर्षक संबंधों की योजना बनाएँ

दोनों शीर्षक पंक्तियाँ एक ही thead के अंदर रखें और मुख्य भाग की चारों पंक्तियाँ एक ही tbody के अंदर रखें। कोई सेल अलग-अलग पंक्ति समूहों में नहीं फैल सकता। उदाहरण के लिए, Block P एक tbody में शुरू होकर दूसरे में समाप्त नहीं हो सकता। मानक तालिका के चाइल्ड तत्वों का क्रम भी निर्धारित करता है: वैकल्पिक caption, स्तंभ समूह, वैकल्पिक thead, मुख्य भाग की पंक्तियाँ और वैकल्पिक tfoot। HTML मानक: Tables।

इस उदाहरण में तीन स्तंभ समूह हैं: Slot के लिए एक स्तंभ, Nodes के लिए तीन और Note के लिए एक। Nodes शीर्षक scope="colgroup" का उपयोग करता है; उसके अधीन शीर्षक scope="col" का उपयोग करते हैं। W3C के अनियमित शीर्षकों संबंधी मार्गदर्शन में समूहबद्ध शीर्षकों के साथ स्पष्ट स्तंभ-समूह संरचना का उपयोग किया गया है। अनियमित शीर्षकों वाली तालिकाएँ।

ज्यामिति और अर्थ के लिए अलग-अलग निर्णय लेने पड़ते हैं। Block P दो स्लॉट पंक्तियों और दो नोड स्तंभों को कवर करता है, इसलिए उसके अपेक्षित शीर्षक Slot 1, Slot 2, Nodes, Node A और Node B हैं। Note X तीन स्लॉट पंक्तियों और Note स्तंभ से संबंधित है।

इन मर्ज किए गए डेटा सेल के लिए, उदाहरण शीर्षक सेल पर id मान और प्रत्येक डेटा सेल के headers एट्रिब्यूट में स्पेस से अलग किए गए संदर्भ देकर संबंध स्पष्ट करता है। W3C इस तरीके को उन जटिल तालिकाओं के लिए दस्तावेज़ित करता है, जिनके शीर्षक संबंधों की स्पष्ट पहचान आवश्यक होती है। बहु-स्तरीय शीर्षकों वाली तालिकाएँ।

केवल इसलिए स्वतंत्र मानों को मर्ज न करें कि उनका पाठ एक जैसा है। इस काल्पनिक दस्तावेज़ में Block P जानबूझकर एक ऐसे ब्लॉक को दर्शाता है जो चार स्थानों में फैला है। यदि हर स्थान में अलग-अलग अवलोकन हो, तो अलग सेल बनाए रखें, ताकि तालिका यह भेद सुरक्षित रखे।

अपने Mac पर पूरी HTML फ़ाइल बनाएँ

TextEdit से स्थानीय HTML दस्तावेज़ बनाया जा सकता है। File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया पूरा दस्तावेज़ पेस्ट करें, File > Save चुनें और उसे span-plan.html नाम दें। एक्सटेंशन के बारे में पूछा जाए, तो Use .html चुनें। HTML बनाने के ये चरण Apple के दस्तावेज़ित निर्देशों में दिए गए हैं। Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करें।

यह एक पूरा, स्वतंत्र दस्तावेज़ है, जिसमें नमूना सामग्री और स्टाइलिंग शामिल हैं। इसे स्क्रिप्ट या बाहरी संसाधनों की ज़रूरत नहीं है।

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

अपने Mac पर सहेजी गई फ़ाइल को ब्राउज़र में खोलें। इसकी लेजर से तुलना करें: Block P को Nodes A और B के नीचे Slot 1 और 2 तक फैलना चाहिए; Note X को Slot 1–3 तक फैलना चाहिए; Block T को केवल Slot 3 में Nodes B और C को कवर करना चाहिए। ये तीन जाँचें अपेक्षित आपस में जुड़ने वाले पैटर्न को उस तालिका से अलग पहचानती हैं जिसका केवल बाहरी आकार आयताकार है।

यदि TextEdit में फ़ाइल दोबारा खोलने पर फ़ॉर्मैट की गई सामग्री दिखाई दे, तो File > Open चुनें, फ़ाइल चुनें, Show Options पर क्लिक करें और Ignore rich text commands चुनें। आगे संपादन के लिए Apple TextEdit > Settings > Open and Save का भी दस्तावेज़ीकरण करता है, जहाँ आप Display HTML files as HTML code instead of formatted text चालू कर सकते हैं। Apple की TextEdit HTML मार्गदर्शिका।

त्रुटियों का पता लगाएँ और संरचना खोए बिना योजना अपडेट करें

जब परिणाम आपकी योजना से अलग हो, तो पहली गलत पंक्ति और उसमें आगे चली आ रही आयतों की जाँच करें। स्पेसिंग या स्टाइलिंग बदलने से पहले नीचे दी गई जाँचें करें।

लक्षण क्या जाँचें इस उदाहरण के लिए सुधार
अप्रत्याशित अतिरिक्त स्तंभ ऐसे सेल जो पहले के स्पैन से पहले ही घिरी जगहों पर जोड़े गए हों मुख्य भाग की पंक्ति 2 में केवल Slot 2 और Block R हैं; वहाँ से कोई भी भराव सेल हटाएँ
Block R गलत नोड के नीचे दिखाई देता है Block P की चौड़ाई और ऊँचाई पक्का करें कि Block P में rowspan="2" और colspan="2" दोनों हैं
Note X, Slot 2 के बाद समाप्त हो जाता है उसकी पंक्ति संख्या उसका स्पैन तीन पंक्तियों का रखें
शीर्षक स्तर संरेखित नहीं हैं पहली शीर्षक पंक्ति और दूसरी पंक्ति में सेल की संख्या Slot और Note दो पंक्तियों में फैले हैं; दूसरी शीर्षक पंक्ति में केवल तीन नोड शीर्षक हैं
किसी मर्ज किए गए सेल के शीर्षक अधूरे हैं उसके headers संदर्भ लेजर में कवर की गई हर पंक्ति और स्तंभ से तुलना करें

जब कोई स्थान वास्तव में खाली मान दर्शाता हो, तो खाली सेल उचित है। जिस स्थान पर पहले से फैला हुआ सेल मौजूद हो, वहाँ इसकी ज़रूरत नहीं है। MDN का सेल संबंधी दस्तावेज़ बताता है कि सामान्य सेल उपलब्ध स्थानों में फिट होते हैं और स्पैन ओवरलैप नहीं होने चाहिए। MDN: Table Data Cell तत्व।

इस निश्चित उदाहरण के लिए, पंक्तियों की स्पष्ट धनात्मक संख्या का उपयोग करें। विशेष मान rowspan="0" का अर्थ है मौजूदा पंक्ति समूह की बाकी पंक्तियाँ, इसलिए पंक्ति जोड़ने से उस सेल का विस्तार बढ़ सकता है। इस मान का उपयोग तभी करें जब “इस समूह के अंत तक” अपेक्षित संबंध को व्यक्त करता हो। MDN: Row span का व्यवहार।

किसी पंक्ति को जोड़ने, हटाने या उसका क्रम बदलने से पहले लेजर अपडेट करें। यदि Slot 1 और 2 के बीच नई पंक्ति जोड़ी जाए और Block P में उसे शामिल करना हो, तो Block P का स्पैन बढ़ाएँ और उसके headers सूची में पंक्ति का नया शीर्षक जोड़ें। Note X पर अलग से विचार करें: उसी बदलाव से उसका अपेक्षित विस्तार भी बदल सकता है। पंक्तियों का क्रम बदलने पर भी ऐसी ही जाँच आवश्यक है, क्योंकि स्पैन दस्तावेज़ में मौजूद स्थान के अनुसार चलता है।

यदि सामग्री अब समझने योग्य आयत नहीं बनाती, तो उसका प्रस्तुतीकरण सरल करें। W3C सुझाव देता है कि जब कई शीर्षक स्तरों के कारण एक तालिका समझना कठिन हो जाए, तो उसे छोटी तालिकाओं में बाँटने पर विचार करें। बहु-स्तरीय शीर्षकों वाली तालिकाएँ।

दस्तावेज़ में बदलाव करते समय स्लॉट लेजर को स्रोत के पास रखें। हर बदलाव के लिए अपेक्षित आयत तय करें, सेल केवल उनके शुरुआती स्थान पर लिखें और उनसे जुड़े शीर्षक जाँचें। इससे तालिका का आकार और उसकी सामग्री से व्यक्त संबंध, दोनों बनाए रखने का दोहराने योग्य तरीका मिलता है।

स्रोत