assalamualaikum wr wb...... :):):)
Selanjutnya saya akan mendeskripsikan bagaimana cara membuat tabel dan link di HTML. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td.
Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan
tag <tr> (table rows) adalah untuk membuat baris pada tabel
kemudian tag <td> (table data) adalah untuk membuat kolom pada
tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.Tag-tag dalam Tabel
- <table>...</table> tag untuk mengawali dan mengakhiri sebuah tabel
- <tr>....</tr> tag untuk membuat sebuah baris dalam tabel
- <td>.....</td> tag untuk membuat sebuah sel data
- <th>......</th> tag untuk membuat judul kolom
- <caption>.....</caption> tag untuk membuat judul tabel
Untuk membuat garis (border:) pada tabel:
<table border = "1"><table border=1>
<tr>
<td>Dewi</td>
</tr>
</table>Mengatur Tinggi dan Lebar Tabel
- Untuk mengatur keseluruhan tabel:
<table border="1" width="75%"> - Untuk mengatur tinggi dan lebar kolom tertentu:
<table border="1" width="75%"> ---menampilkan tinggi baris--- <tr height="250px"> ---menampilkan lebar kolom--- <td width="300px">Text dalam kolom 1</td> </tr> </table>
Menggabungkan kolom (Rowspan)
Tag untuk menggabungkan kolom pada tabel / colspan, syntaks dasarnya:
<table border="1">
<tr>
<td colspan="2">Baris ke 1 kolom ke 1</td>
<!--penulisan tag untuk membuat kolom ke 2 pada baris ke 1 dihilangkan--->
</tr>
<tr>
<td>Baris ke 2 kolom ke 1</td>
<td>Baris ke 2 kolom ke 2</td>
</tr>
</table>
Tag untuk rospan:
<html>
<head>
<title>contoh rowspan</title>
<body>
<table border="1">
<tr>
<td rowspan="2">Baris ke 1 kol ke 1</td>
<td>Baris ke 1 kol ke 2</td>
</tr>
<tr>
<!---tag baris ke 2 kol 1 dihilangkan--->
<td>Baris ke 2 kol ke 2</td>
</tr>
</table>
</body>
</head>
</html
<a href="1b.htm" target="_top" ><button><i>LINK formulir</i></button></a> Untuk pembuatan bentuk tabel beserta linknya dapat dilihat pada script di bawah ini :
Script tabel Data Kuliah yang sudah dihubungkan dengan link ke halaman formulir
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="dewi p" />
<title>1a. DATA KULIAH</title>
</head>
<body background="../../animasi/animated_10.gif" width="460" height="250" >
<font color='#B212B7' size='6'><p> Untuk Membuka Halaman Formulir silahkan klik</br><a href="1b.htm" target="_top" ><button><i>LINK formulir</i></button></a></p></font>
<table border ="7" align="center" cellspacing=0 cellpadding=10 bgcolor="white">
<caption align="left"> a. Data Kuliah </caption>
<!-- header-->
<tr>
<th rowspan="2">NIM</th>
<th rowspan="2">NAMA</th>
<th rowspan="2">KELAS</th>
<th colspan="2">KETERANGAN</th>
</tr>
<tr>
<th>LULUS</th>
<th>TIDAK <br /> LULUS</th>
</tr>
<!--baris data pertama-->
<tr>
<td>109533423204</td>
<td>Aisyah</td>
<td rowspan="4">MI-10</td>
<td rowspan="2" align="center"> V </td>
<td rowspan="2" align="center"> - </td>
</tr>
<!--baris data kedua-->
<tr>
<td>109533423205</td>
<td>Budi</td>
</tr>
<!--baris data ketiga-->
<tr>
<td>109533423206</td>
<td>Dewi</td>
<td rowspan="3" align="center"> - </td>
<td rowspan="3" align="center"> V </td>
</tr>
<!--baris data keempat-->
<tr>
<td>109533423207</td>
<td>Edi</td>
</tr>
<!--baris data kelima-->
<tr>
<td>109533423208</td>
<td>Furi</td>
<td>MI-1</td>
</tr>
</table>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="dewi p" />
<title>1b. FORMULIR</title>
</head>
<body background="../../animasi/animated_10.gif" width="460" height="250" >
<font color='#B212B7' size='6'><p>Untuk kembali ke Halaman Data Kuliah silahkan klik </br><a href="1a.htm" target="_top"><button><i> LINK Data Kuliah</i></button></a></p></font>
<table align="center" cellspacing=0 cellpadding=5 bgcolor="white">
<caption align="left"> b. Formulir </caption>
<tr bgcolor="#33ccff">
<th colspan="4"> PROVINSI JAWA TIMUR <br />KOTA SURABAYA</th>
</tr>
<tr>
<td width="100">NIK</td>
<td colspan="3">: 35081021103900003</td>
</tr>
<tr>
<td width="100">Nama</td>
<td colspan="2">: Gubernur Suryo</td>
<td width="150" bgcolor="#E3DEDE" rowspan="5" align="center" >Foto</td>
</tr>
<tr>
<td width="150">Tempat/Tgl Lahir</td>
<td colspan="2">: Surabaya, 11 Maret 1990</td>
</tr>
<tr>
<td width="100">Jenis Kelamin</td>
<td width="150">: Laki-laki</td>
<td width="100"> Gol Darah : B </td>
</tr>
<tr>
<td width="100">Alamat</td>
<td colspan="2">: Jl. Pemuda 101</td>
</tr>
<tr>
<td width="100">RT/RW</td>
<td colspan="2">: 002 / 025</td>
</tr>
<tr>
<td width="50">Desa/Kel</td>
<td colspan="3">: Rungkut</td>
</tr>
<tr>
<td width="50">Kecamatan</td>
<td colspan="3">: Rungkut</td>
</tr>
<tr>
<td width="50">Agama</td>
<td width="100">: Islam</td>
<td colspan="2">Status :</td>
</tr>
<tr>
<td width="50">Pekerjaan</td>
<td colspan="3">: Pelajar/ Mahasiswa</td>
</tr>
<tr>
<td width="200">Berlaku Hingga</td>
<td colspan="3">: 11 Maret 2014</td>
</tr>
<tr>
<td width="50">Kewarganegaraan</td>
<td colspan="3">: WNI</td>
</tr>
<tr bgcolor="66ff99">
<td colspan="4">Syarat Pengambilan e-KTP: </br>
<dd>1. Membawa pas foto ukuran 3x4 berwarna </br>
<dd>2. Membawa KTP lama </br>
<dd>3. Membawa kartu keluarga </br></td>
</tr>
</table>
</body>
</html>Dan inilah hasil tampilan halaman Data Kuliah yang sudah dihubungkan dengan link ke halaman formulir
Demikian postingan tentang cara membuat tabel dan link, selamat mencoba dan semoga bermanfaat :):):)
