Materi List & Tabel
A.List
1.ordered list
ada beberapa tipe yang bisa digunakan :
1.<ol type="I">
contoh :
2.Unordered List
n untuk mendata setiap itemnya menggunakan tag <li>, sebagai pembuka dan </li> sebagai penutup
B.Tabel
Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.
Tabel terdiri dari 4 unsur utama:
- Baris
- Kolom
- Sel
- Garis
Tag untuk Membuat Tabel di HTML
Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
- Tag
<table>
untuk membungkus tabelnya - Tag
<thead>
untuk membungkus bagian kepala tabel - Tag
<tbody>
untuk membungkus bagian body dari tabel - Tag
<tr>
(tabel row) untuk membuat baris - Tag
<td>
(table data) untuk membuat sel - Tag
<th>
(table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>
, <tr>
, dan <td>
. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.
Mari kita lihat contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<table>
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>
Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1"
di dalam tag <table>
Sehingga akan menjadi seperti ini:
<table boder="1">
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Nilai "1"
pada atribut border
adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.
Nilai "1"
adalah ukuran garis yang palng kecil.
Hasilnya akan sepert ini:
Menambahkan Warna pada Sel dan Baris
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor
di dalam tag <td>
(untuk sel) atau <tr>
(untuk baris).
Contoh:
<table border="1" cellpadding="10">
<tr>
<td bgcolor="yellow">Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr bgcolor="#00ff80">
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Nilai atribut bgcolor
bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.
Maka hasilnya akan seperti ini:
Menggabungkan Sel Tabel
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan
dan colspan
:
rowspan
untuk menggabungkan baris;colspan
untuk menggabungkan kolom.
Atribut ini bisa kita berikan kepada tag <td>
atau <th>
.
Mari kita lihat contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2" bgcolor="yellow">Bulan</th>
<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
</tr>
<tr>
<th>Padi</th>
<th>Kacang</th>
</tr>
<tr>
<td>Januari</td>
<td>500 Kg</td>
<td>231 Kg</td>
</tr>
<tr>
<td>Februari</td>
<td>342 Kg</td>
<td>423 Kg</td>
</tr>
<tr>
<td>Maret</td>
<td>432 Kg</td>
<td>124 Kg</td>
</tr>
<tr>
<td>April</td>
<td>453 Kg</td>
<td>523 Kg</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Komentar
Posting Komentar