You are here → Home √ Menambah Baris dan Kolom pada Tabel

Menambah Baris dan Kolom pada Tabel

Dipublikasikan oleh Ilham Bachtiar pada Tuesday, October 15, 2013

Sebelumnya kita sudah mengenal tabel dan cara membuatnya(baca di sini). Untuk postingan kali ini giliran bagaimana cara menambahkan baris dan kolom pada tabel. Dalam membuat tabel terdapat 3 kode perintah utama, yaitu : <table>, <tr> dan <td>. Penjelasan : <table> perintah untuk membuat tabel <tr> perintah untuk membuat baris dan <td> perintah untuk membuat kolom. -Ingat!-

Sebagai ilustrasi kamu akan memasukan suatu data pada baris pertama kolom pertama, hal pertama yang harus dibuat adalah membuat baris lalu dikuti dengan membuat kolom dan selanjutnya memasukan data, jika akan dilanjutkan mengisi kolom kedua pada baris pertama, yang perlu dilakukan adalah membuat baris dulu kemudian membuat kolom pertama dan selanjutnya membuat kolom kedua setelah itu mengisi data, inti dari pengisian data pada tabel adalah, pertama membuat baris(<tr>) lalu diikuti dengan membuat kolom(<td>).

Pertama buat baris(<tr>), kemudian buat kolom(<td>).
Berikut adalah kode table dengan 2 baris dan 2 kolom :
<table>  <----- pembuka table
<tr>  <----- baris 1
<td>Baris 1 - Kolom 1</td>  <----- kolom 1
<td>Baris 1 - Kolom 2</td>  <----- kolom 2
</tr>  
<tr>  <----- baris 2
<td>Baris 2 - Kolom 1</td>  <----- kolom 1
<td>Baris 2 - Kolom 2</td>  <----- kolom 2
</tr>  
</table> <----- penutup table

Untuk menjadikan 3 baris dan 3 kolom, kodenya akan berubah seperti berikut:
<table>  <----- pembuka table
<tr>  <----- baris 1
<td>Baris 1 - Kolom 1</td>  <----- kolom 1
<td>Baris 1 - Kolom 2</td>  <----- kolom 2
</tr>  
<tr>  <----- baris 2
<td>Baris 2 - Kolom 1</td>  <----- kolom 1
<td>Baris 2 - Kolom 2</td>  <----- kolom 2
</tr>
<tr>  <----- baris 3
<td>Baris 3 - Kolom 1</td>  <----- kolom 1
<td>Baris 3 - Kolom 2</td>  <----- kolom 2
</tr>  
</table> <----- penutup table
Selanjutnya bisa kalian tambahkan sendiri baris dan kolomnya sesuai kebutuhan. Untuk hasilnya akan seperti berikut dengan sedikit tambahan Css agar tabel terlihat lebih bagus.

Baris 1 - Kolom 1baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2
Baris 3 - Kolom 1Baris 3 - Kolom 3

Postingan selanjutnya kita akan menggabungkan baris dan baris, kolom dan kolom menjadi satu. Seperti berikut:

Gabungan 1 Baris dan 3 Kolom
Baris 1 - Kolom 1baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2Baris 2 - Kolom 3
Baris 3 - Kolom 1
Baris 4 - Kolom 1Baris 4 - Kolom 2Baris 4 - Kolom 3

8 Komentar:

  1. Wah ini makin rumit sepertinya hehe...
    Makasih sob, bisa saya coba kapan2 ah

    ReplyDelete
  2. OK dehh, tapi saya koq kepuntal-puntal ya

    ReplyDelete
  3. Pakai kode tersebut jadi lebih mudah membuat bari dan kolom pada tabel di postingan.

    ReplyDelete

 
Copyright © 2013 Obachti 95 . Powered by Blogger . All Rights Reserved