..::: Selamat Datang di Blog Ilmu Komputer-1313 :::..

3.3 MEMAHAMI FORMAT TABEL HALAMAN WEB

Pernahkah anda melihat sebuah halaman web yang didalamnya terdapat sebuah tabel. Bagaimana cara membuatnya? Kali ini saya ingin mempraktekkan dan memberikan pengertian tentang tag yang berfungsi dalam pembuatan tabel. Fungsi dari tabel sendiri adalah untuk mengatur agar informasi dari halaman web dapat disajikan dengan tampilan yang baik untuk dibaca. Berikut yang harus anda pahami tag yang berfungsi untuk pembuatan sebuah tabel:
Tag
Fungsi
<table>…</table>Tag harus ditulis yang berguna sebagai pembuka dan penutup sebuah tabel
<caption>…</caption>Membuat judul tabel
<th>…</th>Membuat judul kolom
<tr>…</tr>Menentukan sebuah baris dalam tabel
<td>…</td>Membuat sel data

Setelah anda mengerti tag diatas, langsung saja yukk kita praktekkan !!

  1. Siapkan Text Editor (Notepad++,Adobe Dreamweaver, dll). Disini saya memakai Notepad++
  2. Siapkan Browser (Mozilla Firefox, Google Chrome, dll).

Membuat Tabel Sederhana dengan HTML

Berikut source code membuat tabel sederhana :
<html>
<head>
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table>
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
Setelah anda mengetik source code diatas, kemudian simpan dengan nama filemembuattabel.html.
Jalankan file membuattabel.html klik 2x file tersebut.
Maka untuk tampilan adalah berikut ini :
Membuat Tabel di HTML

Memberi Garis dan Warna Background Tabel

Dari contoh diatas yang sudah saya praktekkan tabel belum memiliki garis. Untuk membuat sebuah garis anda bisa menggunakan atribut border pada tag <table>, contoh sebagai berikut :
<table border=”bilangan untuk border“>
Masih menggunakan file index.html yang telah dibuat tadi. Kemudian disini saya akan setting garis dengan angka 1, maka yang harus dilakukan hanya menambahkan pada tag <table> menjadi seperti berikut :
<table border=”1”>
<html>
<head>
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table border=”1″>
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
Setelah anda edit kemudian save kembali pekerjaanya. Jalankan kembali file membuattabel.html ke web browser anda. Maka tampilan akan menjadi seperti ini :
Mudah bukan? Setelah anda mampu membuat sebuah garis di tabel. Ilmu selanjutnya adalah pemberian warna latar belakang di tabel. Caranya hanya menambahkan atribut bgcolor pada tag <table>.
<table border=”1″ bgcolor=”yellow”>
Masih menggunakan file membuattabel.html yang telah dibuat tadi. Tambahkan atribut bgcolor pada tag <table> seperti diatas.
<html>
<head>
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table border=”1″ bgcolor=”yellow”>
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
Simpan dan jalankan file membuattabel.html di web browser anda. Jadilah untuk tampilan setelah diberi warna latar belakang adalah sebagai berikut :

Membuat Tabel di HTML
Setelah anda mengetik source code diatas, kemudian simpan dengan nama filemembuattabel.html. Jalankan file membuattabel.html klik 2x file tersebut. Maka untuk tampilan adalah berikut ini : Membuat Tabel di HTML Memberi Garis dan Warna Background Tabel Dari contoh diatas yang sudah saya praktekkan tabel belum memiliki garis. Untuk membuat sebuah garis anda bisa menggunakan atribut border pada tag
Daftar Teman Saya
NamaJenis Kelamin
YogoLaki-laki
FungkyLaki-laki

contoh sebagai berikut :
Masih menggunakan file index.html yang telah dibuat tadi. Kemudian disini saya akan setting garis dengan angka 1, maka yang harus dilakukan hanya menambahkan pada tag
menjadi seperti berikut :
Setelah anda edit kemudian save kembali pekerjaanya. Jalankan kembali file membuattabel.html ke web browser anda. Maka tampilan akan menjadi seperti ini : Mudah bukan? Setelah anda mampu membuat sebuah garis di tabel. Ilmu selanjutnya adalah pemberian warna latar belakang di tabel. Caranya hanya menambahkan atribut bgcolor pada tag
Daftar Teman Saya
NamaJenis Kelamin
YogoLaki-laki
FungkyLaki-laki
.
Masih menggunakan file membuattabel.html yang telah dibuat tadi. Tambahkan atribut bgcolor pada tag
seperti diatas.
Simpan dan jalankan file membuattabel.html di web browser anda. Jadilah untuk tampilan setelah diberi warna latar belakang adalah sebagai berikut : Membuat Tabel di HTML
Daftar Teman Saya
NamaJenis Kelamin
YogoLaki-laki
FungkyLaki-laki