सीएसएस तरीका क्षैतिज रूप से संरेखित तालिका के लिए

96

मैं ब्राउज़र विंडो के केंद्र में निश्चित चौड़ाई की एक तालिका दिखाना चाहता हूं। अब मैं उपयोग करता हूं

<table width="200" align="center">

लेकिन विजुअल स्टूडियो 2008 इस लाइन पर चेतावनी देता है:

विशेषता 'संरेखित' पुरानी मानी जाती है। एक नए निर्माण की सिफारिश की जाती है।

उसी लेआउट को प्राप्त करने के लिए मुझे किस सीएसएस शैली को टेबल पर लागू करना चाहिए?

— अलेक्जेंडर प्रोकोफ़येव
स्रोत

2

तो, अंत में आप किस समाधान के लिए गए थे?

— ओला तुवेसन

183

स्टीवन सही है, सिद्धांत में :

सीएसएस का उपयोग करके तालिका को केंद्र में रखने का "सही" तरीका। यदि बाएँ और दाएँ हाशिये समान हैं, तो ब्राउज़र को केंद्र तालिकाओं के अनुरूप होना चाहिए। इसे पूरा करने का सबसे सरल तरीका बाएं और दाएं मार्जिन को "ऑटो" पर सेट करना है। इस प्रकार, कोई स्टाइल शीट में लिख सकता है:

table
{ 
    margin-left: auto;
    margin-right: auto;
}

लेकिन इस उत्तर की शुरुआत में उल्लिखित लेख आपको एक तालिका को केंद्रित करने के अन्य सभी तरीके देता है।

एक सुरुचिपूर्ण सीएसएस क्रॉस-ब्राउज़र समाधान: यह MSIE 6 (Quirks and Standard), मोज़िला, ओपेरा और यहां तक कि नेटस्केप 4.x दोनों में काम करता है, बिना कोई स्पष्ट चौड़ाई निर्धारित किए:

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

— VonC
स्रोत

आप मार्जिन के साथ तालिका को केंद्र में प्राप्त कर सकते हैं: 0 ऑटो; IE6 में और यदि आप सुनिश्चित करते हैं कि आपके पृष्ठ में एक वैध सिद्धांत घोषणा है।

— ओला तुवेसन

@ मार्को: मैंने अभी यह जानकारी नहीं दी है, लेकिन स्टैकऑवरफ्लो पर एक प्रश्न के लिए यह एक अच्छा आधार हो सकता है।

— वॉनसी

1

आप बिलकुल सही हैं। टेबल को क्षैतिज रूप से केंद्रित होने के लिए चौड़ाई निर्दिष्ट करने की आवश्यकता नहीं है। मैंने इसका परीक्षण किया। Whilest DIV को क्षैतिज केंद्रित करने के लिए निर्दिष्ट करने के लिए चौड़ाई की आवश्यकता होती है।

— मार्को डेमायो

17

इसे इस्तेमाल करे:

<table width="200" style="margin-left:auto;margin-right:auto">

— jalbert
स्रोत

2

सरल। IE6 और इसके बाद के संस्करण खुशी के साथ आपकी तालिका को "मार्जिन: 0 ऑटो;" यदि केवल पृष्ठ "मानकों" मोड में प्रस्तुत करता है। ऐसा करने के लिए आपको एक वैध सिद्धांत घोषणा की आवश्यकता होती है, जैसे कि

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

या

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

यह सच है, IE5.5 और नीचे अभी भी तालिका को केंद्र करने से इंकार कर देगा, लेकिन शायद आप उस के साथ रह सकते हैं, खासकर यदि पृष्ठ अभी भी तालिका के साथ कार्यात्मक है, जो बाईं ओर संरेखित है। मुझे लगता है कि अब IE5.5 और नीचे के उपयोगकर्ताओं को कुछ अजीब दिखने वाली वेबसाइटों के लिए उपयोग किया जाता है - लेकिन आपको अभी भी यह सुनिश्चित करने की आवश्यकता है कि उन दृश्य glitches आपकी साइट को अनुपयोगी नहीं बनाते हैं।

हैप्पी कोडिंग!

संपादित करें: क्षमा करें, मुझे शायद यह इंगित करना चाहिए कि IE6 और "मानक" रेंडरिंग मोड में लाने के लिए आपके पास "सख्त" सिद्धांत नहीं है। मैंने महसूस किया कि यह मेरे द्वारा ऊपर पोस्ट किए गए सिद्धांतों के उदाहरण से हो सकता है। उदाहरण के लिए, इस सिद्धांत की घोषणा समान रूप से काम करेगी:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

— ओला तुवेसन
स्रोत

2

हालांकि यह आज की दुनिया में विधर्म हो सकता है - अतीत में आप निम्नलिखित गैर-सीएसएस कोड करेंगे। यह आज के ब्राउज़रों के साथ-साथ सभी चीजों में काम करता है लेकिन - जैसा कि मैंने कहा है - यह आज की दुनिया में विधर्म है:

<center>
<table>
   ...
</table>
</center>

आपको जो कुछ चाहिए वह यह बताने का एक तरीका है कि आप किसी तालिका को केंद्र में रखना चाहते हैं और व्यक्ति पुराने ब्राउज़र का उपयोग कर रहा है। फिर तालिका के चारों ओर "<केंद्र>" कमांड डालें। अन्यथा - सीएसएस का उपयोग करें।

हैरानी की बात है - यदि आप बॉडी क्षेत्र में सब कुछ केंद्र में रखना चाहते हैं - तो आप बस मानक का उपयोग कर सकते हैं

text-align: center;

css कमांड और IE8 में (कम से कम) यह सब कुछ टेबल सहित पेज पर केंद्रित होगा।

— मार्क मैनिंग
स्रोत

0

style="text-align:center;"

(मुझे लगता है)

या आप इसे अनदेखा कर सकते हैं, यह अभी भी काम करता है

— स्टीवन ए लोव
स्रोत

0

यह काम करना चाहिए:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

— मैट हॉवेल
स्रोत

0

मैं बस इसे सीख रहा हूं और आखिरकार मेरे लिए जो काम किया वह था पहले तीन पंक्तियों वाली एक तालिका बनाना। बाईं और दाईं पंक्तियों के लिए मार्जिन को 50% पर सेट करें। फिर केंद्र की "टेबल डेटा" की "टेबल डेटा" के अंदर एक एकल पंक्ति, निश्चित चौड़ाई तालिका डालें।

0

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

— चंद्र शेखर शर्मा
स्रोत

0

मूल रूप से, यह काम करता है,

<table align="center">
...

लेकिन, आप इसे CSS का उपयोग करके बेहतर तरीके से कर सकते हैं, और यह CSS का उपयोग करने के लिए एक बेहतर तरीका होगा क्योंकि यह वेब पेज को गतिशील व्यवहार प्रदान करता है और उत्तरदायी होता है।

  <table style="text-align:center;">

इसके अलावा, यदि आपको पृष्ठ पर केवल तालिका प्रदर्शित करने की आवश्यकता है, तो आप केवल नीचे दिखाए गए अनुसार बॉडी टैग संरेखण के साथ जा सकते हैं,

 <body style="text-align:center;">
<table>
  ...
</table>

यदि आप कोई अन्य सुझाव चाहते हैं तो कृपया मुझे बताएं। इस पर निश्चित रूप से आपकी मदद करेंगे। इसके अलावा बूटस्ट्रैप सुविधाओं का उपयोग करना अधिक आसान और इंटरैक्टिव होगा।

— गौराव गौतम
स्रोत

0

Div शैली में जोड़ें:

width: fit-content;

— खालिद मोहब
स्रोत