केवल <div> टैग और सीएसएस का उपयोग करके तालिका कैसे बनाएं

182

मैं केवल <div>टैग और सीएसएस का उपयोग करके तालिका बनाना चाहता हूं ।

यह मेरी नमूना तालिका है।

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

और शैली:

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;
    }
</style>

लेकिन यह तालिका IE7 और नीचे दिए गए संस्करण के साथ काम नहीं करती है। कृपया अपना समाधान और विचार मेरे लिए दें। धन्यवाद।

html  css 
— कुमार
स्रोत
— tanathos
32
आप divतालिका बनाने के लिए उपयोग क्यों करना चाहते हैं ?
— ह्यू
3
अच्छा लेख देखें 'HTML टेबल्स से बेहतर CSS टेबल्स हैं?' [ vanseodesign.com/css/tables/]
— vladimir
5
मुझे लगता है कि जिस कारण से कोई भी सामान्य तालिका के बजाय डिव आधारित तालिका का उपयोग करना चाहता है, वह है .... डिव आधारित तालिका पर रेंडरिंग / एनिमेशन / रिफ्लोज़ वास्तव में तेज (esp। बड़े DOM आकार के लिए) एक सामान्य तालिका प्रदान करने की तुलना में अधिक है। ..... इसे देखें .... stubbornella.org/content/2009/03/27/… इस .... डेवलपर . nokia.com/community/wiki/… के ऊपर कि सभी डेटा सघन जावास्क्रिप्ट प्लगइन्स जैसे slickgrid आदि divBasedtable का उपयोग करें
— bhavya_w
1
शायद @huy क्योंकि divअधिक हैं फ्लेक्स तालिकाओं की तुलना में सक्षम!
— काई नैक

जवाबों:

262 
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

चल स्निपेट:

कोड स्निपेट दिखाएं

— शिव कोमुरवेल्ली
स्रोत
223
धन्यवाद! कोई है जो वास्तव में अपने प्रश्न का उत्तर देता है और यह नहीं कहता है कि "यह एक मूर्ख विचार है।" मुझे इससे नफरत है जब लोग सवालों के जवाब नहीं देते ... अगर उसने पूछा, तो इसका जवाब दिया जाना चाहिए
— ब्रायन लीशमैन
23
@stumpx: कभी-कभी सही उत्तर "ऐसा नहीं करते" है। यह उस काल में से एक है। जब आपको "div और CSS का उपयोग करके तालिका कैसे बनाते हैं" यह पूछना है, तो आपको दो समस्याओं में से एक है: या तो आप गलत प्रश्न पूछ रहे हैं, या आप गलत काम करने की कोशिश कर रहे हैं।
— cHao
28
@cHao अगर आपको लगता है कि उत्तर होना चाहिए तो इसे अनदेखा करें और किसी ऐसे व्यक्ति को जाने दें जो वास्तव में इसका उत्तर देना चाहता है।
— ब्रायन लीशमैन
14
@stumpx: अगर मुझे लगता है कि प्रश्न का उत्तर नहीं दिया जाना चाहिए , तो मैं मतदान बंद कर दूं - क्योंकि प्रश्न भी मौजूद नहीं होना चाहिए। सभी मान्य प्रश्न उत्तर के लायक हैं। लेकिन जैसा मैंने कहा, कभी-कभी सबसे सही उत्तर "यह मत करो" है। क्या किसी को सलाह देना अच्छा है कि गलत समस्या को कैसे हल किया जाए? क्या दूसरों द्वारा ऐसी सलाह देने के दौरान मूर्खतापूर्ण व्यवहार करना अच्छा है ? मैंने कहा नही।
— cHao
5
यदि आपको नहीं पता कि आपके डिजाइनर के सिर में क्या है, जब ऊपर की तरह दिव्य संरचना में डेटा छोड़ना ज्यादा बेहतर होता है, तो उन्हें तालिका में छोड़ देना। बेहतर इसका मतलब यह है कि फ्लोटिंग डिव से तालिकाओं में बदलना आसान है जो इसके विपरीत है।
— अनातोली टेकटोनिक
96

