Menambah Baris dan Kolom pada Tabel

Obachti 95

Blogger friendly sharing

Menambah Baris dan Kolom pada Tabel

Jane Doe By Jane Doe 14
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

14 comments

  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
  4. I posted this article to my favorites and intend to return to for more outstanding articles. It’s all too easy to read and comprehend and also clever post. Read WhatsApp Profile Pictures & Good Night Shayari in Hindi.

    ReplyDelete

  5. Our Technical experts team give you the best solution to your problems. You can follow the link and you are one step away from solving your problem.Office Setup with product key and follow the instructions for office setup. if you have any issues related to office installation then visit now.
    office.com/setup

    ReplyDelete
  6. Norton Antivirus protect your computer from the virus and other online threats. You can get Norton Technical Support from the expert by visiting
    Norton.com/setup. You can also downlaod, install and activate Norton Antivirus by visiting www.norton.com/setup.

    ReplyDelete

Post a Comment