Otak Coding
Source Code Aplikasi & Template Lengkap

HTML Part 8 Cara Membuat Tabel HTML

HTML Part 8 Cara Membuat Tabel HTML

  • HTML

Cara Membuat Tabel HTML

Dalam menampilkan data dari databases dan untuk membuat struktur data yang rapi kita sangat memerlukan table . dalam HTML menyediakan tag yang berfungsi untuk membuat table yaitu <table></table> yang berfungsi sebagai cara membuat tabel dengan html.

Cara Membuat Tabel Dengan HTML

Cara membuat tabel dengan html sebenarnya sangat mudah dan sebelumnya kita harus mengetahui beberapa sturtur yang ada di dalam tag table.

struktur table pada html

<table>
		<tr>
			<td>isi table</td>>
		</tr>
</table>


itu adalah struktur dari dasar cara membuat tabel dengan HTML  yang di mulai dari membuat tag <table> tag ini berfungsi untuk mendeklarasi yang bahwa sanya kita akan membuat sebuah table kemudia di ikuti dengan yang namanya baris yaitu tag  <tr> dan selanjutnya di lanjutkan dengan membuat kolom dengan tag <td> dan isikan data dari kolom tersebut. dan jangan lupa tutup tag- tag tersebut.

untuk lebih jelasnya sekarang kita akan mencoba membuat sebuah table dasar.

pertama buat terlebih dahulu file table.html pada folder BELAJAR HTML yang sudah kita jelaskan pada artike sebelumnya.

berikut adalah coding untuk membuat table html

table.html

<!DOCTYPE html>
<html>
<head>
	<title>membuat table dengan HTML [Otakcoding.com]</title>
</head>
<body>
	<h2>BELAJAR MEMBUAT TABLE DENGAN HTML BY OTAKCODING.COM</h2>
	<table border="1px">
		<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>
	</table>

</body>
</html>


perhatikan pada coding membuat table dan table yang sudah di jalankan, di situ bisa kita lihat sendiri pada tag <tr> yang membuat sebuah baris dan kemudian di lanjutkan oleh tag <td> untuk membuat kolom dan tutup tag tersebut dengan </td> </tr></table>. coba codinger perhatikan pada tag pembuka table di sana ada di deklarasikan atribut yaitu border 1 px <table border ="1px"> yang berfungsi sebagai garis pada table.

Cara Membuat Tabel HTML Berwarna

tentunya para codinger menginkan table yang keren berikut ini adalah cara membuat table keren dengan html cara membuatnya sangat sederhana kita hanya perlu membuat artribut background-color baik itu di dalam tag table maupun tag <tr> dan <td>.

berikut ini adalah coding membuat table.

<!DOCTYPE html>
<html>
<head>
	<title>membuat table dengan HTML [Otakcoding.com]</title>
</head>
<body>
	<h2>BELAJAR MEMBUAT TABLE DENGAN HTML BY OTAKCODING.COM</h2>
	<table border="1px" style="background-color: yellow; ">
		<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>
	</table>

</body>
</html>



mungkin table berikut belum terlalu keren sekarang kita akan membuat table keren dengan html yang  akan kita warnai adalah table baris pertama, cara membuat tabel html berwarna sebenarnya sangat mudah kita hanya perlu mendekarasikan artibut style tersebut ke dalam tag yang di perlukan seperti adalah coding membuat table wana baris pertama.

<tr style="background-color: yellow;">


dan hasilnya akan terlihat seperti berikut.


dan bisa codinger lihat garis yang berwarna kuning adalah baris yang pertama, kanapa demikian karena kita menaruh atribut style tadi di dalam tag <tr> yang pertama.

Tag Yang Sering Digunakan Pada Table

berikut adalah tag yang sering digunakan untuk membuat table oleh para web developer, dan tag ini sering di deklarasikan dalam cara membuat tabel dengan html dan sebagai atribut dalam car membuat table html berwarna, berikut adalah coding membuat tabel, dan itu semua di gunakan untuk membuat table keren dengan html.


TagFungsi
<table>untuk medeklarasikan  table
<tr>

untuk mendelarasikan baris

<td>untuk mendelarasikan kolom
<th>untuk mendeklarasikan judul tabel (tabel head)


Membuat Tabel head ( judul tabel)

untuk membuat table head <th> kita hanya perlu medeklerasikan th tersebut dalam tag tr seperti berikut .

<!DOCTYPE html>
<html>
<head>
	<title>membuat table dengan HTML [Otakcoding.com]</title>
</head>
<body>
	<h2>BELAJAR MEMBUAT TABLE DENGAN HTML BY OTAKCODING.COM</h2>
	<table border="1px" >
		<tr style="background-color: yellow;">
			<th>baris 1, kolom 1</th>
			<th>baris 1, kolom 2</th>
			<th>baris 1, kolom 3</th>
		</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>
	</table>

</body>
</html>

coba codinger perhatikan pada tabel baris pertama perhatikan tulisannya menjadi bold (tebal) itulah fungsi dari tabel head atau judul table.

Kesimpulan
dalam proses membuat table keren dengan html sangat lah mudah pertama sekali kita hanya perlu mengetahui stuktur dari table yaitu <table><tr> dan <td> dan cara membuat tabel html berwarna kita hanya perlu menambahkan artibut background-color pada salah satu tag tersebut.