Tabel biasanya digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Tag <tabel> untuk membuat tabel, <tr> untuk membuat baris dalam tabel, <td> untuk membuat kolom, <th> untuk membuat judul, <caption> untuk membuat judul pada tabel.
Contoh Script + penjelasan :
Prak1.html
<html> // pembuatan html
<body> // pembutan tubuh pada html
<h4>Satu baris satu kolom:</h4>
// pembesaran dan penebalan pada teks Satu baris satu kolom:
<table> // pembuatan tabel
<tr> // pembuatan baris dalam tabel
<td>100</td> // pembuatan kolom atau sel bernilai 100
</tr> // penutup pembuatan baris dalam tabel
</table> // penutup pembuatan tabel
<h4>Satu baris tiga kolom:</h4>
// pembesaran dan penebalan pada teks Satu baris tiga kolom:
<table> // pembuatan tabel
<tr> // pembuatan baris dalam tabel
<td>100</td>
<td>200</td>
<td>300</td>
// pembuatan kolom benilai 100, 200, 300
</tr> // penutup pembuatan baris dalam tabel
</table> // penutup pembuatan tabel
<h4>Dua baris tiga kolom:</h4>
// pembesaran dan penebalan pada teks Dua baris tiga kolom:
<table> // pembuatan tabel
<tr> // pembuatan baris dalam tabel
<td>100</td>
<td>200</td>
<td>300</td>
// pembuatan kolom benilai 100, 200, 300
</tr> // penutup pembuatan baris dalam tabel
<tr> // pembuatan baris dalam tabel
<td>400</td>
<td>500</td>
<td>600</td>
// pembuatan kolom benilai 400, 500, 600
</tr> // penutup pembuatan baris dalam tabel
</table> // penutup pembuatan tabel
</body> // penutup pembuatan tubuh pada html
</html> // penutup pembuatan html
Prak2.html
<html> // pembuatan html
<body> // pembuatan tubuh pada html
<h4>Satu baris satu kolom:</h4>
// pembesaran dan penebalan pada teks Satu baris satu kolom:
<table border = "1"> // ketebalan garis tabel 1
<tr> // pembuatan baris dalam tabel
<td>100</td>
</tr>
</table>
<h4>Satu baris tiga kolom:</h4>
// pembesaran dan penebalan pada teks Satu baris tiga kolom:
<table border = "5"> // ketebalan garis pada tabel 5
<tr> // pembuatan baris dalam tabel <td>100</td>
<td>200</td>
<td>300</td>
// pembuatan kolom benilai 100, 200, 300
</tr>
</table>
<h4>Dua baris tiga kolom:</h4>
// pembesaran dan penebalan pada teks Dua baris tiga kolom:
<table border = "10"> // ketebalan garis pada kolom 10
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
// pembuatan kolom benilai 100, 200, 300
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
// pembuatan kolom benilai 400, 500, 600
</tr> // penutup pembuatan baris dalam tabel
</table> // penutup pembuatan tabel
</body> // penutup tubuh pada html
</html> // penutup pembuatan html
Prak3.html
<html> // pembuatan html
<body> // pembuatan tubuh pada html
<h4>Satu baris satu kolom:</h4>
// pembesaran dan penebalan pada teks Dua baris tiga kolom:
<table border = "1" bordercolor="aqua">
// ketebalan garis pada tabel 1 dimana garis berwarna aqua
<tr> // pembuatan baris dalam tabel
<td>100</td> // pembuatan kolom bernilai 100
</tr>
</table>
<h4>Satu baris tiga kolom:</h4>
// pembesaran dan penebalan pada teks Satu baris tiga kolom:
<table border = "5" bordercolor="pink">
// ketebalan garis pada kolom 5 dimana garis berwarna pink atau merah muda
<tr> // pembuatan garis dalam tabel
<td>100</td>
<td>200</td>
<td>300</td>
// pembuatan kolom bernilai 100, 200, 300
</tr>
</table>
<h4>Dua baris tiga kolom:</h4>
// pembesaran dan penebalan pada teks Dua baris tiga kolom:
<table border = "10" bordercolor="red>
// ketebalan garis pada kolom 10 dimana garis berwarna red atau merah
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
// pembuatan kolom bernilai 100, 200, 300
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
// pembuatan kolom benilai 400, 500, 600
</tr>
</table>
</body>
</html>
Prak4.html
<html>
<body>
<html>
<body>
<h4>Satu baris satu kolom:</h4>
<table border = "1" bgcolor="aqua">
// ketebalan garis pada tabel 1 dimana terdapat warna latar tabel aqua
<tr>
<td>100</td>
</tr>
</table>
<h4>Satu baris tiga kolom:</h4>
<table border = "5" bgcolor="pink">
// ketebalan garis pada tabel 5 dimana terdapat warna latar pada tabel pink atau merah muda
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris tiga kolom:</h4>
<table border = "10" bgcolor="red>
// ketebalan garis pada kolom 10 dimana warna latar pada tabel red atau merah
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Prak5.html
<html>
<body>
<html>
<body>
<h4>gabungan dua kolom:</h4>
// pembesaran dan penebalan pada teks gabungan dua kolom:
<table border = "1"> // ketebalan garis pada tabel 1
<tr> // pembuatan garis dalam tabel
<th>Nama</th>
<th colspan="2">Telepon</th>
// pembuatan judul pada kolom yakni Nama
// penggabungan 2 kolom dalam satu baris pada teks Telepon
</tr>
<tr> // pembuatan garis dalam tabel
<td>Eni Susanti</td>
<td>555 77 854</td>
<td>555 87 855</td>
// pembuatan kolom Eni Susanti, 555 77 854, 555 87 855
</tr>
</table>
<h4>gabungan dua baris:</h4>
// pembesaran dan penebalan pada teks gabungan dua baris:
<table border = "1"> // ketebalan garis pada tabel 1
<tr> // pembutan garis dalam tabel
<th>Nama:</th>
<td>Eni Susanti</td>
// pembuatan judul Nama
// pembuatan kolom atau sel Eni Susanti
</tr>
<tr>
<th rowspan="2">Telepon</th>
<td>555 77 854</td>
// penggabungan dua baris pada judul berteks telepon
// pembuatan kolom 555 77 854
</tr>
<tr> // pembutan garis dalam tabel
<td>555 87 855</td>
// pembuatan kolom 555 87 855
</tr>
</table>
</body>
</html>
0 komentar:
Post a Comment