Cara Membuat Table dengan HTML CSS

Table HTML 2 in 1, Warna Table, Dijelaskan Disini

Dalam membuat table di HTML itu menggunakan tag <table>, didalamnya juga menggunakan tag-tag lain yang berhubungan seperti <tr> atau <td>. Gak perlu panjang lebar langsung saja simak langkah-langkahnya dibawah ini:

<table>
  <tr>
    <th>NO</th>
    <th>Nama</th>
    <th>Alamat</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Amel</td>
    <td>Cikukulu</td>
    <td>XI</td>
  </tr>
</table>

Copy code tersebut dan tempelkan di file HTML dibagian mana kalian ingin menampilkan tabel ini, simpan dan lihat hasilnya. Mudah bukan ? ini adalah table sederhana, untuk menambahkan nilai lainnya seperti nomor 2 dan seterusnya cukup copy <tr> <td> dan tempelkan setelahnya.

Sebelum melaju lebih jauh, biar saya jelaskan terlebih dahulu tentang tag-tag yang digunakan diatas (arti dan fungsi):

  • <table>
    Merupakan tag yang digunakan untuk membuat table
  • <tr>
    Artinya table row yang digunakan untuk membuat baris baru pada sebuah table
  • <th>
    Yaitu table heading yang digunakan untuk kolom judul pada table
  • <td>
    Yaitu table data yang digunakan untuk menulis semua data yang ingin ditampilkan

Lanjutan (colspan)

Supaya tidak terlalu standar, sekarang akan saya tambahkan sedikit variasi. Contohnya saya akan memberikan variasi di bagian kolom dan baris, supaya tidak terlalu standar akan dibuat menjadi 2 kolom dan memiliki 2 nilai didalam 1 kolom besar.

Tambahkan rowspan=2 didalam <th> tadi untuk membuatnya lebih tinggi, tapi pada bagian alamat akan dibuat berbeda dengan memberikan colspan=2 supaya lebih lebar. Karena sudah diberikan colspan=2 dan rowspan=2 artinya akan ada kolom dan baris yang kosong pada <th> tersebut, untuk mengisinya kita perlu membuat baris baru dengan <tr> sebelum menuju ke <td> jadi seperti ini:

<table>
  <tr>
    <th rowspan="2">NO</th>
    <th rowspan="2">Nama</th>
    <th colspan="2">Alamat</th>
    <th rowspan="2">Kelas</th>
  </tr>
  <tr>
    <th>RT</th>
    <th>RW</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Amel</td>
    <td>Cikukulu</td>
    <td>XI</td>
  </tr>
</table>

Silahkan di simpan dan lihat hasilnya, terjadi perbedaan dengan yang standar tadi. Disini tabel nya memiliki tinggi 2 baris pada judul dan pada bagian Alamat (colspan) memiliki nilai baru dibawahnya yaitu RT dan RW.

  • <colspan> adalah span pada kolom, yaitu span yang bisa kita gunakan untuk menggabungkan beberapa kolom menjadi satu, misalnya ada 5 kolom yang akan kita gabungkan maka penulisan colspan=”5″. Hal ini bisa disebut juga merge pada program yang biasa digunakan untuk membuat table seperti ms excel.
  • <rowspan> adalah span pada baris, yaitu span yang bisa kita gunakan untuk menggabungkan beberapa baris menjadi satu, misalnya ada 5 baris yang akan kita gabungkan maka penulisannya rowspan="5". Hal ini bisa disebut juga merge pada program yang biasa digunakan untuk membuat table seperti ms excel.

Nah, dengan adanya tambahan judul baru seperti diatas maka artinya kita harus menambahkan table data nya juga supaya sesuai. Tinggal ditambah aja dibagian <td> nya sesuai kolom yang diperlukan dan luruskan sesuai judulnya.

Masih bingung ? Lihat : Video Tutorial Cara Bikin Tabel HTML CSS.

Mungkin masih kurang enak dilihat karena tidak diberikan style pada table ini, saya yakin setiap pengunjung mempunyai gaya berbeda-beda jadi tidak akan dijelaskan secara rinci tentang style table ini. Tapi untuk kalian yang baru belajar memberi style pada table, bisa lihat contoh dibawah ini:

Pada struktur table diatas akan diberi gaya seperti ini:

<style type="text/css">
  th {
    background-color: red; color: fff;
  }
  table {
    margin: auto;
  }
</style>

Ini hanya sekedar contoh saja, selanjutnya bisa kalian explore sendiri.

Selamat mencoba !

tunggu sebentar...
POS Lainnya:

Tinggalkan Komentar

avatar

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi