Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Lengkap : Cara Mudah Membuat Tabel pada HTML

Lengkap: Cara Mudah Membuat Tabel pada HTML 

Lengkap: Cara Mudah Membuat Tabel pada HTML
Gambar oleh Mudassar Iqbal dari Pixabay 

Dalam membuat website pasti kita akan dihadapkan dengan data-data atu database, Nah biasanya database ditampilkan menggunakan tabel. Maka pada kesempatan ini kita akan membuat tabel pada HTML. 

Apa itu Tabel pada HTML 
Tabel pada HTML biasanya digunakan untuk mengelompokkan data-data dengan terstruktur.Terdiri dari 4 unsur: 
  • Baris 
  • Kolom 
  • Sel 
  • Garis
Tabel ini sangat membantu pada sebuah informasi yang keterkaitan didalam tabel tersebut.
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit

Membuat Tabel Pada HTML

Dalam membuat tabel pada HTML kita mengunakan beberapa tag yang disediakan HTML untuk membuat tabel. Namun tag itu supaya mudah difahami kita akan bagi dua kelompok yakni

1. Pokok
2. Tambahan
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit

Coba kita contohkan: 
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit
Source code: 
<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Tabel Pada HTML</title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>Baris ke-1 kolom ke-1</td> 
<td>Baris ke-1 kolom ke-2</td> 
</tr> 
<tr> 
<td>Baris ke-2 kolom ke-1</td> 
<td>Baris ke-2 kolom ke-2</td> 
</tr> 
</table> 
</body> 
</html> 
Pada contoh diatas kita sudah menambahkan atribut border dengan nilainya “1” atribut ini digunakan untuk membuat membuat garis pada tabel dan ketebalan garis tersebut di ukur dengan jumlah nilainya, Jika nilai semakin besar maka ketebalan garis pun akan semakin besar. 

Menggabungkan Sel Tabel Pada HTML 

Dalam menggabungkan sel tabel pada HTML kita membutuhkan atribut rowspan dan colspan. Rowspan digunakan untuk menggabungkan baris, sedangkan colspan digunakan untuk menggabungkan kolom. 

Biasanya atribut ini kita tempatkan pada tag <th> dan <td>. Supaya lebih ngerti coba kita contoh kan:
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit
Source code: 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Tabel Pada HTML</title> 
</head> 
<body> 
<table border="1"> 
<tr>
<th rowspan="2" bgcolor="red">Nama Kecamatan</th> 
<th colspan="4" bgcolor="pink">Jenis Kelamin</th> 
</tr> 
<tr>
<th>Laki-laki</th> 
<th>Perempuan</th> 
<th>Total</th> 
</tr> 
<tr> 
<td> Banjar</td> 
<td> 25,883</td> 
<td> 26,566</td> 
<td> 52,449</td> 
</tr> 
<tr>
<td> Purwaharta</td> 
<td> 10,210</td> 
<td> 10,317</td>
<td>20,527</td> 
</tr> 
<tr>
<td> Pataruman</td> 
<td> 26,944</td> 
<td> 27,342</td> 
<td> 54,286</td> 
</tr> 
<tr> 
<td> Langensari</td> 
<td> 23,994</td> 
<td> 23,90</td> 
<td>47,895</td> 
</tr> 
<tr> 
<td> <b>Kota Banjar</b> </td>
<td> <b>87,031</b></td> 
<td> <b>88,126</b></td> 
<td><b>175,157</b></td> 
</tr> 
</table> 
<tr> 
<th>Sumber Data Sensus Penduduk 2010</th> 
</tr> 
</body> 
</html> 

Memasukan Warna dan mengatur Jarak Menggunakan CellPanding pada HTML

Dalam memasukan warna biasanya kita memasukan atribut bgcolor didalam tag <tr> dan tag <td>. Tag <tr> digunakan untuk baris dan tag <td> digunakan untuk sel. Dan selanjutnya dalam mengatur jarak pada tabel kita bisa gunakan atribut cellpading pada HTML. Coba kita contohkan! 

Memasukan warna 

<tr bgcolor="red"> 

Mengatur jarak pada tabel 

<table border="1" cellpadding="10"> 

