Cara Membuat Tabel dalam html mengguanakan notepad++
HTML - Cara Membuat Tabel dalam html mengguanakan notepad++
contoh tabel
bila tadi kamu sudah membuat web statis yang sederhana ,sekarang kita buat tabel dalam html tersebut
Tabel ini hampir sama dengan perintah div, perbedaannya div adalah pembagian bidang yang dapat diisi berbagai elemen sedangkan tabel adalah himpunan kotak yang memiliki border garis berdasarkan baris dan kolom. Hampir sama dengan cara membuat kotak, perbedaannya table adalah kumpulan kotak.
HTML banyak sekali digunakan untuk menyusun objek, gambar, tulisan, layout, bidang ruang, tampilan halaman dan sebagainya. Apabila anda sedang mempelajari pemrograman web dengan PHP, maka tidak akan terlepas dari HTML dan database. Dari database tersebut, tentu berbentuk sebuah tabel. Oleh karena itu sangat penting bagi kita untuk mengetahui kode yang merupakan elemen pemasangan sebuah tabel.
Tabel ini hampir sama dengan perintah div, perbedaannya div adalah pembagian bidang yang dapat diisi berbagai elemen sedangkan tabel adalah himpunan kotak yang memiliki border garis berdasarkan baris dan kolom. Hampir sama dengan cara membuat kotak, perbedaannya table adalah kumpulan kotak.
HTML banyak sekali digunakan untuk menyusun objek, gambar, tulisan, layout, bidang ruang, tampilan halaman dan sebagainya. Apabila anda sedang mempelajari pemrograman web dengan PHP, maka tidak akan terlepas dari HTML dan database. Dari database tersebut, tentu berbentuk sebuah tabel. Oleh karena itu sangat penting bagi kita untuk mengetahui kode yang merupakan elemen pemasangan sebuah tabel.
Terlebih dahulu kita akan mengenal perintah kode-kode yang berhubungan dengan tabel.
Perintah Dasar Membuat Tabel di HTML :
<table border="1">
<tr>
<th>Nama</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>raga dhafi</td>
<td>19 - 08 - 1997</td>
</tr>
</table>
<tr>
<th>Nama</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>raga dhafi</td>
<td>19 - 08 - 1997</td>
</tr>
</table>
kalo melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah gini :
<table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
<tr>..</tr> : digunakan sebagai tanda awal baris,nah.. tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel,kalo th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data,kalo td kependekan dari table data
Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.
Atribut pendukung Table :
align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
border-color : untuk memberi tebal garis dengan warna
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom
nah..ini adalah contoh dari tabel dengan beberapa kode warna dengan atribut :
karna pemula dan buat web statis,coba copy script di bawah ini ke notepad terus seperti biasa,kalau sudah di copy save data dengan format ".html" contoh : cobaan.html terus typenya all files,and click save ,jangan lupa savenya di desktop aja dulu
<table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
<tr>..</tr> : digunakan sebagai tanda awal baris,nah.. tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel,kalo th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data,kalo td kependekan dari table data
Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.
Atribut pendukung Table :
align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
border-color : untuk memberi tebal garis dengan warna
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom
nah..ini adalah contoh dari tabel dengan beberapa kode warna dengan atribut :
nih scriptnya
<html>
<table width="510" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="58" rowspan="3" bgcolor="#00CCCC">Rowspan 3</th>
<th width="79" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telp.</th>
<th colspan="2" bgcolor="#FF9900">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">ALI</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">11211</td>
<td width="92" bgcolor="#9966FF"> </td>
<td width="92" bgcolor="#9966FF"> </td>
</tr>
<tr>
<td bgcolor="#FFFF00">UDIN</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">23232</td>
<td bgcolor="#FFFF00"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
</table>
<tr>
<th width="58" rowspan="3" bgcolor="#00CCCC">Rowspan 3</th>
<th width="79" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telp.</th>
<th colspan="2" bgcolor="#FF9900">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">ALI</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">11211</td>
<td width="92" bgcolor="#9966FF"> </td>
<td width="92" bgcolor="#9966FF"> </td>
</tr>
<tr>
<td bgcolor="#FFFF00">UDIN</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">23232</td>
<td bgcolor="#FFFF00"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
</table>
</html>
nah...tanda yang di tebelin itu tulisannya berati bisa di rubah contoh :
~yang tulisan pake pager berarti bisa diganti pake script warna yang lain contoh #fffffff berarti warna putih gtu
~yang tulisan ali,udin,jalan rencong,jln ijo itu bisa di ganti sama nama atau alamat yang akan kamu tulis
~yang center bisa di ganti sesuai aligment yang kamu mau
~yang width or height gitu bisa di ganti sesuai ketinggian sama lebar yang kamu inginkan
~yang center bisa di ganti sesuai aligment yang kamu mau
~yang width or height gitu bisa di ganti sesuai ketinggian sama lebar yang kamu inginkan
kalo udah beres simpan & clik hasilnya :D
Tabel memang sangat banyak digunakan mulai dari Microsoft Excell, Microsoft Word, Microsoft Powerpoint, Adobe Dreamweaver dan lainnya. Demikian tutorial dan dasar cara membuat table html dengan css. Semoga membantu kamu dalam membuat website, design blog, laporan kerja, dll.
Komentar
Posting Komentar