HTML Academy · पाठ

तालिका-आधारित लेआउट दृष्टिकोण

समझें कि HTML ईमेल div के बजाय तालिकाओं का उपयोग क्यों करते हैं

पाठ 1, कुल 4 में से13 चरण

तालिका-आधारित लेआउट दृष्टिकोण, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

ईमेल के लिए टेबल क्यों?

ईमेल क्लाइंट — खासकर Windows पर Outlook, जो Microsoft Word के rendering engine का उपयोग करता है — flexbox, grid या विश्वसनीय block-level layout तक का समर्थन नहीं करते। हर प्रमुख mail client में एकसमान rendering के लिए टेबल ही एकमात्र संरचनात्मक primitive हैं।

एक बाहरी टेबल

हर responsive ईमेल की शुरुआत 100% चौड़ाई वाली बाहरी <table> से होती है, जो ईमेल के body की तरह काम करती है। इसके बाद निश्चित चौड़ाई वाली आंतरिक टेबल (आमतौर पर 600px) होती है, जिसमें वास्तविक सामग्री रहती है। यह दो-स्तरीय pattern लगभग हर production template की नींव है।

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Content goes here</td></tr>
      </table>
    </td>
  </tr>
</table>

अनिवार्य टेबल विशेषताएँ

हर टेबल में हमेशा cellpadding="0" cellspacing="0" border="0" शामिल करें। इनके बिना Outlook अनपेक्षित खाली स्थान जोड़ देता है। role="presentation" जोड़ने से screen readers को टेबल की semantics छोड़ने का निर्देश मिलता है, जो सही है क्योंकि layout tables data tables नहीं होतीं।

कॉलम के लिए nested tables

कई कॉलम बनाने के लिए content row के अंदर दो <td> cells वाली टेबल nest करें। हर cell में एक कॉलम रखें। div+float से बचें — Outlook float को अनदेखा करता है और कॉलम को फिर भी लंबवत रूप से stack कर देता है, जिससे design बिगड़ जाता है।

600px मानक चौड़ाई है

डेस्कटॉप का de facto preview pane लगभग 600px चौड़ा होता है। इस चौड़ाई के लिए design करने पर Outlook, Gmail desktop, Apple Mail, Yahoo और Thunderbird में एक साथ ईमेल क्षैतिज स्क्रॉल के बिना आराम से दिखाई देता है।

Media Queries से मोबाइल stacking

छोटी स्क्रीन के लिए inner table cells को ऐसी media query से target करें जो width को 100% और display को block सेट करे; इससे कॉलम लंबवत रूप से stack हो जाते हैं। iOS Mail और Gmail Android media queries का पालन करते हैं; Outlook 365 desktop उन्हें अनदेखा करता है, लेकिन 600px वाला desktop layout बनाए रखता है।

@media (max-width: 600px) {
  .col {
    display: block !important;
    width: 100% !important;
  }
}

Cell-Level Backgrounds

Background colors और images को divs पर नहीं, बल्कि <td> cells पर लागू करना चाहिए। Outlook td पर bgcolor attribute का विश्वसनीय समर्थन करता है, जबकि div पर CSS background-color क्लाइंट के अनुसार हटाया जा सकता है या पूरी तरह अनदेखा किया जा सकता है।

Outlook के background के लिए VML

Outlook को background images के लिए Vector Markup Language (VML) की आवश्यकता होती है। आधुनिक CSS background-image को conditional  comments में inline v:rect fallback के साथ wrap करें, ताकि Outlook छवि दिखाए और बाकी सभी क्लाइंट CSS का उपयोग करें।

आधुनिक CSS से बचें

flexbox, grid, custom properties (सीमित समर्थन) और अधिकांश positioning का उपयोग न करें। display: block/inline, attributes के माध्यम से निश्चित widths और inline styles तक सीमित रहें। वेब मानकों के अनुसार output पुराना दिख सकता है, लेकिन हर inbox में एकसमान rendering होगी।

आंतरिक spacing के लिए cellpadding

आंतरिक खाली स्थान के लिए cellpadding (attribute) और padding वाली एकल <td> का उपयोग करें। Outlook में table cells पर margins विश्वसनीय नहीं होते; td पर padding हर जगह काम करती है। divs के बिना "card" components के लिए उसी td पर bgcolor और padding को मिलाएँ।

सुलभता

हर layout table में role="presentation" जोड़ें, ताकि screen readers "row, column 1 of 2" की घोषणा न करें। हर image में alt text, किसी भी content के लिए वास्तविक text (text की images नहीं) और heading का स्पष्ट hierarchical order भी शामिल करें।

ज्ञान की जाँच

ईमेल का layout बनाने के लिए CSS flexbox वाले divs के बजाय tables का उपयोग क्यों किया जाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

HTML email layout में cellpadding/cellspacing/border zero और role="presentation" वाली nested tables का उपयोग होता है। 100% वाली outer table, 600px वाली inner table को केंद्रित करती है; nested td cells कॉलम बनाते हैं जिन्हें media queries मोबाइल पर stack कर सकती हैं। flexbox/grid से बचें, td पर bgcolor का उपयोग करें और Outlook backgrounds के लिए VML fallbacks जोड़ें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “तालिका-आधारित लेआउट दृष्टिकोण” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “तालिका-आधारित लेआउट दृष्टिकोण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“तालिका-आधारित लेआउट दृष्टिकोण” में मैं क्या सीखूँगा?

समझें कि HTML ईमेल div के बजाय तालिकाओं का उपयोग क्यों करते हैं आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“तालिका-आधारित लेआउट दृष्टिकोण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

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

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