Cara Membuat Tabel di HTML Lengkap Dan Mudah
Dengan tabel kita bisa menginformasikan data dengan simple dan jelas. Format tabel itu sendiri terdiri dari satu atau banyak kolom (colum) dan satu baris atau banyak baris (rows) dan ditandai dengan garis pembatas antar kolom dan baris. Yang ditandai dengan pembatas antar kolom dan baris dinamakan cell. Tentunya sahabat ingin mengetahui cara membuat table pada html.
Format table pada html ditandai tag-tag html table di setiap baris atau kolom ditandai dengan tag rows dan colums. Kemudian begitu pun untuk kepala baris atau colom sebagai judul yang mewakili kolom maupun baris.
Dimana dalam html terutama html5 pembuatan tabel html menggunakan kode html tabel (coding html table) untuk membuat tabel di web atau blog dengan html.
Berikut kode tag html tabel dimana untuk membuat tabel sahabat perlu megingat kode hml table yang diantaranya
1. <table> tag html ini berfungsi sebagai pembungkus atau menandai table di html
2. <thead> dimana table html tag ini untuk membungkus atau menandai kepala table
3. <tbody> berguna untuk membungkus badan table
4. <td> berfungsi untuk membungkus data table
5. <tr> tag ini mempunyai kegunaan untuk membatasi atau membungkus baris table
6. <th> tag untuk membuat heading table untuk membuat judul baru pada table.
Setiap html5 tag pembuka akan diikuti html tag penutup. Pada tabel dimana baris daoat kita ketahui secara horizontal dan kolom secara vertical.
Code
Contoh table
Untuk preview diatas kode html table diatas bisa menggunakan tools html editor baik di komputer atau di smartphone.
Pembatas antar cell
Penambahan garis pembatas antara cel, baris dan kolom menggunakan <tabel border="1"> untuk menggunakan dua garis ganti 1 dengan 2. Border sendiri merupakan css (case cadding style)
Contoh
Penambahan jarak teks
Membahkan jarak teks dengan pembatas antara border (garis pembatas) dengan teks menggunakan atribut cellpading sehingga <table border="1"> jika ingin diperbesar jaraknya dengan mengganti 1 menjadi 2 dan seterusnya.
Contoh
Menambah jarak spasi
Penambahan jarak spasi antara cell dan border (garis pembatas cell) dengan menggunakan <table border="1" cellspacing="5">
Contoh
Mewarnai tabel
Demikian pula jika sahabat ingin memberi warna pada cell tabel dengan menambahkan bgcolor="css_warna" misal bgcolor="#004EFF" bisa digunakan pada td, atau pada tag tabel secara langsung.
Penggabungan kolom atau baris
Anda juga bisa menggabungkan kolom atau baris, dimana menyatukan kolom menjadi 1 dengan html tag <colspan> dan untuk baris <rowspan> baik pada colums atau rows (th, td).
Contoh
Agar table html responsive di semua perangkat smartphone, tablet dan komputer atau pc. Gunakan <div style="overflow-x:auto">
Kode html table
</div>
Demikian cara membuat table pada html dari omevan semoga bermanfaat.
Format table pada html ditandai tag-tag html table di setiap baris atau kolom ditandai dengan tag rows dan colums. Kemudian begitu pun untuk kepala baris atau colom sebagai judul yang mewakili kolom maupun baris.
Dimana dalam html terutama html5 pembuatan tabel html menggunakan kode html tabel (coding html table) untuk membuat tabel di web atau blog dengan html.
HTML Table Codes
Berikut kode tag html tabel dimana untuk membuat tabel sahabat perlu megingat kode hml table yang diantaranya
1. <table> tag html ini berfungsi sebagai pembungkus atau menandai table di html
2. <thead> dimana table html tag ini untuk membungkus atau menandai kepala table
3. <tbody> berguna untuk membungkus badan table
4. <td> berfungsi untuk membungkus data table
5. <tr> tag ini mempunyai kegunaan untuk membatasi atau membungkus baris table
6. <th> tag untuk membuat heading table untuk membuat judul baru pada table.
Setiap html5 tag pembuka akan diikuti html tag penutup. Pada tabel dimana baris daoat kita ketahui secara horizontal dan kolom secara vertical.
Code
<html>
<body>
<table >
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>
</table>
</body>
</html>
Contoh table
Untuk preview diatas kode html table diatas bisa menggunakan tools html editor baik di komputer atau di smartphone.
Pembatas antar cell
Penambahan garis pembatas antara cel, baris dan kolom menggunakan <tabel border="1"> untuk menggunakan dua garis ganti 1 dengan 2. Border sendiri merupakan css (case cadding style)
<html>
<body>
<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>
</table>
</body>
</html>
Contoh
Penambahan jarak teks
Membahkan jarak teks dengan pembatas antara border (garis pembatas) dengan teks menggunakan atribut cellpading sehingga <table border="1"> jika ingin diperbesar jaraknya dengan mengganti 1 menjadi 2 dan seterusnya.
<html>
<body>
<table border="1" cellpadding="8">
<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>
</table>
</body>
</html>
Contoh
Menambah jarak spasi
Penambahan jarak spasi antara cell dan border (garis pembatas cell) dengan menggunakan <table border="1" cellspacing="5">
<html>
<body>
<table border="1" cellspacing="2">
<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>
</table>
</body>
</html>
Contoh
Mewarnai tabel
Demikian pula jika sahabat ingin memberi warna pada cell tabel dengan menambahkan bgcolor="css_warna" misal bgcolor="#004EFF" bisa digunakan pada td, atau pada tag tabel secara langsung.
<html>
<body>
<table border="1" cellpadding="1">
<tbody>
<tr>
<td bgcolor="#004EFF">Baris 1 Kolom 1</td>
<td bgcolor="#004EFF">Baris 1 Kolom 2</td>
<td bgcolor="#004EFF">Baris 1 Kolom 3</td>
</tr>
<tr>
<td bgcolor="#004EFF">Baris 2 Kolom 1</td>
<td bgcolor="#004EFF">Baris 2 Kolom 2</td>
<td bgcolor="#004EFF">Baris 2 Kolom 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Contoh
Penggabungan kolom atau baris
Anda juga bisa menggabungkan kolom atau baris, dimana menyatukan kolom menjadi 1 dengan html tag <colspan> dan untuk baris <rowspan> baik pada colums atau rows (th, td).
<html>
<body>
<title>Cara membuat Table HTML sederhana</title>
<table border="1" cellspacing="1">
<tr>
<th border="2" rowspan="2" bgcolor="#FF7C00" >Pertumbuhan</th>
<th border="2" colspan="2" bgcolor="#00BCFF">Investasi</th>
<th border="2" rowspan="2" bgcolor="#00F0FF" >Bisnis</th>
</tr>
<tr>
<th>Surat Berharga</th>
<th>Emas</th>
</tr>
<tr>
<td>1</td>
<td>0.5%</td>
<td>0.3%</td>
<td>1%</td>
</tr>
<tr>
<td>2</td>
<td>0.7%</td>
<td>0.4%</td>
<td>1.5%</td>
</tr>
<tr>
<td>3</td>
<td>0.8%</td>
<td>0.5%</td>
<td>1.6%</td>
</tr>
<tr>
<td>3</td>
<td>0.9%</td>
<td>0.7</td>
<td>1.8%</td>
</tr>
</table>
</body>
</html>
Contoh
Agar table html responsive di semua perangkat smartphone, tablet dan komputer atau pc. Gunakan <div style="overflow-x:auto">
Kode html table
</div>
Demikian cara membuat table pada html dari omevan semoga bermanfaat.