Membuat table tanpa tag table

alfa6661
- January 14, 2013
0 (0 votes)
Rate :
Membuat table tanpa tag table

Pada umumnya setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup.

Struktur dasar table

<table>
    <tr>
        <td>NRP</td>
        <td>Nama</td>
        <td>Alamat</td>
    </tr>
    <tr>
        <td>6309189</td>
        <td>Alfa</td>
        <td>Bandung</td>
    </tr>
</table>

Lalu bagaimana membuat table tanpa menggunakan tag <table> , Artikel ini menjelaskan bagaimana membuat struktur table dengan menggunakan tag div, dengan kata lain tanpa menggunakan tag table.

Kembali lagi pada struktur dasar dari tabel yang memiliki 3 tag dasar, <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Dari kalimat diatas bisa disimpulkan, kita harus memiliki minimal tiga style untuk membentuk table

Style Sheet

/* Tag Table */
.table{
  display:table;        
  width:auto;        
  background-color:#eee;        
  border:1px solid  #666666;        
  border-spacing:5px;
}
 
/* Tag tr */
.row, .headRow{
  display:table-row;
  width:auto;
  clear:both;
}
 
/* Tag td */
.col{
  float:left;
  display:table-column;        
  width:200px;         
}
 
.headRow .col{
    border-bottom:1px solid #000;
    padding-bottom:2px;
}

HTML

<div class="table">
    <div class="headRow">
        <div class="col">NRP</div>
        <div class="col">Nama</div>
        <div class="col">Alamat</div>
    </div>
    <div class="row">
        <div class="col">6309189</div>
        <div class="col">Alfa Adhitya</div>
        <div class="col">Bandung</div>
    </div>
    <div class="row">
        <div class="col">6309212</div>
        <div class="col">Wiro</div>
        <div class="col">Bandung</div>
    </div>
</div>

Hasil

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article