Cara Membuat Tabel Html

Tanggal : 13 Aug 2018, Category : HTML, Create By : admin

Dalam membuat aplikasi berbasis website nantinya kita akan membutuhkan tampilan seperti tabel, untuk menampilkan data dari database, html menyediakan tag untuk membuatnya, yaitu dengan menggunakan tag html Table,. Dalam artikel ini kita akan membahas bagaimana membuat tabel dengan menggunakan html.

Struktur Tabel HTML

Dalam pembuatan tabel dengan html memiliki beberapa struktur tag yaitu:

  • Tag <tabledigunakan untuk memulai atau membuka tag tabel html
  • Tag <tr> dugunakan untuk membuat baris tabel
  • Tag <td> digunakan untuk membuat kolom tabel

Pada dasernya dari ketiga tag tabel html di atas sifatnya wajib, artinya jika anda ingin membuat tabel ketiga tag diatas wajib anda tulis, tetapi ada beberapa tag tabel yang tidak wajib seperti

  • Tag <thead> digunakan untuk membuat dan mengelompokan header atau judul dari masing - masing judul kolom
  • Tag <tbody> digunakan untuk membuat dan mengelompokan data isi dati tabel
  • Tag <th> digunakan untuk membuat baris dan kolom

Sebagai contoh pertama kita akan membuat tabel dengan menggunakan tiga tag pertama

<table width="522" border="1">
<tr style="background-color:#CCC">
<td width="29">No.</td>
<td width="248">Nama</td>
<td width="223">Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Nama 1</td>
<td>Alamat 1</td>
</tr>
<tr>
<td>2.</td>
<td>Nama 2</td>
<td>Alamat 2</td>
</tr>
</table>

Akan menghasilkan output sebagai berikut :

Kemudian untuk tag tabel kedua yang menggunakan tambahan tag thead dan tbody sebagai berikut:

<table width="522" border="1">
<thead style="background-color:#CCC">
<th>No.</th>
<th>Nama</th>
<th>Alamat</th>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Nama 1</td>
<td>Alamat 1</td>
</tr>
<tr>
<td>2.</td>
<td>Nama 2</td>
<td>Alamat 2</td>
</tr>
</tbody>
</table>

 akan menghasilkan outpus sabagai berikut

Dari kedua scirpt tag tabel di atas memiliki output yang sama hanya saja dalam pembuatan dengan menggunakan tag thead tidak perlu menambahkan tag tr untuk membuat baris dan kolom. Dan jika anda dalam pembuatan tabel ini hanya untuk view saja maka tidak masaiah tidak menggunakan tag thead dan tbody, hanya saja jika anda membuat tabel untuk membuat laporan dimana laporan anda setip lembarnya membawa kop atau judul tabel maka saya sarankan anda menggukan tag thead dan tbody, karna nantinya lebih mudah dalam pembuatan css maupun javascriptnya. 

Margin Kolom dan Baris Tabel HTML

Dalam tag tabel html juga di lengkapi dengan Margin (penggabungan baris atau kolom), yaitu dengan menggunakan properti colspan dan rowspanBerikut contohnya.

  • Colspan

Digunakan untuk menggabungkan dua atau lebih Kolom

<table width="200" border="1">
<tr>
<td colspan="3"><strong>Colspan</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Ouptut

  • Rowspan

Digunakan untuk mengabungkan dua atau lebih Baris

<table width="200" border="1">
<tr>
<td rowspan="2"><strong>Rowspan</strong></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

 Output

Cukup sekian materi tentang tag tabel html, jika ada pertanyaaan tentang tag tabel html silahkan komen di bawah terimakasih.

 


Keyword:
  • cara membuat tabel html
  • tabel html
  • tag tabel html
  • colspan tabel
  • rowspan tabel
  • margin tabel html
  • stuktur tabel html
  • kolom dan baris tabel html
  • thead tabel html
  • tbody tabel html

Artikel Lain

Beberapa Hal Yang Harus Anda Siapkan Jika Ingin Menjadi Programmer

Date : 03 Sep 2018, Category : Pemprograman Website, Create By : admin

Pada zaman sekarang banyak sekali perguruan tinggi yang sudah membuka jurusan atau ilmu mengenai komputer dari mulai pengembangan hardware dan software, Tak heran jika kalian kuliah di jurusan berkaitan dengan .....

Mempercantik Tabel Dengan Css

Date : 29 Dec 2018, Category : CSS, Create By : admin

Selamat datang di gudang ilmu aplikasi, tabel dalam pembuatan aplikasi berbasis wesbite pasti akan sering sekali di gunakan untuk menampilkan data atau dalam membuat laporan, akan tetapi jika kita hanya .....

Cara Membuat Store Prosedure Di Phpmyadmin Web Hosting

Date : 21 Jul 2018, Category : Database, Create By : admin

Selamat datang di website gudangilmuaplikasi.com, kali ini kami akan membahas Cara Membuat Store Prosedure Di PHPMyAdmin Web Hosting, langsung saja masuk ke phpmyadmin sever kalian masing - masing untuk contoh saya menggunakan localhost. .....