तालिकाएँ

docs.scrimba.com

कुछ जानकारी एक ग्रिड है। एक ट्रेन टाइमटेबल, एक मूल्य निर्धारण योजना, एक लीग टेबल, पोषण तथ्यों का एक समूह: प्रत्येक में पंक्तियाँ और स्तंभ होते हैं, और अर्थ इस बात में रहता है कि वे कैसे संरेखित होते हैं। HTML के पास बिल्कुल इस तरह की सामग्री के लिए समर्पित तत्वों का एक समूह है, और उन्हें उपयोग करने से ग्रिड स्क्रीन पर और सॉफ्टवेयर के लिए पठनीय रहता है जो पृष्ठ को ज़ोर से पढ़ता है।

तालिका की मूल बातें

एक तालिका पंक्तियों और स्तंभों की एक ग्रिड है, स्प्रेडशीट के समान आकार। आप इसे चार तत्वों से बनाते हैं। <table> पूरी ग्रिड को लपेटता है। प्रत्येक <tr> एक पंक्ति है (tr, table row का संक्षिप्त रूप है)। एक पंक्ति के अंदर, प्रत्येक <td> डेटा का एक सेल है (td, table data है)। जब कोई सेल अपने स्तंभ या पंक्ति को लेबल करता है, तो आप इसके बजाय <th> का उपयोग करते हैं (th, table header है), और ब्राउज़र इसे बोल्ड और केंद्रित दिखाता है ताकि यह डेटा से अलग हो जाए।

आप एक तालिका को पंक्ति दर पंक्ति बनाते हैं, कभी स्तंभ दर स्तंभ नहीं। <table> कंटेनर है, प्रत्येक <tr> एक पंक्ति है, और सेल पंक्ति के अंदर उस क्रम में बैठते हैं जिस क्रम में वे पृष्ठ भर में दिखाई देते हैं। एक डेटा सेल <td> है; एक हेडर सेल <th> है। कोई स्तंभ तत्व नहीं है। स्तंभ प्रत्येक पंक्ति के अपने सेल को एक ही क्रम में रखने का एक उभरता हुआ प्रभाव है, इसलिए यदि एक पंक्ति गलत हो जाती है तो ग्रिड संरेखित नहीं रहता।

<th> और <td> के बीच का अंतर केवल सौंदर्य संबंधी नहीं है। <th> एक सेल को उस पंक्ति या स्तंभ के लिए एक शीर्षक के रूप में चिह्नित करता है जिसमें यह बैठा है। ब्राउज़र की डिफ़ॉल्ट स्टाइलिंग, बोल्ड और केंद्रित, केवल उस अर्थ का दृश्यमान आधा है। दूसरा आधा वह अर्थ है जो अन्य सॉफ्टवेयर पढ़ सकता है।

एक तालिका का स्रोत पंक्ति-प्रमुख है: आप इसे एक बार में एक पंक्ति लिखते हैं, और प्रत्येक सेल का स्तंभ पूरी तरह से पंक्ति के भीतर इसकी स्थिति द्वारा तय किया जाता है। ब्राउज़र उस पंक्ति-दर-पंक्ति स्रोत को पढ़ता है और इससे एक द्वि-आयामी ग्रिड बनाता है, पार गिनती करके सेल को स्तंभों में मिलाता है। चिह्नकरण में कुछ भी स्तंभ का नाम नहीं देता है, इसलिए ग्रिड केवल तब तक संरेखित है जब तक आपकी पंक्तियाँ सुसंगत हों।

<th> बनाम <td> एक शब्दार्थ अंतर है, स्टाइलिंग वाला नहीं। <th> (एक हेडर सेल) ब्राउज़र को, और किसी भी सहायक प्रौद्योगिकी को पृष्ठ को पढ़ने में (सॉफ्टवेयर जैसे स्क्रीन रीडर, जो उन लोगों के लिए पृष्ठ को ज़ोर से बोलता है जो इसे नहीं देख सकते), बताता है कि यह सेल इसके चारों ओर डेटा के लिए एक लेबल है। डिफ़ॉल्ट बोल्ड-और-केंद्रित दिखना आकस्मिक है: इसे CSS से हटा दें और हेडर अभी भी "शीर्षक" का मतलब रखता है, क्योंकि अर्थ तत्व में रहता है, इसके दिखावट में नहीं। यही पूरा कारण है कि किसी अन्य तरीके से ग्रिड खींचने के बजाय वास्तविक तालिका के लिए जाना है।

