WOO logo

विज़ार्ड अनुशंसा करता है

इस पृष्ठ पर

स्वरूपण दिशानिर्देश

परिचय

  • <table> या <h2> टैग को <p> या <div> टैग से न घेरें।

  • अब <center>...</center> टैग का इस्तेमाल न करें। किसी चीज़ को केंद्र में रखने के लिए, <div align="center">...</div> का इस्तेमाल करें।

  • अब <b>...</b> टैग का इस्तेमाल न करें। किसी चीज़ को और भी ज़्यादा बोल्ड बनाने के लिए <strong>...</strong> का इस्तेमाल करें।

  • अब <i>...</i> टैग का इस्तेमाल न करें। किसी चीज़ को इटैलिक करने के लिए, <em>...</em> का इस्तेमाल करें।

  • अन्यथा नग्न पाठ को घेरने के लिए केवल <p>...</p> टैग का उपयोग करें।

  • किसी छवि के बड़े संस्करण के लिंक के अंदर छवि जोड़ते समय, <a class="trans" ... ><img ... ></a> का उपयोग करें।

  • अनुभाग शीर्षलेख जोड़ने के लिए:

    <h2>शीर्षक नाम</h2>

  • दाईं ओर लटकी हुई छवि जोड़ने के लिए:

    <div class="image--right"><img src="..." /></div>

  • कोड नमूनों को प्रारूपित करने के लिए एक बॉक्स जोड़ने के लिए (जैसा कि इस पृष्ठ पर देखा गया है):
    <पूर्व>
	कोड नमूना यहाँ
</pre>
  • 50% चौड़ाई वाली संकीर्ण डेटा तालिका जोड़ने के लिए:
    <div class="box desk-50percent">
  <h3 class="box-title">तालिका शीर्षक</h3><!--/box-title-->
  <div class="बॉक्स-सामग्री">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">स्तंभ शीर्षक 1</th>
		<th class="data-heading">स्तंभ शीर्षक 2</th>
	</tr>
	<tr>
		<td class="left_aligned">बाएं</td>
		<td>पंक्ति 1, स्तंभ 2</td>
	</tr>
	<tr>
		<td class="right_aligned">दाएँ</td>
		<td>पंक्ति 1, स्तंभ 2</td>
	</tr>
	<tr>
		<td class="centered">केंद्र</td>
		<td>पंक्ति 3, स्तंभ 2</td>
	</tr>
	</तालिका>
  </div><!--/box-content-->
</div><!--/box-->

    उपरोक्त कोड निम्नलिखित केंद्रित तालिका तैयार करेगा:

    तालिका शीर्षक

    कॉलम शीर्षक 1 कॉलम शीर्षक 2
    बाएं पंक्ति 1, स्तंभ 2
    सही पंक्ति 1, स्तंभ 2
    केंद्र पंक्ति 3, स्तंभ 2
  • 75% चौड़ाई वाली डेटा तालिका जोड़ने के लिए:
    <div class="box desk-75percent">
  <h3 class="box-title">तालिका शीर्षक</h3><!--/box-title-->
  <div class="बॉक्स-सामग्री">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">स्तंभ शीर्षक 1</th>
		<th class="data-heading">स्तंभ शीर्षक 2</th>
	</tr>
	<tr>
		<td class="left_aligned">बाएं</td>
		<td>पंक्ति 1, स्तंभ 2</td>
	</tr>
	<tr>
		<td class="right_aligned">दाएँ</td>
		<td>पंक्ति 1, स्तंभ 2</td>
	</tr>
	<tr>
		<td class="centered">केंद्र</td>
		<td>पंक्ति 3, स्तंभ 2</td>
	</tr>
	</तालिका>
  </div><!--/box-content-->
</div><!--/box-->

    उपरोक्त कोड निम्नलिखित केंद्रित तालिका तैयार करेगा:

    तालिका शीर्षक

    कॉलम शीर्षक 1 कॉलम शीर्षक 2
    बाएं पंक्ति 1, स्तंभ 2
    सही पंक्ति 1, स्तंभ 2
    केंद्र पंक्ति 3, स्तंभ 2
  • मानक 100% चौड़ाई वाली डेटा तालिका जोड़ने के लिए:
    <div class="बॉक्स">
  <h3 class="box-title">तालिका शीर्षक</h3><!--/box-title-->
  <div class="बॉक्स-सामग्री">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">स्तंभ शीर्षक 1</th>
		<th class="data-heading">स्तंभ शीर्षक 2</th>
		<th class="data-heading">स्तंभ शीर्षक 3</th>
	</tr>
	<tr>
		<td class="left_aligned">बाएं</td>
		<td>पंक्ति 1, स्तंभ 2</td>
		<td>पंक्ति 1, स्तंभ 3</td>
	</tr>
	<tr>
		<td class="right_aligned">दाएँ</td>
		<td>पंक्ति 1, स्तंभ 2</td>
		<td>पंक्ति 1, स्तंभ 3</td>
	</tr>
	<tr>
		<td class="centered">केंद्र</td>
		<td>पंक्ति 3, स्तंभ 2</td>
		<td>पंक्ति 3, स्तंभ 3</td>
	</tr>
	</तालिका>
  </div><!--/box-content-->
