Cara membuat tabel hanya menggunakan tag <div> dan Css

182

Saya ingin membuat tabel hanya menggunakan <div>tag dan CSS.

Ini adalah tabel contoh saya.

<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>

Dan Gaya:

<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>

Tapi tabel ini tidak berfungsi dengan IE7 dan versi di bawahnya. Tolong beri solusi dan ide Anda untuk saya. Terima kasih.

html css Kumara
sumber
lihat artikel ini
tanathos
32
mengapa Anda ingin menggunakan divuntuk membuat tabel?
beli
3
lihat artikel bagus 'Apakah Tabel CSS Lebih Baik Daripada Tabel HTML?' [ vanseodesign.com/css/tables/]
vladimir
5
Saya pikir alasan siapa pun yang ingin menggunakan tabel berbasis div daripada tabel normal adalah bahwa .... rendering / animasi / reflow pada tabel berbasis div sebenarnya lebih cepat (terutama untuk ukuran DOM besar) daripada merender tabel normal. ..... lihat ini .... stubbornella.org/content/2009/03/27/ ... this .... developer.nokia.com/community/wiki/ ... di atas itu semua plugin javascript intensif data seperti slickgrid dll gunakan divBasedtable
bhavya_w
1
@ huy Mungkin karena divs lebih fleksibel daripada tabel!
Kai Noack

Jawaban:

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;  
}

Cuplikan yang dapat dijalankan:

Tampilkan cuplikan kode

Siwa Komuravelly
sumber
224
Terima kasih! Seseorang yang benar-benar menjawab pertanyaannya dan tidak hanya mengatakan bahwa "itu ide yang bodoh." Aku benci ketika orang tidak menjawab pertanyaan ... Jika dia menanyakannya, itu harus dijawab
Brian Leishman
23
@stumpx: Terkadang jawaban yang benar adalah "jangan lakukan itu". Ini adalah salah satu dari saat-saat itu. Ketika Anda harus bertanya "bagaimana cara membuat tabel menggunakan div dan CSS", Anda memiliki satu dari dua masalah: apakah Anda mengajukan pertanyaan yang salah, atau Anda mencoba melakukan hal yang salah.
cHao
28
@ cHao Jika menurut Anda itu jawabannya, abaikan saja dan biarkan seseorang yang benar-benar ingin menjawab pertanyaan itu menjawabnya.
Brian Leishman
14
@stumpx: Jika saya pikir pertanyaannya tidak boleh dijawab , saya memilih untuk menutup - karena pertanyaan itu seharusnya tidak ada. Semua pertanyaan yang valid berhak mendapat jawaban. Tapi seperti yang saya katakan, kadang-kadang jawaban yang paling benar adalah "jangan lakukan itu". Apakah baik memberi tahu seseorang tentang cara mengatasi masalah yang salah? Apakah baik untuk berpangku tangan sementara yang lain menawarkan nasihat seperti itu? Aku bilang tidak.
cHao
5
Jika Anda tidak tahu apa yang ada di kepala desainer Anda, ketika meninggalkan data dalam struktur div seperti di atas jauh lebih baik daripada membiarkannya dalam tabel. Lebih baik berarti lebih mudah untuk mengkonversi dari div mengambang ke tabel yang sebaliknya.
anatoly techtonik
96

divseharusnya tidak digunakan untuk data tabel. Itu sama salahnya dengan menggunakan tabel untuk tata letak.
Gunakan a <table>. Mudah, semantik benar, dan Anda akan selesai dalam 5 menit.

Kobi
sumber
8
bisa bergantung pada aplikasinya. kadang-kadang apa yang tampak tabular mungkin linier, meskipun terbelah. Misalnya kalender dapat memiliki manfaatnya sebagai tabel divs sebagai gantinya
Dan
2
@Dann: Mereka mungkin memiliki manfaat sebagai daftar , tetapi banyak divs secara semantik sama buruknya dengan tabel tata letak.
cao
4
ada beberapa alasan mengapa kami meminta meja untuk disign dengan DIV. Salah satunya menggunakan tag tabel di SharePoint 2007 untuk mengacaukan setiap konten yang ada di halaman
Shiva Komuravelly
2
@implyletgo: Semantik, akan lebih tepat untuk menata sel tabel sebagai blok daripada mencoba membuat div bertindak seperti tabel.
cHao
1
kenapa tidak? jika Anda menggunakan tabel, Anda tidak dapat menambahkan bilah gulir di sekitar sel tertentu sehingga tabel Anda memiliki tajuk terkunci seperti excel, misalnya. Tabel memiliki banyak batasan, mengapa ini tidak dapat dilakukan dengan divs?
pilavdzice
9

Ini adalah utas lama, tetapi saya pikir saya harus memposting solusi saya. Saya menghadapi masalah yang sama baru-baru ini dan cara saya menyelesaikannya adalah dengan mengikuti pendekatan tiga langkah seperti diuraikan di bawah ini yang sangat sederhana tanpa CSS yang kompleks .

(CATATAN: Tentu saja, untuk peramban modern, menggunakan nilai-nilai tabel atau baris-tabel atau sel-tabel untuk atribut tampilan CSS akan menyelesaikan masalah. Tetapi pendekatan yang saya gunakan akan bekerja dengan baik di peramban modern dan yang lebih lama karena tidak gunakan nilai-nilai ini untuk atribut tampilan CSS.)

PENDEKATAN SEDERHANA 3-LANGKAH

Untuk tabel dengan divs saja sehingga Anda mendapatkan sel dan baris seperti dalam elemen tabel gunakan pendekatan berikut.

  1. Ganti elemen tabel dengan blok div (gunakan .tablekelas)
  2. Ganti setiap elemen tr atau th dengan blok div (gunakan .rowkelas)
  3. Ganti setiap elemen td dengan blok inline div (gunakan .cellkelas)

.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>
Luaskan cuplikan

PEMBARUAN 1

Untuk menyiasati efek dengan lebar yang sama tidak dipertahankan di semua sel kolom seperti yang disebutkan thatslchdalam komentar, orang dapat mengadopsi salah satu dari dua pendekatan di bawah ini.

  • Tentukan lebar untuk cellkelas

    cell {display: inline-block; lebar: 340px;}

  • Gunakan CSS browser modern seperti di bawah ini.

    .table {display: table; } .row {display: table-row;} .cell {display: table-cell;}

Sunil
sumber
1
Ini tidak akan melakukannya karena ukuran kolomnya tidak sama.
Itulah
Anda benar tentang lebar yang tidak berperilaku seperti itu dalam elemen tabel. Namun, jika Anda menentukan lebar untuk .cell kelas di CSS seperti .cell {width: 300px;} maka Anda dapat mencapai efek yang serupa. Tapi, batasan yang Anda sebutkan akan selalu ada ketika menggunakan div kecuali Anda menentukan lebar untuk kelas CSS sel. Cara lain untuk mendapatkan efek yang sama adalah dengan menggunakan kelas-kelas berikut: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> alih-alih menggunakan kelas yang disebutkan dalam jawaban di atas.
Sunil
@thatsIch, saya telah menambahkan UPDATE 1 dalam jawaban saya yang menjelaskan solusi untuk masalah lebar yang Anda sebutkan
Sunil
4

Jika ada sesuatu di dalam <table>Anda yang tidak Anda sukai, mungkin Anda bisa menggunakan file reset ?

atau

jika Anda memerlukan ini untuk tata letak halaman periksa contoh tata letak cssplay untuk mendesain situs web tanpa tabel.

Urszula Karzelek
sumber
2

Gunakan tipe dokumen yang benar; itu akan menyelesaikan masalah. Tambahkan baris di bawah ini ke bagian atas file HTML Anda:

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

OFF-TOPIC, tetapi mungkin membantu seseorang untuk HTML ... CSS yang lebih bersih

.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;
    }

HTML

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

Bekerja di Chrome dan Firefox

Harijs Krūtainis
sumber
2
Dan jika sel tabel Anda memiliki <div>elemen di dalamnya? Anda mungkin ingin.common_table div > div
vol7ron
2

Dalam membangun set tag tata letak khusus, saya menemukan jawaban lain untuk masalah ini. Disediakan di sini adalah kumpulan tag khusus dan kelas CSS mereka.

HTML

<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>

CSS

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 }

Kunci untuk mendapatkan sel kosong dan sel pada umumnya menjadi ukuran yang tepat, adalah Box-Sizing dan Padding. Border akan melakukan hal yang sama juga, tetapi membuat garis di baris. Padding tidak. Dan, sementara saya belum mencobanya, saya pikir Margin akan bertindak dengan cara yang sama seperti Padding, dalam memaksa dan mengosongkan sel untuk dirender dengan benar.

E Net Arch
sumber