<table>
  <tr>
    <th>दिन</th>
    <th>खुलने का समय</th>
  </tr>
  <tr>
    <td>सोमवार</td>
    <td>8:00 से 18:00 तक</td>
  </tr>
  <tr>
    <td>शनिवार</td>
    <td>9:00 से 14:00 तक</td>
  </tr>
</table>

शीर्ष पर दो हेडर सेल, फिर दो डेटा पंक्तियाँ। ब्राउज़र ग्रिड खींचता है, अपनी सामग्री के अनुसार प्रत्येक स्तंभ का आकार देता है, और दोनों <th> सेल को बोल्ड में प्रदर्शित करता है।

Junoतालिका की मूल बातें चार तत्व एक ग्रिड बनाते हैं: पूरी चीज़ के चारों ओर <table>, प्रत्येक पंक्ति के लिए <tr>, एक सेल के लिए <td>, और एक हेडर सेल के लिए <th>। हेडर सेल बोल्ड और केंद्रित आते हैं ताकि वे डेटा से अलग हो जाएँ। इसे एक बार में एक पंक्ति बनाएँ और स्तंभ स्वयं को संरेखित कर लेते हैं।

Junoतालिका की मूल बातें आप <tr> के साथ पंक्ति दर पंक्ति एक तालिका बनाते हैं, और प्रत्येक पंक्ति अपने सेल को एक ही क्रम में रखने से स्तंभ बाहर निकलते हैं। शीर्षकों के लिए <th>, डेटा के लिए <td>, और वह विकल्प अर्थ है, केवल बोल्ड दिखावट नहीं। एक पंक्ति में सेल को गलत गिनें और पूरी ग्रिड तिरछी हो जाती है।

Junoतालिका की मूल बातें चिह्नकरण पंक्ति-प्रमुख है, इसलिए एक स्तंभ केवल इसलिए मौजूद है क्योंकि प्रत्येक पंक्ति अपने सेल को कदम में रखती है। सावधानी से गिनें। <th> इस बात से अपनी जगह हासिल करता है कि यह एक स्क्रीन रीडर को बताता है कि सेल एक लेबल है, जो कि CSS बोल्डिंग कोई भी नहीं कर सकता। वह शब्दार्थ विभाजन ही कारण है कि सभी में एक वास्तविक तालिका का उपयोग करना है।

एक तालिका की संरचना

आपकी पंक्तियों का क्रम वह क्रम है जिसमें लोग उन्हें पढ़ते हैं, इसलिए शीर्षक पंक्ति रखें, जिसे <th> सेल से बनाया गया है, शीर्ष पर। फिर प्रत्येक पंक्ति को एक ही लंबाई रखें: यदि शीर्षक पंक्ति में तीन सेल हैं, तो नीचे की प्रत्येक <tr> को तीन <td> सेल की भी आवश्यकता है। एक सेल के बिना एक पंक्ति ग्रिड में एक अंतराल छोड़ती है और स्तंभ संरेखण बंद हो जाता है। यहाँ सीखने के लिए कुछ नया नहीं है, केवल उन पंक्तियों में देखभाल है जिन्हें आप पहले से ही जानते हैं।

एक बार तालिका बढ़ने के बाद, इसकी पंक्तियों को पंक्ति समूहों में समूहीकृत करें ताकि संरचना स्पष्ट हो। शीर्षक पंक्ति को <thead> में लपेटें, डेटा पंक्तियों को <tbody> में, और कोई सारांश पंक्ति जैसे कि कुल लाइन <tfoot> में। ये समूह अपने आप से बहुत कुछ लेआउट नहीं बदलते हैं, लेकिन वे स्टाइलिंग, मुद्रण और सहायक सॉफ्टवेयर के लिए तालिका के भाग को लेबल करते हैं।

<caption> के साथ तालिका को एक शीर्षक दें, जिसे <table> का पहला बच्चा के रूप में रखा गया हो। यह ग्रिड के ऊपर प्रदर्शित होता है और, एक शीर्षक के विपरीत जिसे आप तालिका के बगल में रखते हैं, यह चिह्नकरण में तालिका से जुड़ा होता है।

