HTML (Hyper Text Markup Language) adalah sebuah bahasa markah atau tanda yang digunakan untuk membuat halaman web. HTML digunakan sebagai kerangka dari halaman web dan ditulis dalam berkas format ASCII. Untuk menghias halaman webnya dibutuhkan CSS atau Cascading Style Sheets. Kemudian agar halaman web tersebut dinamis maka dibutuhkan bahasa PHP, lalu agar halaman webnya lebih interaktif dibutuhkan bahasa JavaScript. Jadi HTML tidak bisa berjalan sendiri, keempat bahasa ini harus berjalan bersama agar terciptanya halaman web yang bagus, dinamis dan interaktif.
Kita perlu sebuah teks editor untuk membuatnya, Anda dapat menggunakan Notepad yang tersedia dalam sistem operasi Windows. Namun kali ini saya akan menggunakan Notepad++. Bagi yang belum punya silahkan download disini.
Untuk dapat membuat tabel dengan HTML, kita memerlukan setidaknya empat tag HTML, yaitu tag <table>, tag <th>, tag <tr>, dan tag <td>.
- Tag <table> digunakan untuk membuat tabel.
- Tag <th> singkatan dari Table Header, dapat digunakan untuk membuat header pada sebuah tabel.
- Tag <tr> adalah singkatan dari Table Row, berguna untuk membuat row atau baris.
- Tag <td> kepanjagan dari Table Data, berfungsi untuk membuat data atau kolom pada sebuah tabel.
Langkah-langkahnya :
Kita perlu sebuah teks editor untuk membuatnya, Anda dapat menggunakan Notepad yang tersedia dalam sistem operasi Windows. Namun kali ini saya akan menggunakan Notepad++. Bagi yang belum punya silahkan download disini.
Untuk dapat membuat tabel dengan HTML, kita memerlukan setidaknya empat tag HTML, yaitu tag <table>, tag <th>, tag <tr>, dan tag <td>.
- Tag <table> digunakan untuk membuat tabel.
- Tag <th> singkatan dari Table Header, dapat digunakan untuk membuat header pada sebuah tabel.
- Tag <tr> adalah singkatan dari Table Row, berguna untuk membuat row atau baris.
- Tag <td> kepanjagan dari Table Data, berfungsi untuk membuat data atau kolom pada sebuah tabel.
Langkah-langkahnya :
1. Buka Notepad++
2. Klik Menu Berkas => Baru (Ctrl+N)
3. Setelah muncul halaman baru, klik Menu Bahasa -> H -HTML
4. Ketikkan kode HTML berikut :
Jika kalian ingin kode HTMLnya, silahkan klik link di bawah ini :
<html>
<head>
<title>Menampilkan Table Di Halaman Web</title>
</head>
<body>
<center>
<h1>Table di Halaman Web</h1>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<th align="center">No</th>
<th align="center">Nama</th>
<th align="center">Jurusan</th>
<th align="center">Fakultas</th>
<th align="center">Alamat</th>
</tr>
<tr>
<td align="center">1</td>
<td>Muhamad Abdul Qodir</td>
<td align="center">Teknik Informatika</td>
<td align="center">Teknologi Informasi</td>
<td align="center">Serang</td>
</tr>
<tr>
<td align="center">2</td>
<td>Muhamad Abdul Majid</td>
<td align="center">Sistem Komputer</td>
<td align="center">Teknologi Informasi</td>
<td align="center">Serang</td>
</tr>
<td align="center">3</td>
<td>Siti Aisyah</td>
<td align="center">Sistem Informasi</td>
<td align="center">Teknologi Informasi</td>
<td align="center">Tangerang</td>
</tr>
</table>
</center>
</body>
</html>
Jika kalian ingin kode HTMLnya, silahkan klik link di bawah ini :
Depositfiles
Google Drive
Silahkan buka kode htmlnya menggunakan notepad.
Penjelasan :
<html></html>
<html> Adalah tag pembuka untuk membuat dokumen HTML
</html> Tag penutup dari dokumen html
<head>
<body></body>
Tag body berfungsi untuk menampilkan konten web, semua kode html yang ada di dalam tag body ini akan ditampilkan pada halaman web.
<center></center>
Semua kode html yang berada di dalam tag center ini posisinya akan ditengah secara horizontal atau mendatar.
<h1>Table di Halaman Web</h1>
Tag <h1> berfungsi untuk membuat heading atau judul pada sebuah teks. Sedangkan "Table di Halaman Web" adalah isi heading atau judulnya.
<table cellpadding="2" cellspacing="0" border="1">
Tag table berfungsi untuk membuat tabel.
cellpadding="2"
cellpadding adalah atribut dari tag table yang berfungsi untuk memberikan jarak antara teks atau objek lainnya yang ada di dalam sel dengan garis tabel, dan 2 adalah besarnya jarak dalam piksel.
cellspacing="0"
cellspacing merupakan atribut dari tag table yang berfungsi untuk memberikan jarak antara garis dalam tabel dan garis luar tabel, dan 0 adalah besar jaraknya dalam piksel. Karena isinya 0 maka garisnya hanya akan terlihat satu, coba kalian ubah dengan angka 5 lalu save dan buka di broswer maka akan terlihat jaraknya dan garisnya ada dua, yaitu garis dalam dan garis luar tabel.
border="1"
border adalah atribut yang berfungsi untuk menentukan ketebalan dari garis tabel, dan 1 adalah besar ketebalannya dalam piksel.
<tr>
align="center"
align adalah atribut dari tag <th> untuk meletakkan teks pada header menjadi di tengah secara mendatar.
<tr>
Kode HTML di atas akan menampilkan isi tabel pada baris pertama.
align="center"
align adalah atribut dari tag <td> untuk meletakkan teks pada sel tabel menjadi di tengah secara mendatar.
<tr>
Begitu juga seterusnya.
5. Simpan dengan ektensi .html atau .htm, contoh : Table.html
Google Drive
Silahkan buka kode htmlnya menggunakan notepad.
Penjelasan :
<html></html>
<html> Adalah tag pembuka untuk membuat dokumen HTML
</html> Tag penutup dari dokumen html
<head>
<title>Menampilkan Table Di Halaman Web</title>
</head>
<head></head>
Tag head ini berisi informasi meta sebuah halaman web.
<title>Menampilkan Table Di Halaman Web</title>
Tag title berfungsi untuk membuat judul halaman web yang nantinya akan tampil di tab browser dari halaman web tersebut. Dan kalimat "Menampilkan Table Di Halaman Web" adalah isi judulnya.<head></head>
Tag head ini berisi informasi meta sebuah halaman web.
<title>Menampilkan Table Di Halaman Web</title>
<body></body>
Tag body berfungsi untuk menampilkan konten web, semua kode html yang ada di dalam tag body ini akan ditampilkan pada halaman web.
<center></center>
Semua kode html yang berada di dalam tag center ini posisinya akan ditengah secara horizontal atau mendatar.
<h1>Table di Halaman Web</h1>
Tag <h1> berfungsi untuk membuat heading atau judul pada sebuah teks. Sedangkan "Table di Halaman Web" adalah isi heading atau judulnya.
<table cellpadding="2" cellspacing="0" border="1">
Tag table berfungsi untuk membuat tabel.
cellpadding="2"
cellpadding adalah atribut dari tag table yang berfungsi untuk memberikan jarak antara teks atau objek lainnya yang ada di dalam sel dengan garis tabel, dan 2 adalah besarnya jarak dalam piksel.
cellspacing="0"
cellspacing merupakan atribut dari tag table yang berfungsi untuk memberikan jarak antara garis dalam tabel dan garis luar tabel, dan 0 adalah besar jaraknya dalam piksel. Karena isinya 0 maka garisnya hanya akan terlihat satu, coba kalian ubah dengan angka 5 lalu save dan buka di broswer maka akan terlihat jaraknya dan garisnya ada dua, yaitu garis dalam dan garis luar tabel.
border="1"
border adalah atribut yang berfungsi untuk menentukan ketebalan dari garis tabel, dan 1 adalah besar ketebalannya dalam piksel.
<tr>
<th align="center">No</th>
<th align="center">Nama</th>
<th align="center">Jurusan</th>
<th align="center">Fakultas</th>
<th align="center">Alamat</th>
</tr>
Kode HTML diatas akan menampilkan header dari tabel tersebut.align="center"
align adalah atribut dari tag <th> untuk meletakkan teks pada header menjadi di tengah secara mendatar.
<tr>
<td align="center">1</td>
<td>Muhamad Abdul Qodir</td>
<td align="center">Teknik Informatika</td>
<td align="center">Teknologi Informasi</td>
<td align="center">Serang</td>
</tr>
align="center"
align adalah atribut dari tag <td> untuk meletakkan teks pada sel tabel menjadi di tengah secara mendatar.
<tr>
<td align="center">2</td>
<td>Muhamad Abdul Majid</td>
<td align="center">Sistem Komputer</td>
<td align="center">Teknologi Informasi</td>
<td align="center">Serang</td>
</tr>
Kode HTML di atas untuk menampilkan baris kedua.Begitu juga seterusnya.
5. Simpan dengan ektensi .html atau .htm, contoh : Table.html
6. Buka file html yang telah Anda buat dengan mengklik dua kali, atau buka dengan cara klik kanan -> Open with -> Silahkan pilih browser yang tersedia.
7/21/2017 09:49:00 PM
Tags :
HTML
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments