Setelah beberapa praktikum, akhirnya kini sudah memasuki materi tabel dan list pada mata kuliah web development, langsung saja share beberapa materi tentang web develompent mengenai tabel dan list.
Ada dua macam list yang diberikan pada materi kali ini. Pertama adalah Unordered List yang menggunakan tag UL, digunakan untuk membuat list yang tak beraturan atau bukan nomor. Sedangkan yang kedua adalah OL yang menggunakan tag OL, digunakan untuk membuat list dengan nomor
Sedangkan untuk membuat tabel menggunakan tag <table>. Untuk lebih lanjutnya silakan pelajari beberapa script html di bawah ini.
<html>
<head>
<title>Unordered list with tag ul & li</title>
</head>
<body>
<h2>enam besar kesebelasan <br>
piala dunia 2002 korea-jepang
</h2>
<ul>
<li>Brazil</li><li>Jerman</li><li>Amerika Serikat</li>
<li>Spanyol</li><li>korea selatan</li>
<li>senegal</li>
</ul>
</body>
</html>
<html>
<head>
<title>
ordered list with tag ol dan li
</title>
</head>
<body>
<h2>enam besar kesebelasan<br>
piala dunia 2002 korea-jepang
</h2>
<ol>
<li>brazil</li><li>jerman</li><li>amerika serikat</li>
<li>spanyol</li><li>korea selatan</li>
<li>senegal</li>
</ol>
</body>
</html>
<html>
<head>
<title>oredered list with type="1"
</title>
</head>
<body>
<h2>enam besar kesebelasan<br>
piala dunia 2002 korea-jepang
</h2>
<ol type="1">
<li>bra zil</li>
<li>jerman</li>
<li>amerika serikat</li>
<li>spanyol</li>
<li>korea selatan</li>
<li>senegal</li>
</ol>
</body>
</html>>
<html>
<head>
<title>nested list
</title>
</head>
<body>
<h1>daftar kesebelasan<br>piala dunia 2001 korea-jepang</h1>
<ul>
<li><h2>Grup A</h2></li>
<ol>
<li>denmark</li>
<li>senegal</li>
<li>uruguay</li>
<li>france</li>
</ol>
</ul>
<ul>
<li><h2>Grup B</h2></li>
<ol>
<li>spain</li>
<li>paraguay</li>
<li>south africa</li>
<li>slovenia</li>
</ol>
</ul>
</body>
</html>
<html>
<head>
<title>simple table 3x4</title>
</head>
<body>
<table border="1">
<tr>
<th>NRP</th>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr>
<td>7401.040.001</td>
<td>abel dolok saribu</td>
<td>80</td>
</tr>
<tr>
<td>7401.040.005</td>
<td>ceravina susanti k</td>
<td>76</td>
</tr>
<tr>
<td>7401.040.005</td>
<td>m. jarwanto</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<html>
<head><title>tabel klasemen piala dunia 2002</title></head>
<body>
<h3>klasemen penyisihan grup</h3>
<h4>grup c</h4>
<table border="1">
<tr>
<th>negara</th><th>m</th>
<th>m</th><th>s</th>
<th>k</th><th>gol</th><th>skor</th>
</tr>
<tr>
<td>brazil</td><td>3</td>
<td>3</td><td>0</td><td>0</td>
<td>11-3</td><td>9</td>
</tr>
<tr>
<td>turki</td><td>3</td>
<td>1</td><td>1</td><td>1</td>
<td>5-2</td><td>4</td>
</tr>
<tr>
<td>kosta rika</td><td>3</td>
<td>1</td><td>1</td><td>1</td>
<td>5-6</td><td>4</td>
</tr>
<td>china</td><td>3</td>
<td>0</td><td>0</td><td>3</td>
<td>0-9</td><td>0</td>
</table>
</body>
</html>
<html>
<head><title>rowspan on table 4x4</title></head>
<body>
<table border="1">
<tr>
<th>Dosen</th>
<th>NRP</th>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr>
<td rowspan="3">Sigit waluyo</td>
<td>7401.040.001</td>
<td>abel dolok saribu</td>
<td>80</td>
</tr>
<tr>
<td>7401.040.005</td>
<td>ceravina susanti k</td>
<td>76</td>
</tr>
<tr>
<td>7401.040.014</td>
<td>m. jarwanto</td>
<td>90</td>
</tr>
</table>
</body>
</html>>
<html>
<head><title>colspan on table 4x4</title></head>
<body>
<table border="1">
<tr>
<th colspan="4">daftar mahasiswa semester genap 2001/2002</th>
</tr>
<tr>
<th>Dosen</th>
<th>NRP</th>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr>
<td rowspan="3">Dr. Eko Sulistyono</td>
<td>7401.040.001</td>
<td>abel dolok saribu</td>
<td>0</td>
</tr>
<tr>
<td>7401.040.005</td>
<td>ceravina susanti k</td>
<td>76</td>
</tr>
<tr>
<td>7401.040.014</td>
<td>m. jarwanto</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<html>
<head><title>bgcolor dan background on table</title></head>
<body>
<table border="1">
<tr>
<th colspan="4" bgcolor="lightgreen">daftar mahasiswa semester genap 2010/2011</th>
</tr>
<tr>
<th>dosen</th>
<th>nrp</th>
<th>nama</th>
<th>nilai</th>
</tr>
<tr>
<td rowspan="3" background="logoITS.jpg">Siswono Yudho</td>
<td>7401.040.001</td>
<td>abel dolok saribu</td>
<td>0</td>
</tr>
<tr>
<td>7401.040.005</td>
<td>ceravina susanti k</td>
<td>76</td>
</tr>
<tr>
<td>7401.040.014</td>
<td>m. jarwanto</td>
<td>90</td>
</tr>
</table>
</body>
</html>>
<html>
<head><title>align on table</title></head>
<body>
<table border="1">
<tr>
<th>tipe</th><th>garansi</th>
<th>non garansi</th><th>bekas</th>
</tr>
<tr align="right">
<td>3210</td>
<td> </td>
<td> </td>
<td>700.000</td>
</tr>
<tr align="right">
<td>3310</td>
<td>1.350.000</td>
<td>1.100.00</td>
<td>800.000</td>
</tr>
<tr align="right">
<td>3330</td>
<td>1.400.000</td>
<td>1.200.00</td>
<td>800.000</td>
</tr>
<tr align="right">
<td>3350</td>
<td>1.750.000</td>
<td>1.500.00</td>
<td>1.100.000</td>
</tr>
</table>
</body>
</html>
<html>
<head><title>border=14 on table 4x4</title></head>
<body>
<table border="14">
<tr>
<th>tipe</th><th>garansi</th>
<th>non garansi</th><th>bekas</th>
</tr>
<tr align="right">
<td>3210</td>
<td> </td>
<td> </td>
<td>700.000</td>
</tr>
<tr align="right">
<td>3310</td>
<td>1.350.000</td>
<td>1.100.00</td>
<td>800.000</td>
</tr>
<tr align="right">
<td>3330</td>
<td>1.400.000</td>
<td>1.200.00</td>
<td>800.000</td>
</tr>
<tr align="right">
<td>3350</td>
<td>1.750.000</td>
<td>1.500.00</td>
<td>1.100.000</td>
</tr>
</table>
</body>
</html>
<html>
<head><title>nested table</title></head>
<body>
<table border="14">
<tr>
<th colspan="2">daftar harga handphone di jakarta mei 2002</th>
</tr>
<tr>
<td>
<table border="1">
<tr><th colspan="4">handphone nokia</th></tr>
<tr>
<th>tipe</th><th>garansi</th>
<th>non garansi</th><th>bekas</th>
</tr>
<tr align="right">
<td>3210</td><td> </td>
<td> </td><td>700.000</td>
</tr>
<tr align="right">
<td>3310</td><td>1.350.000</td>
<td>1.100.000</td><td>800.000</td>
</tr>
<tr align="right">
<td>3330</td><td>1.400.000</td>
<td>1.200.000</td><td>950.000</td>
</tr>
<tr align="right">
<td>3350</td><td>1.7550.000</td>
<td>1.500.000</td><td>1.100.000</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr><th colspan="4">handphone ericson</th></tr>
<tr>
<th>tipe</th><th>garansi</th>
<th>non garansi</th><th>bekas</th>
</tr>
<tr align="right">
<td>t20</td><td>875.000</td>
<td>650.000</td><td>600.000</td>
</tr>
<tr align="right">
<td>t28s</td><td> </td>
<td> </td><td>700.000</td>
</tr>
<tr align="right">
<td>t66</td><td>2.800.000</td>
<td>2.550.000</td><td> </td>
</tr>
<tr align="right">
<td>r380</td><td>4.000.000</td>
<td>3.000.000</td><td>2.500.000</td>
</tr>
</table>
</td>
</tr>
</table>>
</body>
</html>
Sedangkan untuk latihan coba bikin tabel seperti di bawah ini
Click me to read spoilers
<html>
<head>
<title>Rekapitulasi Data</title>
<style type="text/css">
table{
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td rowspan=2>No</td><td rowspan=2>NIP</td><td rowspan=2>Nama</td>
<td rowspan=2>Jenis Kelamin</td><td rowspan=2>Gol Darah</td><td rowspan="2">Cabanlg</td><td rowspan=2>Tempat, Tanggal Lahir</td>
<td colspan=3>Telepon</td>
<td colspan=2>Email</td>
<td rowspan=2>Staff</td>
<td rowspan=2>Jabatan</td><td rowspan=2>Status Nikah</td><td rowspan=2>Status Pegawai</td>
<td rowspan=2>Pendidikan</td><td rowspan=2>Ket</td>
</tr>
<tr>
<td>Rumah</td><td>GSM</td><td>CDMA</td><td>Pribadi</td><td>Lembaga</td>
</tr>
<tr>
<td>1</td><td>123712</td><td>Bagus Wahyudi</td><td>L</td><td>A</td>
<td>Surabaya</td><td>Surabaya, 11-01-1968</td><td>031 234234234</td><td>-</td><td>031 234234234</td><td>ba_goes@yahoo.com</td><td>-</td>
<td>HRD</td><td>Manager</td><td>Nikah</td><td>Tetap</td><td>S1</td><td>HRD</td>
</tr>
<tr>
<td>2</td><td>d322</td><td>Sigit Priambodo</td><td>P</td><td>A</td>
<td>Surabaya</td><td>Surabaya, 01-01-1968</td><td>031 234234234</td><td>0815234234</td><td>031 56767456</td><td>massigit@gmail.com</td>
<td>sigit@taliamedia.com</td><td>HRD</td><td>Direktur</td><td>Nikah</td><td>Tetap</td><td>SMU</td><td>-</td>
</tr>
<tr>
<td>3</td><td>2121</td><td>Vidia Alivianto</td><td>P</td><td>A</td>
<td>Surabaya</td><td>Surabaya, 01-01-1948</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td>
<td>Media</td><td>Staff</td><td>Nikah</td><td>Tetap</td><td>S1</td><td>-</td>
</tr>
<tr>
<td>4</td><td>121</td><td>Wahyu Novyantono</td><td>L</td><td>A</td>
<td>Surabaya</td><td>Surabaya, 01-06-1968</td><td>-</td><td>081423465768</td><td>031 68679679679</td><td>wahyu_aja@yahoo.com</td><td>-</td>
<td>Marketing</td><td>Manager</td><td>Nikah</td><td>Tetap</td><td>S1</td><td>edp</td>
</tr>
</table>
</div>
</body>
</html>
Leave a Comment