जब किसी सेल को एक से अधिक स्तंभ या पंक्ति को कवर करने की आवश्यकता होती है, तो colspan या rowspan का उपयोग करें। colspan="2" एक सेल को दो स्तंभ जितना चौड़ा बनाता है; rowspan="2" इसे दो पंक्तियों जितना लंबा बनाता है। यह जो स्थानें कवर करता है वे फिर उन पंक्तियों से छोड़ी जाती हैं, क्योंकि वह स्थान पहले से ही ली गई है:

<thead>
  <tr>
    <th rowspan="2">क्षेत्र</th>
    <th colspan="2">2024</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
</thead>

"क्षेत्र" दो हेडर पंक्तियों को भरता है, "2024" दो स्तंभों को भरता है, और Q1 और Q2 दूसरी पंक्ति में इसके नीचे बैठते हैं।

पंक्ति समूह सजावट नहीं हैं। <thead> और <tfoot> को लंबी तालिका को मुद्रित करते समय हर पृष्ठ पर दोहराने के लिए परिभाषित किया गया है, इसलिए एक शीर्षक पृष्ठ विराम में दृश्यमान रहता है, और वे आपको एक निश्चित शीर्षक या पाद रखने देते हैं जबकि <tbody> स्क्रॉल करता है। एक तालिका कई <tbody> समूह रख सकती है, जो एक लंबे डेटासेट को लेबल किए गए अनुभागों में विभाजित करने का एक स्वच्छ तरीका है बिना एकल ग्रिड को तोड़े।

colspan और rowspan नियंत्रण सेल स्पैनिंग (एक सेल एक से अधिक स्तंभ या पंक्ति को कवर करना), और यह वह जगह है जहाँ तालिकाएँ सबसे अक्सर चुप रहकर टूट जाती हैं। हर पंक्ति को अभी भी ग्रिड की पूरी चौड़ाई के लिए खाता होना चाहिए। colspan="2" वाला एक सेल दो स्तंभ भरता है, इसलिए उन पंक्तियों को जो इसे ओवरलैप करती हैं, अपने स्वयं के सेल की आपूर्ति करने के बजाय उन स्थानों को खाली छोड़ना चाहिए। गलत गिनें, और ब्राउज़र अभी भी कुछ प्रदर्शित करेगा, लेकिन उस ग्रिड को नहीं जिसका आप मतलब था। <caption> तालिका के लिए सुलभ नाम है: सहायक सॉफ्टवेयर (उपकरण जैसे स्क्रीन रीडर जो पृष्ठ को ज़ोर से पढ़ते हैं) इसे घोषित करते हैं जब पाठक तालिका तक पहुँचता है, जिससे निकटवर्ती शीर्षक का काम किया जाता है।

<table>
  <caption>क्षेत्र द्वारा त्रैमासिक राजस्व</caption>
  <thead>
    <tr>
      <th>क्षेत्र</th>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>उत्तर</th>
      <td>£12,000</td>
      <td>£15,400</td>
    </tr>
    <tr>
      <th>दक्षिण</th>
      <td>£9,800</td>
      <td>£11,200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>कुल</th>
      <td>£21,800</td>
      <td>£26,600</td>
    </tr>
  </tfoot>
</table>

Junoएक तालिका की संरचना पंक्तियाँ ऊपर से नीचे तक पढ़ी जाती हैं, इसलिए <th> सेल की अपनी शीर्षक पंक्ति से शुरुआत करें। फिर प्रत्येक पंक्ति को एक ही लंबाई रखें: शीर्ष पर तीन शीर्षक का अर्थ है प्रत्येक पंक्ति में नीचे तीन <td> सेल। एक लापता सेल ग्रिड में एक अंतराल है, और यह वह चीज़ है जो शुरुआत में लोगों को ट्रिप करती है।

Junoएक तालिका की संरचना एक बार बढ़ने पर भागों को समूहीकृत करें: शीर्षक पंक्ति के लिए <thead>, डेटा के लिए <tbody>, कुल लाइन के लिए <tfoot>, और शीर्षक के लिए पहले बच्चे के रूप में <caption>। colspan और rowspan एक सेल को स्तंभों या पंक्तियों में फैलाते हैं, लेकिन याद रखें कि कवर की गई स्थानें उन पंक्तियों से बाहर निकल जाती हैं। गिनती सही करें और ग्रिड रहता है।

