मैं नीचे दिए गए पृष्ठ लेआउट उदाहरण को कोड करने का सबसे अच्छा तरीका जानने का प्रयास कर रहा हूं जो एक आदेशित सूची के भीतर एक पूर्ण-चौड़ाई तालिका प्रदर्शित करता है। आम तौर पर, मैं उनके बीच एक तालिका के साथ दो बुलेटेड सूचियों को धोखा दे सकता था और उनका उपयोग कर सकता था, लेकिन अब आवश्यकता एक आदेशित सूची का उपयोग करने की है और संख्या जारी है जबकि तालिका अभी भी सूची आइटम के भीतर है: 
जैसा कि आप देख सकते हैं, H1 के नीचे सब कुछ मार्जिन रिक्ति के साथ इंडेंट किया गया है, तालिका को छोड़कर, जो दूसरी और तीसरी सूची आइटम के बीच है।
मेरा मुख्य प्रश्न: चूंकि हम DIVs और तालिकाs को OL के बीच नहीं रख सकते हैं और LI टैग, उचित HTML सूची लेआउट मानकों को बनाए रखते हुए इस लेआउट को कोड करने का उचित तरीका क्या है?
मेरा गलत कोड:
<h2>Heading 2</h2>
<p></p>
<ol>
<li></li>
<li></li>
<div class="table-container">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
<li></li>
<li></li>
</ol>
शुक्रिया!
1 उत्तर
सूची के पहले भाग को बंद करें, तालिका डालें, नंबरिंग फिर से शुरू करने के लिए start="3" के साथ एक नई सूची शुरू करें:
.table-container table {
border: 1px solid;
border-collapse: collapse;
width: 100%;
}
.table-container table td {
border: 1px solid;
} <h2>Heading 2</h2>
<p>Lorem ipsum</p>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
<div class="table-container">
<table width="100%">
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</table>
</div>
<ol start="3">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>