Belajar Tabel Tingkat 1

BELAJAR TABLE TINGKAT 1

Table pada website sangatlah dibutuhkan sekali untuk para programmer, terutama membuat sebuah laporan disetiap perusahaan, bahkan table tersebut bisa membuat sebuah layout Website atau template Website. 

Maka dari itu Coding santri akan memberikan tips and trik tahap demi tahap cara membuat table sacara mudah mulai dari dasar hingga dapat membuat template website menggunakan table.

Kita akan coba membuat sebuah biodata menggunakan Table. Tujannya agar biodata tersebut tampil rapih di browser, ikutilah langkah demi langkah dibawah ini.
Copy Paste Coding yang ada dibawah ini

<html>
<head>
<title>Table Tingkat 1</title>
</head>
<body>
<body>
<center>
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td colspan="3"><marquee>Biodata</marquee></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td>Santri Darussalam</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Desa Panusupan Cilongok Banyumas Jawa Tengah</td>
</tr>
<tr>
<td>Hoby</td>
<td>:</td>
<td>Membuat Website</td>
</tr>
<tr>
<td colspan="3"><marquee>Terima Kasih Telah Berkunjung Ke Blog CodingSantri.Blogspot.com</marquee></td>
</tr>
</table>
</center>
</body>
</html>
Keterangan : 
<table> : Ini adalah Tag untuk membuat table, didalam table terdapat atribut (dibawah dijelaskan sedikit mengenai atribut table) 
<tr>: tag tr Berfungsi untuk pindah baris pada table
<td>: tag td berfungsi untuk menetukan kolom pada table

Atribut table:
bgcolor : Warna Background
width, height: lebar dan tinggi tabel (dalam % atau pixel)
cellspacing : jarak antar cell
cellpadding : jarak teks ke cell
border : Ketebalan garis batas, jika borer 0= tanpa garis batas

Atribut td:
bgcolor: warna background
width, height: lebar dan tinggi tabel (dalam % atau pixel)
align (left, right, center): pengaturan posisi horisontal isi sel, rata kanan/kiri/tengah
valign (top, bottom, middle): pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau tengah
colspan : Memotong Kolom (untuk coding diatas colspan memotong sebanyak 3 kolom)
rospan : Memotong Baris
nowrap : mematikan word wrapping

untuk atribut bisa kamu tambahkan / dicoba - coba pada coding tingkat 1 yang sedang kamu buat.
Jika coding diatas dijalankan, tampilannya akan seperti Gambar dibawah ini:


apabila atribut border dibuat 0 maka garis table tidak akan muncul, perhatikan gambar dibawah ini, atribut border = 0

Oke Sampai disini tutorial tingkat 1 dari coding santri, sampai bertemu ditingkat selanjutnya Belajar Table Tingkat 2. Selamat Mengerjakan.



Subscribe to receive free email updates:

0 Response to "Belajar Tabel Tingkat 1"

Post a Comment