Junoएक तालिका की संरचना समूह वास्तविक वजन खींचते हैं: <thead> और <tfoot> जब तालिका प्रिंट होती है तो दोहराई जाती है और एक स्क्रॉलिंग बॉडी को ऐंकर कर सकती है, और <caption> वह नाम है जो स्क्रीन रीडर पढ़ता है। स्पैनिंग शांत जाल है, चूंकि हर पंक्ति को अभी भी पूरी ग्रिड चौड़ाई भरनी होगी, इसलिए एक कवर की गई स्थिति को कोई सेल नहीं मिलता। ब्राउज़र एक गिनती को खुशी से प्रदर्शित करता है, जो ठीक यही कारण है कि इसे स्पॉट करना मुश्किल है।

सुलभ तालिकाएँ

एक सुलभ तालिका वह है जो सभी को समझ में आती है, जिनमें वे लोग भी शामिल हैं जो स्क्रीन रीडर (सॉफ्टवेयर जो पृष्ठ को ज़ोर से पढ़ता है) के साथ पृष्ठ को सुनते हैं। सबसे उपयोगी चीज़ जो आप कर सकते हैं वह पहले से ही आपके टूलकिट में है: हर हेडर सेल के लिए <th> का उपयोग करें, <td> नहीं। एक स्क्रीन रीडर तब अपने श्रोता को बता सकता है कि कौन से सेल लेबल हैं और कौन से डेटा हैं, इसलिए "£15" जैसा मान उस स्तंभ के साथ घोषित किया जाता है जिससे यह संबंधित है। एक तालिका जहाँ हर सेल एक सादा <td> है, संख्याओं की एक समतल दीवार के रूप में पढ़ता है जिसमें उन्हें ऐंकर करने के लिए कुछ नहीं है।

<th> एक सेल को हेडर के रूप में चिह्नित करता है, लेकिन एक तालिका में जिसमें स्तंभ शीर्षक और पंक्ति शीर्षक दोनों होते हैं, यह नहीं कहता कि कौन सा है। स्कोप विशेषता इसे स्पष्ट करती है। scope="col" कहता है कि एक हेडर अपने पूरे स्तंभ को लेबल करता है; scope="row" कहता है कि यह अपनी पूरी पंक्ति को लेबल करता है। हर <th> में इसे जोड़ें और एक स्क्रीन रीडर किसी भी डेटा सेल को सही स्तंभ शीर्षक और पंक्ति शीर्षक के साथ एक बार में जोड़ सकता है।

<th scope="col">महीना</th>
<th scope="row">वर्षा</th>

एक सरल ग्रिड के लिए ब्राउज़र अक्सर इन सहयोगों का अनुमान लगा सकता है, लेकिन scope के साथ उन्हें बताना अनुमान को हटा देता है और जोड़ने में सस्ता है।

scope एक स्तर की पंक्ति और स्तंभ शीर्षकों वाली तालिकाओं को कवर करता है। जटिल तालिकाएँ, वे जिनमें एक शीर्षक है जो कई स्तंभों में फैला है या स्तंभ शीर्षकों के दो स्तर हैं, scope के साथ भी अस्पष्ट रहते हैं, क्योंकि एक डेटा सेल के पास अब बिल्कुल एक स्तंभ शीर्षक और एक पंक्ति शीर्षक नहीं है। उन लोगों के लिए, id और headers के साथ सेल को स्पष्ट रूप से जोड़ें। हर हेडर सेल को एक id दें (उस तत्व के लिए एक अद्वितीय नाम), फिर प्रत्येक डेटा सेल के headers विशेषता में प्रासंगिक ids की सूची बनाएँ:

<th id="q1">Q1</th>
<th id="north">उत्तर</th>
<td headers="north q1">£12,000</td>

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

एक्सेसिबिलिटी अकेली तालिकाओं की तुलना में व्यापक होती है; एक्सेसिबिलिटी अध्याय बाकी तस्वीर को कवर करता है।

Junoसुलभ तालिकाएँ सबसे बड़ी जीत कोई अतिरिक्त खर्च नहीं करती है: शीर्षकों के लिए <th> और डेटा के लिए <td> का उपयोग करें। एक स्क्रीन रीडर उस विभाजन पर झुकता है हर मान को उस शीर्षक के साथ पढ़ने के लिए जिससे वह संबंधित है, इसलिए £15 अपने स्तंभ के साथ आता है बजाय अपने पर। इसे छोड़ें और पूरी तालिका ढीली संख्याओं की एक दीवार के रूप में उतरती है।