divतालिका डेटा के लिए उपयोग नहीं किया जाना चाहिए। यह लेआउट के लिए तालिकाओं का उपयोग करने के समान ही गलत है।
एक का उपयोग करें <table>। इसका आसान, शब्दार्थ सही है, और आप 5 मिनट में कर लेंगे।

— कोबी
स्रोत
8
हालांकि आवेदन पर निर्भर कर सकते हैं। कभी-कभी ऐसा प्रतीत होता है कि सारणीबद्ध रैखिक हो सकता है, हालांकि विभाजित। उदाहरण के लिए कैलेंडर के बजाय डिवेंडर के रूप में उनके लाभ हो सकते हैं
— दान
2
@ डान: वे एक सूची के रूप में लाभ हो सकता है , लेकिन divs का एक झुंड शब्दार्थ रूप से एक लेआउट तालिका के रूप में बुरा है।
— cHao
4
ऐसे कई कारण हैं जो हम तालिका के लिए पूछ रहे हैं कि डीआईवी के साथ क्या है। जिनमें से एक SharePoint 2007 में तालिका टैग का उपयोग कर रहा है जो पृष्ठ में मौजूद हर सामग्री को गन्दा करता है
— शिव Komuravelly
2
@simplyletgo: शब्दार्थ, यह तालिका के रूप में कार्य करने के लिए ब्लॉक की तुलना में तालिका कोशिकाओं को शैली के लिए अधिक उपयुक्त होगा।
— cHao
1
क्यों नहीं? यदि आप तालिकाओं का उपयोग करते हैं तो आप कुछ कोशिकाओं के चारों ओर एक स्क्रॉलबार नहीं जोड़ सकते हैं ताकि आपकी तालिका में एक एक्सेल जैसा लॉक हेडर हो, उदाहरण के लिए। तालिकाओं की बहुत सी सीमाएँ हैं, यह विभाजनों के साथ क्यों नहीं किया जा सकता है?
— pilavdzice
9

यह एक पुराना धागा है, लेकिन मुझे लगा कि मुझे अपना समाधान पोस्ट करना चाहिए। मुझे हाल ही में एक ही समस्या का सामना करना पड़ा और जिस तरह से मैंने इसे हल किया वह तीन-चरण दृष्टिकोण का अनुसरण करके है जैसा कि नीचे उल्लिखित है जो बिना किसी जटिल सीएसएस के बहुत सरल है ।

(नोट: बेशक, आधुनिक ब्राउज़रों के लिए, प्रदर्शन की सीएसएस विशेषता के लिए टेबल या टेबल-पंक्ति या टेबल-सेल के मूल्यों का उपयोग करके समस्या को हल किया जाएगा। लेकिन मैं जिस दृष्टिकोण का उपयोग करता हूं वह आधुनिक और पुराने ब्राउज़रों में समान रूप से अच्छी तरह से काम करेगा क्योंकि ऐसा नहीं होता है। सीएसएस विशेषता के लिए इन मूल्यों का उपयोग करें।)

3-STEP SIMPLE APPROACH

डिव के साथ तालिका के लिए केवल आपको कोशिकाएँ और पंक्तियाँ मिलती हैं जैसे तालिका तत्व में निम्नलिखित दृष्टिकोण का उपयोग करते हैं।

  1. ब्लॉक एलिमेंट के साथ टेबल एलिमेंट को बदलें ( .tableक्लास का उपयोग करें )
  2. प्रत्येक tr या th तत्व को एक ब्लॉक div के साथ बदलें (एक .rowवर्ग का उपयोग करें )
  3. प्रत्येक इनलाइन तत्व को इनलाइन ब्लॉक डिव से बदलें ( .cellक्लास का उपयोग करें )

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}
    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>
स्निपेट का विस्तार करें

अद्यतन १

एक कॉलम की सभी कोशिकाओं के समान चौड़ाई के प्रभाव को बनाए रखने के लिए, जैसा कि thatslchएक टिप्पणी में बताया गया है, नीचे दिए गए दोनों दृष्टिकोणों में से कोई भी एक को अपनाया जा सकता है।

  • cellकक्षा के लिए एक चौड़ाई निर्दिष्ट करें

    सेल {प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 340px;}

  • नीचे के रूप में आधुनिक ब्राउज़रों के सीएसएस का उपयोग करें।

    .table {प्रदर्शन: टेबल; } .row {डिस्प्ले: टेबल-रो;} .सेल {डिस्प्ले: टेबल-सेल;}