Contoh: 
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit
Source code: 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Tabel Pada HTML</title> 
</head> 
<body> 
<table border="1" cellpadding="10"> 
<tr bgcolor="red"> 
<td>Baris 1 kolom 1</td> 
<td>Baris 1 kolom 2</td> 
</tr> 
<tr> 
<td bgcolor="pink">Baris 2 kolom 1</td> 
<td>Baris 2 kolom 2</td> 
</tr> 
</table> 
</body> 
</html> 

Memberikan Elemen Tambahan Dalam Sel Pada HTML 

Ternyata tag <td> dan <th>, itu bisa kita berikan elemen yang lain seperti gambar,list, video dan lain-lain. Coba kita contohkan. 

Contoh: 
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit

Source code: 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Tabel Pada HTML</title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<th colspan="4" bgcolor="yellow">Jenis Hamster</th> 
<th colspan="4" bgcolor="yellow">Daftar Harga</th> 
</tr> 
<tr> 
<td><img src="gambar2.jpg" width="200"/> 
<td align="center"colspan="6"> 
<ul> 
<li>25K</li> 
</ul> 
</td> 
</tr> 
<tr> 
<td align="center"colspan="6">Cambel</td> 
</tr>
<tr> 
<td><img src="gambar3.jpg" width="200"/></td> 
<td align="center"colspan="4"> 
<ul> 
<li>25K</li> 
</ul> 
</td> 
</tr> 
<tr>
<td align="center"colspan="6">Syirian</td> 
</tr> 
</html> 

Memberikan Kode CSS Untuk Tabel Pada HTML 

Setelah datangnya CSS kita bisa membuat tabel pada HTML menjadi lebih interaktif lagi maka dari itu kita akan berikan kode CSS untuk tabel pada HTML. 

Contoh: 
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit

Source code: 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Tabel Pada HTML</title> 
<style> 
table{ 
border-collapse:collapse; 

table,th,td{ 
border:1px solid black; 

th,td{ 
padding:10px; 

th{
background-color:blue; 
color:white; 

</style> 
</head> 
<body> 
<table> 
<tr>
<th>Nama</th> 
<th>Berat Badan</th> 
<th>Jumlah kalori yang dikonsumsi</th> 
</tr> 
<tr> 
<th>Ivan</th> 
<th>89</th> 
<th>530</th> 
</tr> 
<tr> 
<th>Mely</th> 
<th>48</th> 
<th>300</th> 
</tr> 
<tr> 
<th>Rosa</th> 
<th>56</th> 
<th>358</th> 
</tr> 
<tr> 
<th>Setia</th> 
<th>89</th> 
<th>538</th> 
</tr> 
<tr> 
<th>Mayone</th>
<th>54</th> 
<th>302</th> 
</tr> 
<tr> 
<th>Lady</th> 
<th>42</th> 
<th>300</th> 
</tr> 
</table> 
</body> 
</html> 
Kita sudah menyimpan kode CSS pada tabel tersebut dengan menyimpan pada elemen style yang berada didalam elemen head.Dan dibawah ada beberapa fungsinya pada elemen style. 
Cara Mudah Membuat Tabel pada HTML Dalam Waktu 10 Menit
Nahh mudahkan!
Coba kita simpulkan!

Kesimpulan

Pada tutorial Membuat tabel pada HTML ini kita sudah mempelajari:
  1. Apa itu tabel pada HTML
  2. Membuat tabel pada HTML
  3. Menggabungkan sel tabel pada HTML
  4. Memasukan warna dan jarak menggunakan cell padding pada HTML
  5. Memberikan elemen tambahan dalam sel pada HTML
  6. Memberikan kode CSS untuk tabel pada HTML
Yang intinya kalian harus teliti dalam tag<th>,<td>,<tr> , lalu dalam atribut coluspan dan rowspan.
  • <th> bagian header
  • <td> bagian data
  • <tr> bagian membuat baris baru
Coluspan menggabungkan beberapa sel menjadi “satu” secara horizontal

Rowspan menggabungkan beberapa sel tabel menjadi satu secara vertical.

Next! 

Selanjutnya kita akan mempelajari Membuat form di HTML.

Posting Komentar untuk "Lengkap : Cara Mudah Membuat Tabel pada HTML"