Menambah Baris dan Kolom pada Tabel

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

Related Posts:

Disqus Comments
© 2017 Obachti 95 - Template Created by goomsite - Proudly powered by Blogger