Saturday, September 21, 2013

Membuat Tabel Dengan HTML

HTML
Tabel penting peranya dalam halaman web, selain untuk menampilkan text atau gambar dalam format lajur dan kolom. Kita juga bisa menggunakan tabel untuk membantu me-layout tampilan halaman. Tapi dengan semakin berkembangnya bahasa pemrograman penggunaan table untuk membuat layout sudah sangat jarang sekali digunakan, seiring munculnya CSS yang dapat membantu dalam pembuatan halaman web.


Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table dalam HTML, digunakan tag-tag <TABLE>, <TR>, <TD>.



<TABLE> ….. </TABLE>
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • bgcolor – Mendefinisikan warna latar belakang
  • border – Mendefinisikan ukuran garis tepi (border) dalam satuan pixels.
  • cellpadding – Mendefinisikan spasi
  • cellspacing – Mendefinisikan spasi antara dua cells dalam satuan pixels.
  • width – Mendefinisikan ukuran tabel dalam pixels atau persentase.

<TR> ….. </TR>, untuk menentukan baris (table row)
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri
  • bgcolor – Mendefinisikan warna latar belakang pada baris (rows)
  • valign – Mendefinisikan perataan vertikal pada isi dari rows 


<TD> …… </TD>, untuk menampilkan data pada setiap sel tabel
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • background – Meletakkan image pada latar belakang tabel.
  • bgcolor – Mendefinisikan warna latar belakang
  • height – Mendefinisikan tinggi cells dalam pixels
  • valign – Perataan vertikal yaitu perataan pada top, middle atau bottom.
  • width – Mendefinisikan ukuran tabel dalam pixels atau persentase.


Script HTML untuk membuat sebuah TABEL

<html>
<head>
<title>Kartu Hasil Studi</title>
</head>
<body>
<table border="0" cellpadding="2">
<b><u>KARTU HASIL STUDI</u></b>
<tr>
<td>Nama </td>
<td>:</td>
<td>Yudhi K</td>
</tr>
<tr>
<td>NIM </td>
<td>:</td>
<td>2011</td>
</tr>
<tr>
<td>Prodi</td>
<td>:</td>
<td>Teknik Informatika S1</td>
</tr>
</table>
<br>
<table border="1" cellpadding="5">
<tr align="center">
<td rowspan="2"><b>No.</td>
<td rowspan="2"><b>Mata Kuliah</td>
<td rowspan="2"><b>SKS</td>
<td colspan="2"><b>Nilai</td>
<td rowspan="2"><b>Indeks</td>
</tr>
<tr>
<td><b>UTS</td>
<td><b>UAS</td>
</tr>
<tr align="center">
<td>1</td>
<td align="left">Pemrograman Java</td>
<td>3</td>
<td>75</td>
<td>80</td>
<td>B</td>
</tr>
<tr align="center">
<td>2</td>
<td align="left">Pemrograman Web</td>
<td>2</td>
<td>87</td>
<td>80</td>
<td>A</td>
</tr>
<tr align="center">
<td>3</td>
<td align="left">Jaringan Komputer</td>
<td>2</td>
<td>70</td>
<td>80</td>
<td>B</td>
</tr>
</table>
</body>
</html>


Hasilnya seperti berikut :


Selamat Mencoba ya :D

3 comments:
Write comments

Budayakan "Berkomentar" setelah mengunjungi artikel ini. Saran dan Komentar anda semoga dapat menjadi "Pelajaran & Motivasi" untuk menjadi lebih baik lagi !!
Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.