Part 2 - Membuat Tabel Dalam HTML
Tabel merupakan kumpulan dari beberapa field dan record, Field sendiri merupakan kumpulan dari karakter yang membentuk sebuah arti biasanya field dalam tabel itu seperti No Item, Nama Item, Jumlah Item dan lainnya. Untuk Record Sendiri merupakan satuan atau jumlah baris dari banyaknya field.
Kali ini akan membahas cara membuat Tabel di dalam HTML. Pembuatan tabel ini bertujuan untuk membuat susunan data yang rapih dan mudah terbaca seperti contohnya Tabel Data Buku.
Kali ini akan membahas cara membuat Tabel di dalam HTML. Pembuatan tabel ini bertujuan untuk membuat susunan data yang rapih dan mudah terbaca seperti contohnya Tabel Data Buku.
Dimana pada tabel tersebut terdapat field-field seperti No, Judul, Kategori dan Keterangan. Pembuatan Tabel sangat sering digunakan dalam membangun 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>.
Tag <table> </table>
- 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
Tag <tr> </tr>
Tag ini berfungsi untuk menentukan baris (table row).
Memiliki beberapa atribut, diantaranya :
- 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
Tag <td> </td>
Tag ini berfungsi untuk menampilkan data pada setiap sel tabel.
Memiliki beberapa atribut, diantaranya :
Outputnya seperti ini :
Semoga artikel ini bermanfaat dan Penulis juga masih terus belajar dan Maaf jika masih banyak kekurangan. Apabila ada yang kurang jelas dan ingin di pertanyakan, bisa langsung tulis di kolom komentar di bawah ini.
Salam Coder
Penulis
www.dhiecoderweb.com
- 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.
<html>
<head>
<title> MEMBUAT TABEL </title>
</head>
<body>
<h2> KARTU HASIL STUDI (KHS) </h2>
<table border="0" cellpadding="2">
<tr>
<td>Nama</td>
<td>:</td>
<td>Yutdhi Kristiyantho</td>
</tr>
<tr>
<td>NIM</td>
<td>:</td>
<td>2016</td>
</tr>
<tr>
<td>Prodi</td>
<td>:</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td>Yutdhi Kristiyantho</td>
</tr>
</table>
<br>
<table border="1" cellpadding="5">
<tr align="center">
<td rowspan="2"><b>No.</b></td>
<td rowspan="2"><b>Mata Kuliah</b></td>
<td rowspan="2"><b>SKS</b></td>
<td colspan="2"><b>Nilai</b></td>
<td rowspan="2"><b>Indeks</b></td>
</tr>
<tr>
<td><b>UTS</b></td>
<td><b>UAS</b></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>
Outputnya seperti ini :
Semoga artikel ini bermanfaat dan Penulis juga masih terus belajar dan Maaf jika masih banyak kekurangan. Apabila ada yang kurang jelas dan ingin di pertanyakan, bisa langsung tulis di kolom komentar di bawah ini.
Salam Coder
Penulis
www.dhiecoderweb.com
.png)
.png)
Post a Comment