Cara Membuat Tabel Di HTML > Baca Selengkapnya

pembahasan tabel cukup panjang, sebelumnya harus paham dulu dasa-dasarnya yg kemaren kemaren,saya anggap udah paham ya, dari mana memulai pebuatan tabel ? ya tentu saja dari tag tabel ^_^
1. Tag <table> tag ini punya beberapa atribut penting diantaranya
    a. width (untuk mengatur lebar tabel pada halaman, satuan % atau px) contoh : width="100%"
    b. border (untuk memberikan garis pada tabel) contoh : border="2"
    c. bgcolor (memberikan background warna pada tabel) contoh : bgcolor="red"
    e. cellpadding (untuk memberikan jarak teks)
    f. cellspacing(untuk menentukan jarak bagian sel terhadap tepi dalam bingkai)


tidak hanya tag <table> juga ada tag yang di perlukan diantaranya
2. tag <tr> tag ini digunakan untuk membentuk baris pada tabel, sekedar memberi tahu bagi yang belum tahu, baris itu yang kebawah bukan yang kesamping.

3. tag <td> ini kalau kalian browsing fungsinya untuk mengisi sel data,tapi bagi saya ini fungsinya untuk membuat kolom, di letakan di dalam tag <td> contoh, jika kita ingin membuat tabel dengan 2 baris dan 3 kolom adalah kita buat dua tag tr seperti ini <tr></tr> <tr></tr> itu untuk membuat 2 baris kebawah, lalu kita masukan tag td di dalam tag tr nya jadinya seperti ini
<tr>  <td>isi 1</td>  <td>isi 2</td>  <td>isi 3</td>  </tr>
<tr>  <td>isi 4</td>  <td>isi 5</td>  <td>isi 6</td>  </tr>
untuk mengisi sel datanya kita masukan di dalam tag <td> seperti ini <td>isinya</td>

bisa kita lihat dengan jelas kan, saya anggap sudah paham mengenai peTDan.
4. tag <th> untuk membuat judul kolom, nah ini sebagai pengganti tag <td> tapi khusus di letakan di atas karna tulisan akan menebal sebagaimana layaknya judul.
untuk pemakaiannya bisa kalian coba dari contoh sebelumnya, gantikan tag <td> pada baris pertama dengan tag <th>.

terlihat jelaskan perbedaan tag td dan th.
5. colspan dan rowspan, ini sebenarnya bukan tag, tapi atribut pada tag <td>
fungsinya colspan untuk menggabungkan kolom, kalau rowspan untuk menggabungkan baris,
contoh : awalnya seperti ini
<tr>  <td>isi 1</td>  <td>isi 2</td>  <td>isi 3</td>  </tr>
<tr>  <td>isi 4</td>  <td>isi 5</td>  <td>isi 6</td>  </tr>
diatas ini ada 3 kolom 1 baris kita ingin menggabungkan 2 kolom pertama(di ambil dari contoh sebelumnya), maka kodenya berubah jadi seperti ini
<tr>  <td colspan="2">isi 1 dan 2</td><td>isi 3</td>  </tr>
<tr>  <td>isi 4</td>  <td>isi 5</td>  <td>isi 6</td>  </tr>

untuk rowspan contoh sama dengan contoh sebelumnya
ada 2 baris dan 3 kolom, kita ingin menggabungkan baris pertama pada kolom pertama seperti ini

maka kodenya berubah jadi seperti ini
<tr>  <td rowspan="2">isi 1 dan 4</td>  <td>isi 2</td>  <td>isi 3</td>  </tr>
<tr>                                    <td>isi 5</td>  <td>isi 6</td>  </tr>
6. Link
link itu dibuat dengan tag anchor <a> dengan atribut "href" dan nilai atribut dari href adalah halaman yang akan di masukan pada link, untuk cara memanggil halaman nya sama dengan saat kita memanggil gambar pada tag <img> . contoh, buat 1 file html dengan nama panggil.html , bisa pakai dari contoh contoh diatas , lalu buat lagi link.html dan isi dengan kode seperti ini pada bagian body
ini adalah contoh link untuk menuju ke halaman panggil ,klik <a href="panggil.html">disini</a>
maka output nya seperti ini

gimana ?? easy kan ? easy dong kan cuma tabel sama link doang, nah untuk latihan bisa kalian coba buat seperti ini

itu hanya tabel yang di beri atribut bgcolor pada tabel dan pada tag <td> dan yang dibawahnya hanya permainan font saja merubah atribut nya.
lalu di bawahnya lagi hanya pemberiah tag h1 dan link(tag anchor).

wokehh next saya share tentang web dinamis, wokey broh.
semoga bermanfaat , sekian aurakasih..
.
.
.
.
#Credit : malkulsec

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.