Junoसुलभ तालिकाएँ अपने हेडर सेल पर scope डालें: स्तंभ शीर्षक के लिए scope="col", पंक्ति शीर्षक के लिए scope="row"। जिससे एक स्क्रीन रीडर प्रत्येक डेटा सेल को दोनों अक्षों पर सही शीर्षक से जोड़ सकता है। ब्राउज़र सरल ग्रिड के लिए अनुमान लगा सकता है, लेकिन इसे बताना सस्ता है और अनुमान को हटा देता है।

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

तालिकाएँ डेटा के लिए हैं, लेआउट के लिए नहीं

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

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

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

जब आप लेआउट के लिए एक तालिका का उपयोग करते हैं, तो आप सहायक सॉफ्टवेयर को (उपकरण जैसे स्क्रीन रीडर जो पृष्ठ बोलते हैं) एक डेटा संरचना देते हैं जो डेटा नहीं है। एक स्क्रीन रीडर एक तालिका की घोषणा इसके आयामों द्वारा करता है और उपयोगकर्ता को सेल दर सेल जाने देता है, लेआउट स्कैफोल्डिंग को इस तरह मानते हुए जैसे कि हर क्षेत्र एक ग्रिड में एक संबंधित मान था। परिणाम "तालिका, चार स्तंभ, दस पंक्तियाँ" जैसी घोषणाएँ हैं जो वास्तव में एक शीर्षक, एक साइडबार और एक लेख है।

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

एक ग्रे क्षेत्र HTML ईमेल है, जहाँ पुराने मेल क्लाइंट अभी भी विश्वसनीय CSS लेआउट की कमी करते हैं और तालिका-आधारित संरचना आम रहती है। यह उस माध्यम की एक बाध्यता है, वेब पर वापस लाने के लिए एक पैटर्न नहीं।

<!-- गलत: एक तालिका का उपयोग एक साइडबार को एक लेख के बगल में रखने के लिए -->
<table>
  <tr>
    <td><nav>...</nav></td>
    <td><article>...</article></td>
  </tr>
</table>

<!-- सही: वास्तविक तत्व, CSS स्तंभों को संभालने के साथ -->
<nav>...</nav>
<article>...</article>

यह क्या है HTML में निर्धारित संरचना और प्रस्तुति का एक ही अलगाव है: HTML में संरचना, CSS में लेआउट। तत्वों को उनके अर्थ से चुनने के लिए, शब्दार्थ HTML देखें।

Junoतालिकाएँ डेटा के लिए हैं, लेआउट के लिए नहीं एक तालिका डेटा के लिए है जो एक ग्रिड में है, संबंधित मानों की पंक्तियाँ और स्तंभ। यह एक पृष्ठ को व्यवस्थित करने के लिए नहीं है, भले ही पुरानी साइट ने इसके लिए इसका उपयोग किया हो। पृष्ठ के भागों को स्थिति देना CSS का काम है, और इसे एक तालिका में मोड़ना पृष्ठ को जोर से पढ़ने के लिए कठिन और बदलने के लिए कठिन बनाता है।

Junoतालिकाएँ डेटा के लिए हैं, लेआउट के लिए नहीं<table> का उपयोग केवल तभी करें जब सामग्री वास्तव में डेटा की एक ग्रिड हो: एक अनुसूची, एक तुलना, एक परिणाम सूची। पृष्ठ को लेआउट करने या गैर-डेटा को संरेखित करने के लिए, CSS ग्रिड या फ्लेक्सबॉक्स के लिए जाएँ, जो स्क्रीन के अनुकूल होते हैं और आपके HTML को सामग्री के बारे में रखते हैं। एक लेआउट में दबाई गई तालिका क्लासिक गलत उपकरण है।

Junoतालिकाएँ डेटा के लिए हैं, लेआउट के लिए नहीं एक लेआउट तालिका एक स्क्रीन रीडर को गुमराह करती है: यह एक डेटा ग्रिड सुनता है और पंक्तियों और स्तंभों को पढ़ता है जिनका कोई मतलब नहीं है। यह आपके स्रोत क्रम को दृश्य ग्रिड में भी पिन करता है, जबकि स्रोत क्रम वह है जो सहायक तकनीक और खोज इंजन वास्तव में पढ़ते हैं। तालिकाओं को डेटा के लिए रखें, CSS चीज़ें रखने दें, और पढ़ने का क्रम आपके नियंत्रण में रहता है। HTML ईमेल अकेली अपवाद है, और केवल इसलिए क्योंकि इसके क्लाइंट अतीत में फंसे हुए हैं।