— सुनील
स्रोत
1
यह ऐसा नहीं करेगा क्योंकि कॉलम समान आकार के नहीं हैं।
— thatsIch
आप चौड़ाई के बारे में सही व्यवहार नहीं कर रहे हैं जैसे कि यह तालिका तत्व में है। हालाँकि, यदि आप .ss वर्ग की चौड़ाई निर्दिष्ट करते हैं, तो यह CSS की तरह है।। चौड़ाई {300px;}; तो आप एक समान प्रभाव प्राप्त कर सकते हैं। लेकिन, आपके द्वारा उल्लिखित सीमा हमेशा div का उपयोग करते समय होगी जब तक आप सेल सीएसएस वर्ग के लिए चौड़ाई को परिभाषित नहीं करते हैं। एक ही प्रभाव प्राप्त करने का तरीका निम्नलिखित वर्गों का उपयोग करना होगा: <style> .table {प्रदर्शन: तालिका; } .row {डिस्प्ले: टेबल-रो;}; .सेल {डिस्प्ले: टेबल-सेल;} </ style> इसके बजाय उपरोक्त उत्तर में वर्णित कक्षाओं का उपयोग करने के लिए।
— सुनील
@thatsIch, मैंने अपने उत्तर में UPDATE 1 जोड़ा है जो चौड़ाई के मुद्दे पर आपके द्वारा बताए गए विवरण के बारे में बताता है
— सुनील
4

अगर <table>आप में कुछ भी ऐसा नहीं है, तो शायद आप रीसेट फ़ाइल का उपयोग कर सकते हैं ?

या

यदि आपको पृष्ठ के लेआउट के लिए इसकी आवश्यकता है तो बिना टेबल के वेबसाइट डिजाइन करने के लिए cssplay लेआउट उदाहरण देखें ।

— उर्सज़ुला कारज़ेलेक
स्रोत
3

मुझे ग्रिड-सीएसएस पर विचार करते हुए कोई जवाब नहीं दिखता। मुझे लगता है कि यह एक बहुत ही सुंदर दृष्टिकोण है: ग्रिड-सीएसएस यहां तक ​​कि पंक्ति अवधि और कॉलम स्पैन का समर्थन करता है। यहाँ आप एक बहुत अच्छा लेख पा सकते हैं:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

— Zardo
स्रोत
2

सही डॉक्टर प्रकार का उपयोग करें; यह समस्या को हल करेगा। अपनी HTML फ़ाइल के शीर्ष पर नीचे की पंक्ति जोड़ें:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— ऐ बी सी डी
स्रोत
2

थोड़ा OFF-TOPIC, लेकिन एक क्लीनर HTML के लिए किसी की मदद कर सकता है ... सीएसएस

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

एचटीएमएल

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

क्रोम और फ़ायरफ़ॉक्स पर काम करता है

— हरिज कृष्णिस
स्रोत
2
और अगर आपके टेबल सेल्स में <div>तत्व हैं? आप शायद चाहते हैं.common_table div > div
— vol7ron
2

लेआउट टैग के एक कस्टम सेट के निर्माण में, मुझे इस समस्या का एक और जवाब मिला। बशर्ते यहां टैग और उनके सीएसएस कक्षाओं का कस्टम सेट हो।

एचटीएमएल

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

सीएसएस

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

सही आकार के लिए सामान्य रूप से खाली कोशिकाओं और कोशिकाओं को प्राप्त करने की कुंजी, बॉक्स-आकार और पैडिंग है। बॉर्डर भी यही काम करेगा, लेकिन पंक्ति में एक रेखा बनाता है। पैडिंग नहीं है। और, जब मैंने इसे आज़माया नहीं, तो मुझे लगता है कि मार्जिन ठीक उसी तरह से काम करेगा जैसे कि पेडिंग, फोर्सिंग और खाली सेल को सही तरीके से प्रस्तुत करना।

— ई नेट आर्क
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.