</div><!--/box-->

    उपरोक्त कोड निम्नलिखित केंद्रित तालिका तैयार करेगा:

    तालिका शीर्षक

    कॉलम शीर्षक 1 कॉलम शीर्षक 2 कॉलम शीर्षक 3
    बाएं पंक्ति 1, स्तंभ 2 पंक्ति 1, स्तंभ 3
    सही पंक्ति 1, स्तंभ 2 पंक्ति 1, स्तंभ 3
    केंद्र पंक्ति 3, स्तंभ 2 पंक्ति 3, स्तंभ 3
  • बड़ी डेटा तालिका जोड़ने के लिए:
    <div class="बॉक्स बॉक्स--expandable">
  <h3 class="box-title">तालिका शीर्षक<span class="box-title-expand desk-visible">विस्तार करें <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="बॉक्स-सामग्री">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">स्तंभ शीर्षक 1</th>
		<th class="data-heading">स्तंभ शीर्षक 2</th>
		<th class="data-heading">स्तंभ शीर्षक 3</th>
	</tr>
	<tr>
		<td class="left_aligned">बाएं</td>
		<td>पंक्ति 1, स्तंभ 2</td>
		<td>पंक्ति 1, स्तंभ 3</td>
	</tr>
	<tr>
		<td class="right_aligned">दाएँ</td>
		<td>पंक्ति 1, स्तंभ 2</td>
		<td>पंक्ति 1, स्तंभ 3</td>
	</tr>
	<tr>
		<td class="centered">केंद्र</td>
		<td>पंक्ति 3, स्तंभ 2</td>
		<td>पंक्ति 3, स्तंभ 3</td>
	</tr>
	</तालिका>
  </div><!--/box-content-->
</div><!--/box-->

    उपरोक्त कोड निम्नलिखित केंद्रित तालिका तैयार करेगा:

    तालिका शीर्षक विस्तृत करें

    कॉलम शीर्षक 1 कॉलम शीर्षक 2 कॉलम शीर्षक 3
    बाएं पंक्ति 1, स्तंभ 2 पंक्ति 1, स्तंभ 3
    सही पंक्ति 1, स्तंभ 2 पंक्ति 1, स्तंभ 3
    केंद्र पंक्ति 3, स्तंभ 2 पंक्ति 3, स्तंभ 3
  • अतिरिक्त-बड़ी डेटा तालिका जोड़ने के लिए:
    <div class="बॉक्स बॉक्स--expandable">
  <h3 class="box-title">तालिका शीर्षक<span class="box-title-expand desk-visible">विस्तार करें <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="बॉक्स-सामग्री">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">स्तंभ शीर्षक 1</th>
		<th class="data-heading">स्तंभ शीर्षक 2</th>
		<th class="data-heading">स्तंभ शीर्षक 3</th>
	</tr>
	<tr>
		<td class="left_aligned">बाएं</td>
		<td>पंक्ति 1, स्तंभ 2</td>
		<td>पंक्ति 1, स्तंभ 3</td>
	</tr>
	<tr>
		<td class="right_aligned">दाएँ</td>
		<td>पंक्ति 1, स्तंभ 2</td>
		<td>पंक्ति 1, स्तंभ 3</td>
	</tr>
	<tr>
		<td class="centered">केंद्र</td>
		<td>पंक्ति 3, स्तंभ 2</td>
		<td>पंक्ति 3, स्तंभ 3</td>
	</tr>
	</तालिका>
  </div><!--/box-content-->
</div><!--/box-->

    उपरोक्त कोड निम्नलिखित केंद्रित तालिका तैयार करेगा:

    तालिका शीर्षक विस्तृत करें

    कॉलम शीर्षक 1 कॉलम शीर्षक 2 कॉलम शीर्षक 3
    बाएं पंक्ति 1, स्तंभ 2 पंक्ति 1, स्तंभ 3
    सही पंक्ति 1, स्तंभ 2 पंक्ति 1, स्तंभ 3
    केंद्र पंक्ति 3, स्तंभ 2 पंक्ति 3, स्तंभ 3

    तालिका शीर्षलेख (th) या तालिका कक्ष (td) को संरेखित करने के लिए वर्ग नामों पर ध्यान दें:

    • class="left_aligned" को बाएँ-संरेखित करें
    • class="right_aligned" को दाईं ओर संरेखित करें
    • class="centered" को केंद्र-संरेखित करें

    डिफ़ॉल्ट रूप से, नियमित तालिका कक्ष दाईं ओर संरेखित होते हैं, ताकि संख्यात्मक डेटा की बड़ी तालिकाओं को दिखाते समय कोड छोटा हो सके।

द्वारा लिखित: Michael Shackleford