Custom Search

Pages

Sunday, July 15, 2012

Cara Membuat Tabel dengan HTML

Diposkan oleh La Ode Amir Jaya
Di beberapa program HTML Editor ada yang sudah menyertakan toolbar tabel untuk membuat tabel, namun ada juga dan mungkin banyak yang tidak menyertakan toolbar tabel. Selain itu, dalam membuat blog, umumnya juga tidak tersedia toolbar tabel. Akan berarti bukan berarti tidak bisa menggunakan tabel, yakni tentu saja dengan menggunakan bahasa pemrograman html. Dalam html, sintaks tabel adalah sebagai berikut:

<table>
<tr>
<td> ..................................</td>
<tr/>
</table>

Keterangan:
  • <tabel>..............</table> menandakan bahwa kita akan membuat tabel
  • <tr>.....................</tr> mendefenisikan baris tabel. 1 sintaks <tr>....................</tr> akan membuat 1 baris tabel. 2 sintaks <tr>....................</tr> akan membuat 2 baris tabel, begitu seterusnya.
  • <td>..................</td> mendefenisikan kolom tabel. 1 sintaks <td>................</td> akan membuat 1 kolom tabel. 2 sintaks <td>................</td> akan membuat 2 kolom tabel, begitu terusnya.
Contoh:
Kita akan membuat tabel dengan jumlah kolom adalah 4 kolom dan jumlah baris adalah 3 baris, maka sintaksnya adalah:

<table>
<tr>
<td>Isi kolom 1 baris 1</td>
<td>Isi kolom 2 baris 1</td>
<td>Isi kolom 3 baris 1</td>
<td>Isi kolom 4 baris 1</td>
</tr>

<tr>
<td>Isi kolom 1 baris 2</td>
<td>Isi kolom 2 baris 2</td>
<td>Isi kolom 3 baris 2</td>
<td>Isi kolom 4 baris 2</td>
</tr>

<tr>
<td>Isi kolom 1 baris 3</td>
<td>Isi kolom 2 baris 3</td>
<td>Isi kolom 3 baris 3</td>
<td>Isi kolom 4 baris 3</td>
</tr>
</table>

Hasilnya:
Isi kolom 1 baris 1 Isi kolom 2 baris 1 Isi kolom 3 baris 1 Isi kolom 4 baris 1
Isi kolom 1 baris 2 Isi kolom 2 baris 2 Isi kolom 3 baris 2 Isi kolom 4 baris 2
Isi kolom 1 baris 3 Isi kolom 2 baris 3 Isi kolom 3 baris 3 Isi kolom 4 baris 3


Tampak pada contoh di atas bahwa garis (border) tabel tidak tampak, dan untuk menampakkan garis tabel, kita harus menambahkan atribut border pada tabel. Sintaksnya:

border="angka" contoh border="1"

Contoh:
<table border="1">
<tr>
<td>Isi kolom 1 baris 1</td>
<td>Isi kolom 2 baris 1</td>
<td>Isi kolom 3 baris 1</td>
<td>Isi kolom 4 baris 1</td>
</tr>

<tr>
<td>Isi kolom 1 baris 2</td>
<td>Isi kolom 2 baris 2</td>
<td>Isi kolom 3 baris 2</td>
<td>Isi kolom 4 baris 2</td>
</tr>

<tr>
<td>Isi kolom 1 baris 3</td>
<td>Isi kolom 2 baris 3</td>
<td>Isi kolom 3 baris 3</td>
<td>Isi kolom 4 baris 3</td>
</tr>
</table>

Hasilnya:

Isi kolom 1 baris 1 Isi kolom 2 baris 1 Isi kolom 3 baris 1 Isi kolom 4 baris 1
Isi kolom 1 baris 2 Isi kolom 2 baris 2 Isi kolom 3 baris 2 Isi kolom 4 baris 2
Isi kolom 1 baris 3 Isi kolom 2 baris 3 Isi kolom 3 baris 3 Isi kolom 4 baris 3

Mudah bukan! Selamat Mencoba!

Nantikan posting selanjutnya mengenai cara membuat tabel dengan html ini. 

G+

6 komentar:

Direktori Penerjemah Indonesia said...

Kalau saya pingin didalam tabel tsb isinya gambar, berarti kode html gambar dipasangnya diantara "td" dan "/td" ya mas?
Mohon bimbingannya..dan thanks sharing bermanfaatnya.

ayam kampung said...

mantap, ini yang saya cari, trims

Muhtar Lutfi said...

makasih gan,,,tapi gimana ngatur lebar dan panjangnya ya?
kapan2 mampir ke blog saya
:)

Studio Jingga said...

Terima kasih informasinya, benar-benar sangat berguna.

Vertical Blind said...

thanks share ilmu nya, buat tambah2 pengetahuan tentang html.

jily said...

tank gan..

Post a Comment

Silahkan tinggalkan komentar Anda. Jangan menyertakan url/nama domain dalam isi komentar. Komentar Anda sebaiknya berhubungan dengan artikel yang dibahas. Url/blog yang mengandung unsur pornografi, pornoaksi, obat-obatan/resep obat, perdagangan senjata api/tajam, yang berhubungan dengan download MP3/MP4/Video, atau url/blog/website yang melanggar serta yang melakukan SPAM termasuk blog/web yang membajak isi dalam website ini tanpa menyertakan url www.naskah.net akan dihapus.