Artikel kali ini sobat LenDu25 akan menjelaskan mengenai Cara Membuat Tabel Menggunakan Skrip HTML. Pada tutorial HTML sebelumnya saya sudah menjelaskan tentang Cara Memasang Gambar pada Halaman Web Menggunakan Skrip HTML.
Dalam desain web tabel bisa kita gunakan untuk membagi tampilan web menjadi beberapa bagian. Misalnya untuk memisahkan header web dengan halaman posting atau artikel web. Bisa juga untuk membatasi dan merapikan antar widget sidebar pada web dan lain-lain.
Tidak hanya skrip untuk membuat tabel, sobat LenDu25 juga akan menjelaskan bagaimana cara menambah kolom dan baris pada tabel, memberi dan mengatur warna sampai style atau model tabel dan yang lainnya. Untuk lebih jelasnya silahkan teman-teman ikuti tutorial di bawah ini.
Ada tiga tag dasar untuk membuat tabel dengan skrip HTML, yaitu tag <table>, <tr> dan <td>.
Keterangan:
<table> : Digunakan untuk membuat tabel.
Atribut yang dapat digunakan terdiri dari.
align : Mengatur perataan. Rata kiri (left), tengah (center), dan kanan (right).
bgcolor : Memberi warna pada background tabel.
border : Mengatur lebar garis batas (border) tabel.
width : Mengatur ukuran tabel.
<tr> : Digunakan untuk membuat baris pada tabel.
Atribut yang dapat digunakan terdiri dari.
align : Mengatur perataan.
bgcolor : Mengatur warna background.
valign : Mengatur perataan vertikal, yaitu top, middle dan bottom.
<td> : Digunakan untuk membuat kolom pada tabel.
Atribut yang dapat digunakan terdiri dari.
align : Mengatur perataan.
background : Memasukkan gambar sebagai background pada kolom.
bgcolor : Memberi warna background pada kolom.
colspan : Menggabungkan 2 atau lebih kolom menjadi satu kolom.
height : Mengatur ukuran tinggi dalam pixel.
rowspan : Menggabungkan 2 atau lebih baris menjadi satu baris.
valign : Mengatur perataan vertikal.
width : Mengatur ukuran kolom dalam pixel atau persen.
Setelah teman-teman paham tag dasar dan atribut yang diperlukan untuk membuat tabel, selanjutnya mari kita buat tabel sederhana menggunakan skrip HTML.
Langkah-langkah:
Pertama buka program Notepad. Kemudian ketik atau langsung copy-paste skrip HTML di bawah ini ke dalam lembar kerja Notepad.
<html>
<head><title>Dasar Membuat Tabel dengan HTML</title></head>
<body>
<table border="1">
<tr>
<td>baris 1 kolom 1</td><td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td><td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>
Kemudian Save skrip di atas dengan format HTML dan klik pilihan All Files. Lalu cek hasilnya dengan menggunakan program browser milik teman-teman. Hasilnya akan seperti pada gambar di bawah ini.
Intinya tag <tr> dan <td> harus berada diantara tag <table>...</table>. Untuk membuat baris baru gunakan tag <tr>...</tr>. Sedangkan untuk membuat kolom baru teman-teman bisa menambah tag <td>...</td> di dalam tag <tr>...</tr>.
Selanjutnya kita buat tabel yang lebih menarik dengan menambahkan atribut-atribut yang ada di atas.
<html>
<head><title>Dasar Membuat Tabel dengan HTML2</title></head>
<body>
<table align="center" border="4" width="60%" height="30%" bgcolor="yellow">
<tr>
<td bgcolor="red" height="25%">baris 1 kolom 1</td><td colspan="2" bgcolor="light blue" align="center">baris 1 kolom 2 dan 3</td>
</tr>
<tr bgcolor="green" valign="top">
<td>baris 2 kolom 1</td><td rowspan="2" align="center">baris 2 dan 3 kolom 2</td><td>baris 2 kolom 3</td>
</tr>
<tr>
<td height="5%">baris 3 kolom 1</td><td>baris 3 kolom 3</td>
</tr>
</table>
</body>
</html>
Lalu save skrip di atas dengan format html dan pilih All Types. Hasilnya akan seperti gambar di bawah ini.
Sekian tutorial dari sobat LensaDunia25, semoga tutorial kali ini dapat bermanfaat bagi teman-teman semua. Terus kunjungi LensaDunia25.blogspot.com untuk mendapatkan tutorial menarik lainnya. Terimakasih.
Dalam desain web tabel bisa kita gunakan untuk membagi tampilan web menjadi beberapa bagian. Misalnya untuk memisahkan header web dengan halaman posting atau artikel web. Bisa juga untuk membatasi dan merapikan antar widget sidebar pada web dan lain-lain.
Tidak hanya skrip untuk membuat tabel, sobat LenDu25 juga akan menjelaskan bagaimana cara menambah kolom dan baris pada tabel, memberi dan mengatur warna sampai style atau model tabel dan yang lainnya. Untuk lebih jelasnya silahkan teman-teman ikuti tutorial di bawah ini.
Ada tiga tag dasar untuk membuat tabel dengan skrip HTML, yaitu tag <table>, <tr> dan <td>.
Keterangan:
<table> : Digunakan untuk membuat tabel.
Atribut yang dapat digunakan terdiri dari.
align : Mengatur perataan. Rata kiri (left), tengah (center), dan kanan (right).
bgcolor : Memberi warna pada background tabel.
border : Mengatur lebar garis batas (border) tabel.
width : Mengatur ukuran tabel.
<tr> : Digunakan untuk membuat baris pada tabel.
Atribut yang dapat digunakan terdiri dari.
align : Mengatur perataan.
bgcolor : Mengatur warna background.
valign : Mengatur perataan vertikal, yaitu top, middle dan bottom.
<td> : Digunakan untuk membuat kolom pada tabel.
Atribut yang dapat digunakan terdiri dari.
align : Mengatur perataan.
background : Memasukkan gambar sebagai background pada kolom.
bgcolor : Memberi warna background pada kolom.
colspan : Menggabungkan 2 atau lebih kolom menjadi satu kolom.
height : Mengatur ukuran tinggi dalam pixel.
rowspan : Menggabungkan 2 atau lebih baris menjadi satu baris.
valign : Mengatur perataan vertikal.
width : Mengatur ukuran kolom dalam pixel atau persen.
Setelah teman-teman paham tag dasar dan atribut yang diperlukan untuk membuat tabel, selanjutnya mari kita buat tabel sederhana menggunakan skrip HTML.
Langkah-langkah:
Pertama buka program Notepad. Kemudian ketik atau langsung copy-paste skrip HTML di bawah ini ke dalam lembar kerja Notepad.
<html>
<head><title>Dasar Membuat Tabel dengan HTML</title></head>
<body>
<table border="1">
<tr>
<td>baris 1 kolom 1</td><td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td><td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>
Kemudian Save skrip di atas dengan format HTML dan klik pilihan All Files. Lalu cek hasilnya dengan menggunakan program browser milik teman-teman. Hasilnya akan seperti pada gambar di bawah ini.
Selanjutnya kita buat tabel yang lebih menarik dengan menambahkan atribut-atribut yang ada di atas.
<html>
<head><title>Dasar Membuat Tabel dengan HTML2</title></head>
<body>
<table align="center" border="4" width="60%" height="30%" bgcolor="yellow">
<tr>
<td bgcolor="red" height="25%">baris 1 kolom 1</td><td colspan="2" bgcolor="light blue" align="center">baris 1 kolom 2 dan 3</td>
</tr>
<tr bgcolor="green" valign="top">
<td>baris 2 kolom 1</td><td rowspan="2" align="center">baris 2 dan 3 kolom 2</td><td>baris 2 kolom 3</td>
</tr>
<tr>
<td height="5%">baris 3 kolom 1</td><td>baris 3 kolom 3</td>
</tr>
</table>
</body>
</html>
Lalu save skrip di atas dengan format html dan pilih All Types. Hasilnya akan seperti gambar di bawah ini.
