Terlebih dahulu kita akan mengenal perintah kode-kode yang berhubungan dengan tabel.
Perintah Dasar Membuat Tabel di HTML :
Perintah Dasar Membuat Tabel di HTML :
<table border="1">
<tr>
<th>Nama</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>Aditya Prayoga</td>
<td>19 - 08 - 199</td>
</tr>
</table>
<tr>
<th>Nama</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>Aditya Prayoga</td>
<td>19 - 08 - 199</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
<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
Berikut ini adalah contoh tabel beserta codingnya...
Nah untuk codingnya silahkan dilihat dibawah ini
<head>
</head>
<body>
<center>
<h1> Daftar Nilai Siswa </h1>
<hr color="blue">
<font face="Lucida Handwriting">
<table border="3px" cellspacing="4px" cellpadding="4px"]>
<tr bgcolor="red">
<th rowspan="2">No</th>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
<th colspan="3">Kehadiran</th>
</tr>
<tr bgcolor="red">
<th>Ulangan</th>
<th>UTS</th>
<th>UAS</th>
<th>S</th>
<th>I</th>
<th>A</th>
</tr>
<tr bgcolor="Yellow">
<td>1</td>
<td>Aditya Prayoga</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr bgcolor="darkgreen">
<td>2</td>
<td>Sukirman</td>
<td>100</td>
<td>90</td>
<td>80</ td>
<td>7</td>
<td>6</td>
<td>5</td>
</center>
</body>
</html>
~Untuk <center>...</center> bisa di ganti sesuai aligment yang kamu mau
~Untuk width or height itu bisa di ganti sesuai ketinggian sama lebar yang kamu inginkan
kalo udah beres simpan & clik hasilnya :D Semoga bermanfaat
Tidak ada komentar:
Posting Komentar