 |
Gambar 1. Colspan dan Rowspan
Sumber : Google.com
|
 |
| Gambar 2.1 Listing Program TAG Table (1) |
 |
| Gambar 2.2 Listing Program TAG Table (2) |
 |
| Gambar 2.3 Listing Program TAG Table (3) |
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan
TAG Tabel</title>
</head>
<body>
<h1><font color=white>Belajar
Tag Gambar dengan Visual Studio Code<font></h1>
<table align=center border="4" style=background-color:rgb(0,174,255)>
<tr style=background-color:black><td colspan="3"><center><b>Daftar Mahasiswa
PENS</b></center></td></tr>
<tr>
<td>NRP</td>
<td>1103181034</td>
<td rowspan="18"><img src="ratna.jpeg" width=200 high=200/></td>
</tr>
<tr>
<td>Nama</td>
<td>Ratna Anisa Ramadani</td>
</tr>
<tr>
<td>Program</td>
<td>D3</td>
</tr>
<tr>
<td>Jurusan</td>
<td>Elektronika</td>
</tr>
<tr>
<td>Kelas</td>
<td>1</td>
</tr>
<tr>
<td>Paralel</td>
<td>B</td>
</tr>
<tr>
<td>Dosen_Wali</td>
<td>Madyono</td>
</tr>
<tr>
<td>TanggalLahir</td>
<td>01-01-2000</td>
</tr>
<tr>
<td>TempatLahir</td>
<td>Sidoarjo</td>
</tr>
<tr>
<td>Tanggal Masuk</td>
<td>14-05-2018</td>
</tr>
<tr>
<td>Jenis_Kelamin</td>
<td>Perempuan</td>
</tr>
<tr>
<td>Warga</td>
<td>WNI</td>
</tr>
<tr>
<td>Agama</td>
<td>Islam</td>
</tr>
<tr>
<td>Golongan_Darah</td>
<td>B</td>
</tr>
<tr>
<td>Alamat</td>
<td>DESA WATESARI
DUSUN JATISARI RT 01 RW 01 KECAMATAN BALONGBENDO / 61263</td>
</tr>
<tr>
<td>Kota_Tempat_Tinggal</td>
<td>Kabupaten Sidoarjo</td>
</tr>
<tr>
<td>No Telp</td>
<td>08233859181</td>
</tr>
<tr>
<td>Jalur_Penerimaan</td>
<td>PMDK</td>
</tr>
</table>
</body>
</html>
Berikut hasil keluarannya.
Penjelasan:
 |
| Gambar 2.4 Hasil Listing Program |
2. <tr>...</tr> menunjukkan baris. Misal kalian ingin membuat tabel yang terdiri dari 2 baris, maka kalian harus menuliskan fungsi ini sebanyak 2 kali.
3. <td>...</td> menunjukkan kolom. Biasanya letak fungsi ini di tengah-tengah fungsi <tr>...</tr>.
4. align=center jika ingin tabel berada di tengah-tengah seperti tampilan di atas, biasanya ditambahkan fungsi ini. Letaknya di dalam fungsi <table...>. Biasanya jika fungsi ini tidak ditambahkan, maka tabel otomatis berada di sisi kiri.
5. border="4" memberikan ketebalan garis pada tabel. Kalian bisa mengubah besar angkanya, tidak harus 4.
6. style=background-color:rgb(0,174,255) fungsi ini juga letaknya sama seperti fungsi No. 4 dan 5, fungsinya untuk memberikan background warna pada tabel. Tidak ada spasi pada penulisan rgb.
7. <center>...</center> untuk membuat teks berada di tengah.
Berikut ini fungsi untuk memasukkan foto.
<img src="ratna.jpeg" width=200 high=200/>
Penjelasan:1. src="..." ini merupakan source untuk menentukan foto mana yang akan kalian masukkan. Jangan lupa untuk memberikan nama foto dan formatnya, contoh 'ratna.jpeg'.
2. width=200 high=200 untuk menentukan ukuran panjang dan lebar foto. Biasanya ketika kalian memasukkan foto tanpa disertai ukuran, foto akan terpampang sangat besar.
Sekarang, berbicara tentang tabel, apa perbedaan colspan dan rowspan?? colspan merupakan fungsi untuk menggabungkan beberapa kolom, sedangkan rowspan untuk menggabungkan beberapa baris. Bentuk fungsinya adalah.
colspan="..." atau rowspan="..."
Peringatan! Pada baris pertama terdapat fungsi:
<!DOCTYPE html>
Apabila kalian iseng-iseng menghapusnya. Maka jangan kaget jika keluaran hasilnya malah berbeda. Jika fungsi tersebut saya hilangkan, maka yang terjadi adalah seperti pada gambar berikut.
 |
| Gambar 2.5 Hasil Keluaran Tanpa DOCTYPE |
Yang terjadi berikutnya adalah teks yang seharusnya berwarna putih berubah menjadi hitam.
Nah, hanya itu yang dapat saya sampaikan, selebihnya mohon maaf jika ada salah-salah kata dan perbuatan. Terimakasih :)
Tidak ada komentar:
Posting Komentar