Binti Qomariah –
Assalamu’alaikum Wr. Wb.
Hai teman-teman,
kali ini saya akan membagikan tutorial saya mengenai Penggunaan HTML
yaitu di tabel. Oke, langsung saja ya ..
A. JUDUL KEGIATAN
HTML : Membuat Tabel Melalui HTML.
B. PENDAHULUAN
1. Pengertian
Menurut wikipedia, tabel adalah susunan data dalam baris dan kolom, atau mungkin dalam struktur yang lebih kompleks.
2. Maksud dan Tujuan
Untuk membuat data berupa tabel di browser.
3. Hasil yang Diharapkan
Dapat membuat tabel melalui HTML.
4. Latar Belakang
Diklaim mungkin sebagian dari kita belum mengerti dan belum tahu bagaimana membuat tabel melalui HTML yang bisa bisa di browser web.
C. ALAT DAN BAHAN
- Text Editor
- Laptop atau
Komputer
D. JANGKA WAKTU
PELAKSANAAN KEGIATAN
-/+ 15 menit.
E. TAHAPAN
PENGERJAAN
1. Buatlah sebuah
folder dengan nama (terserah kita). Tapi kali ini saya memberi nama
foder saya dengan nama html table.
Kemudian buat file bernama table.html.
2. Buka file table.html kita di text editor kita. Kemudian ketikkan :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3.
Kemudian sama seperti tutorial-tutorial sebelumnya, isikan tag
<title> sesuai dengan yang kita inginkan. Kali ini saya membuat
judul dengan nama Membuat Tabel.
4.
Kemudian di dalam tag <body>
kita masukkan script seperti di bawah ini :
<table border="2">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Binti Qomariah</td>
<td>XI RPL 1</td>
<td>Madiun</td>
</tr>
</table>
Tag <table> ini berfungsi sebagai penanda bahwa kita akan
membuat sebuah table di html. Di tag <table> kita membuat
border, karena jika tidak kita beri border, maka yang terjadi adalah
table tidak memiliki garis tepi. Jika penasaran, silakan di coba
dulu, oke.
Sedangkan tag <tr> (table row) berfungsi sebagai membuat table
agar bisa tersusun kebawah, tidak memanjang ke samping. Sedangkan,
tag <th> (table head) digunakan untuk menandai dan mengisi
bahwa text tersebut adalah dibagian kepala dan biasanya akan ditandai
dengan text di table head tersebut ter-bold. Dan yang terakhir adalah
tag <td>, tag ini merupakan tag yang digunakan untuk mengisi
table.
4. Langkah terakhir, save atau simpan file html ini dan kemudian buka
di browser kita. Maka, hasilnya akan seperti ini.
F. HASIL YANG
DIDAPATKAN
Dapat
mengimplementasikan penggunaan HTML Table.
G. MASALAH YANG
DIHADAPI
Sejauh ini belum ada
masalah yang saya hadapi dalam pembuatan HTML Table tersebut.
H. KESIMPULAN
Pembuatan table ini nantinya dapat diimplementasikan dan digunakan secara bersama dengan bahasa pemrograman PHP. Pembuatan table ini sangatlah mudah.
I. REFERENSI
ConversionConversion EmoticonEmoticon