Tabel Di HTML

$[ Enjoy Materi ]$

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag <td>). Td kependekan dari "table data" yang berarti tempat menyimpan data (data cell). Sebuah cell data dapat berupa teks, image, list, paragraf, form, tabel,dll.

Contoh:

<table border="1">
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Adi</td>
<td>Surabaya</td>
</tr>
<tr>
<td>Budi</td>
<td>Bandung</td>
</tr>
<tr>
<td>Cici</td>
<td>Jakarta</td>
</tr>
</table>

Hasil:



Colspan
Digunakan untuk menggabung kolom.
Contoh:

<table border="1">
<tr>
<th>Hari</th>
<th colspan="3">Kuliah</th>
</tr>
<tr>
<td>Senin</td>
<td>Web Design</td>
<td>Aplikasi Web</td>
<td>Database</td>
</tr>
</table>

Hasil:



Rowspan
Digunakan untuk menggabung baris.
Contoh:

<table border="1">
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web<td>
</tr>
<tr>
<td>Database<td>
</tr>
</table>

Hasil:



Cellpadding
Digunakan untuk mengatur padding cell (jarak antara border dengan konten).
Contoh:

<table border="1" cellpadding="5">
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web<td>
</tr>
<tr>
<td>Database<td>
</tr>
</table>

Hasil:



Cellspacing
Digunakan untuk memberi jarak antar cell.
Contoh:

<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web<td>
</tr>
<tr>
<td>Database<td>
</tr>
</table>

Hasil:



Background Warna
Untuk memberi background warna pada tabel dengan menggunakan bgcolor.
Contoh:

<table border="1" bgcolor="green" >
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web<td>
</tr>
<tr>
<td>Database<td>
</tr>
</table>

Hasil:



Background Gambar
Untuk memberi background gambar pada tabel dengan menggunakan background.
Contoh:

<table border="1" background="gambar.png" >
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web<td>
</tr>
<tr>
<td>Database<td>
</tr>
</table>

Hasil:



Warna Border
Untuk memberi warna pada border dengan menggunakan bordercolor.
Contoh:

<table border="1" bordercolor="red" >
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web<td>
</tr>
<tr>
<td>Database<td>
</tr>
</table>

Hasil:

Writer By : @mr.mcf404