Membuat Tabel Pada HTML

Belajar Membuat Tabel di HTML

Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.
tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> utuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat kolom.

1. <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.
2. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML
3. <td> atau dikenal dengan tabel data merpakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table
4. <th> untuk membuat table head atau bagian kepala pada table.

Contoh :

<table border="1">
	<tr>
		<td>baris 1 / kolom 1</td>
		<td>baris 1 / kolom 2</td>
		<td>baris 1 / kolom 3</td>
	</tr>
	<tr>
		<td>baris 2 / kolom 1</td>
		<td>baris 2 / kolom 2</td>
		<td>baris 2 / kolom 3</td>
	</tr>
	<tr>
		<td>baris 3/ kolom 1</td>
		<td>baris 3/ kolom 2</td>
		<td>baris 3/ kolom 3</td>
	</tr>
	<tr>
		<td>baris 4/ kolom 1</td>
		<td>baris 4/ kolom 2</td>
		<td>baris 4/ kolom 3</td>
	</tr>
</table>

Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.

Atribut ini dapat kita berikan kepada tag <table>.

Contoh :

<table border="1" cellpadding="50">
        <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>

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>

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>.

Contoh :

<th rowspan="2" bgcolor="yellow">Bulan</th>
<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>