Cara Menggabungkan Tabel HTML
"Artikel tentang cara menggabungkan tabel HTML dengan atribut rowspan dan colspan dengan mudah"
11 min read
Bagaimana membuat tabel di dalam tabel di HTML? Maksud kamu apa sih? Saya gak ngerti nih. Ternyata teman saya mau belajar membuat tabel HTML dengan menggabungkan sel (kolom dan baris) pada tabel.
 |
| Cara menggabungkan tabel di HTML, rowspan dan colspan |
Sebenarnya membuat tabel di HTML dan menggabungkannya itu tidaklah sulit. Kita hanya perlu tahu kerangkan dasarnya saja. Setelah itu, kita harus mengenal letak dan posisi tag yang berfungsi untuk menggabungkan baris dan kolom.
Tag HTML, lebih tepatnya attribut yang digunakan untuk menggabungkan tabel HTML adalah rowspan (untuk baris) dan colspan (untuk kolom). Dari pada bingun, langsung saja lihat contoh script di bawah ini.
Catatan! Informasi dalam tabel adalah hasil random dan tidak benar :) Just example bro and sis.
Tutorial menggabungkan tabel HTML
Bagaimana langkah-langkahnya? Simak dan ikuti petunjuk di bawah ini! Sebelumnya agar lebih mudah, silahkan pelajari cara membuat tabel HTML terlebih dahulu.
1. Langkah satu buka notepad
Cara membuka notepad dengan menekan tombol Windows + R kemudian ketik notepad.
2. Copy script HTML di bawah ini ke notepad!
<html>
<head>
<title>Menggabungkan Tabel HTML</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" witdh="100%">
<caption><b>Blogger Tersukses Di Indonesia</b></caption>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Tahun</th>
<th rowspan="2">Blog</th>
<th colspan="4">Ranking</th>
<th rowspan="2">Visitor</th>
<th rowspan="2">Page views</th></tr>
<tr>
<td>Pagerank</td><td>Alexa-Indonesia</td><td>DA</td><td>PA</td>
</tr>
<tr>
<td>1</td>
<td>2016</td>
<td><a href="1.jpg">Mastimon</a></td>
<td>1000</td>
<td>900</td>
<td>99</td>
<td>98</td>
<td>10000</td>
<td>300000</td></tr>
<tr>
<td>2</td>
<td>1 Oktober 2018</td>
<td><a href="2.jpg">Simentik.eu.org</a></td>
<td>2000</td>
<td>2992</td>
<td>7226</td>
<td>98224</td>
<td>55433</td>
<td>810020</td></tr>
<tr>
<td>3</td>
<td>April 2018</td>
<td><a href="3.jpg">Resepta.com</a></td>
<td>7632</td>
<td>73216</td>
<td>7336</td>
<td>98332</td>
<td>232455</td>
<td>4343223</td></tr>
<tr>
<td>4</td>
<td>1 Oktober 2018</td>
<td><a href="4.jpg">PisoToraya.com</a></td>
<td>736</td>
<td>76</td>
<td>333</td>
<td>393</td>
<td>554034</td>
<td>3040303</td></tr>
</table>
</body>
</html>
3. Save As dengan nama menggabungkantable.HTML dengan pilihan type file all files.
4. Buka program HTML di Chorme dengan cara klik kanan, open with Chorme.
5. Tampilannnya akan seperti di bawah ini.
 |
| Cara membuat tabel HTML di Notepad |
Keterangan dan penjelasan:
- Tag table merupakan tag untuk membuat tabel HTML dasar.
- Tag tr untuk table row atau baris tabel
- Tag th untuk table header atau kepada dari tabel
- Tag td untuk table data digunakan untuk menampung data secara horizontal (kolom)
- Tag caption berfungsi untuk membuat judul pada tabel HTML.
- Tag a href berfungsi untuk memanggil atau menuju ke halaman lainnya. Pada contoh di atas menggunakan namagambar.jpg yang artinya ketika nama blog di klik akan menuju pada gambar tersebut. Jika tidak terhubung ke internet, kita bisa meletakkan nama gambar JPG di folder yang sama sehingga muncul gambar ketika diklik.
- Atribut Border untuk tebal garis tepi tabel.
- Atribut rowspan untuk menggbungkan baris tabel
- Atribut colspan untuk menggabungkan kolom pada tabel HML
Kita bisa saja mewarnai tabel-tabel di atas agar terlihat lebih cantik. Caranya:
Menambah attribut bgcolor untuk mengubah warna background tabel HTML secara keseluruhan.
<table bgcolor="yellow" border="1" cellpadding="0" cellspacing="0" witdh="100%"></table>
Attribute bgcolor ini dapat diletakkan di tag th, tr, dan td. Sesuai dengan kebutuhan. Contohnya:
 |
| Contoh tabel HTML berwarna |
Cara Menggabungkan Tabel HTML dan CSS
Berikut cara membuat tabel dan menggabungkannya dengan kode HTML dan CSS.
<html>
<head>
<title>Tabel HTML dan CSS</title>
<style type="text/css">
table.tabelutama {border:4px solid #000000;}
tr.tabel1 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#0000cc;color:#fff;}
th.vertikal {transform:rotate(270deg);text-align:center;height:100px;}
tr.tabel2 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#000000;color:#fff}
tr.tabel3 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#00ff00;color:#fff}
tr.tabel4 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#00ffcc;color:#000}
tr.tabel44 {border:2px solid #5a97ff;padding:10px;text-align:left;background:#adff2f;color:#000}
</style>
</head>
<body>
<table class="tabelutama"><tbody>
<tr class="tabel1">
<th class="vertikal" rowspan="2">NO URUT</th>
<th colspan="2">IDENTITAS</th>
<th rowspan="2">GOLONGAN</th>
<th rowspan="2">GAJI POKOK/JAM</th>
<th rowspan="2">TAHUN MASUK</th>
<th colspan="2">ESTIMASI JAM KERJA</th>
<th rowspan="2">TOTAL GAJI</th>
<th rowspan="2">PPN</th>
<th rowspan="2">TOTAL DIBAYARKAN</th></tr>
<tr class="tabel1">
<th>NIM</th>
<th>NAMA KARYAWAN</th>
<th>JAM KERJA</th>
<th>BONUS JAM</th></tr>
<tr class="tabel2">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td></tr>
<tr class="tabel3">
<td>1</td>
<td>G3 2011-P001</td>
<td>WINDA</td>
<td>III</td>
<td>Rp25.000</td>
<td>2011</td>
<td>192</td>
<td>16</td>
<td>Rp5.200.000</td>
<td>Rp260.000</td>
<td>Rp4.940.000</td></tr>
<tr class="tabel4">
<td>2</td>
<td>G4 2013-P003</td>
<td>JUSMIN</td>
<td>IV</td>
<td>Rp27.000</td>
<td>2013</td>
<td>176</td>
<td>24</td>
<td>Rp5.400.000</td>
<td>Rp270.000</td>
<td>Rp5.130.000</td>
</tr>
<tr class="tabel3">
<td>3</td>
<td>G1 2015-P002</td>
<td>BAMBANG</td>
<td>I</td>
<td>Rp12.500</td>
<td>2015</td>
<td>136</td>
<td>0</td>
<td>Rp1.700.000</td>
<td>Rp34.000</td>
<td>Rp1.666.000</td>
</tr>
<tr class="tabel4">
<td>4</td>
<td>G2 2010-P005</td>
<td>IMRAN</td>
<td>II</td>
<td>Rp17.500</td>
<td>2010</td>
<td>200</td>
<td>8</td>
<td>Rp3.640.000</td>
<td>Rp182.000</td>
<td>Rp3.458.000</td></tr>
<tr class="tabel3">
<td>5</td>
<td>G1 2012-P004</td>
<td>OKTAVIANY</td>
<td>I</td>
<td>Rp12.500</td>
<td>2012</td>
<td>184</td>
<td>0</td>
<td>Rp2.300.000</td>
<td>Rp46.000</td>
<td>Rp2.254.000</td></tr>
<tr class="tabel44">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3">TOTAL PENGELUARAN</td>
<td>Rp -</td>
</tr>
<tr class="tabel44">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3">JUMLAH KARYAWAN</td>
<td></td>
</tr>
<tr class="tabel44">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3">GAJI RATA-RATA</td>
<td>Rp -</td>
</tr>
</tbody>
</table>
</body>
</html>
<head>
<title>Tabel HTML dan CSS</title>
<style type="text/css">
table.tabelutama {border:4px solid #000000;}
tr.tabel1 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#0000cc;color:#fff;}
th.vertikal {transform:rotate(270deg);text-align:center;height:100px;}
tr.tabel2 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#000000;color:#fff}
tr.tabel3 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#00ff00;color:#fff}
tr.tabel4 {border:2px solid #5a97ff;padding:10px;text-align:center;background:#00ffcc;color:#000}
tr.tabel44 {border:2px solid #5a97ff;padding:10px;text-align:left;background:#adff2f;color:#000}
</style>
</head>
<body>
<table class="tabelutama"><tbody>
<tr class="tabel1">
<th class="vertikal" rowspan="2">NO URUT</th>
<th colspan="2">IDENTITAS</th>
<th rowspan="2">GOLONGAN</th>
<th rowspan="2">GAJI POKOK/JAM</th>
<th rowspan="2">TAHUN MASUK</th>
<th colspan="2">ESTIMASI JAM KERJA</th>
<th rowspan="2">TOTAL GAJI</th>
<th rowspan="2">PPN</th>
<th rowspan="2">TOTAL DIBAYARKAN</th></tr>
<tr class="tabel1">
<th>NIM</th>
<th>NAMA KARYAWAN</th>
<th>JAM KERJA</th>
<th>BONUS JAM</th></tr>
<tr class="tabel2">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td></tr>
<tr class="tabel3">
<td>1</td>
<td>G3 2011-P001</td>
<td>WINDA</td>
<td>III</td>
<td>Rp25.000</td>
<td>2011</td>
<td>192</td>
<td>16</td>
<td>Rp5.200.000</td>
<td>Rp260.000</td>
<td>Rp4.940.000</td></tr>
<tr class="tabel4">
<td>2</td>
<td>G4 2013-P003</td>
<td>JUSMIN</td>
<td>IV</td>
<td>Rp27.000</td>
<td>2013</td>
<td>176</td>
<td>24</td>
<td>Rp5.400.000</td>
<td>Rp270.000</td>
<td>Rp5.130.000</td>
</tr>
<tr class="tabel3">
<td>3</td>
<td>G1 2015-P002</td>
<td>BAMBANG</td>
<td>I</td>
<td>Rp12.500</td>
<td>2015</td>
<td>136</td>
<td>0</td>
<td>Rp1.700.000</td>
<td>Rp34.000</td>
<td>Rp1.666.000</td>
</tr>
<tr class="tabel4">
<td>4</td>
<td>G2 2010-P005</td>
<td>IMRAN</td>
<td>II</td>
<td>Rp17.500</td>
<td>2010</td>
<td>200</td>
<td>8</td>
<td>Rp3.640.000</td>
<td>Rp182.000</td>
<td>Rp3.458.000</td></tr>
<tr class="tabel3">
<td>5</td>
<td>G1 2012-P004</td>
<td>OKTAVIANY</td>
<td>I</td>
<td>Rp12.500</td>
<td>2012</td>
<td>184</td>
<td>0</td>
<td>Rp2.300.000</td>
<td>Rp46.000</td>
<td>Rp2.254.000</td></tr>
<tr class="tabel44">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3">TOTAL PENGELUARAN</td>
<td>Rp -</td>
</tr>
<tr class="tabel44">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3">JUMLAH KARYAWAN</td>
<td></td>
</tr>
<tr class="tabel44">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3">GAJI RATA-RATA</td>
<td>Rp -</td>
</tr>
</tbody>
</table>
</body>
</html>
Demikianlah artikel tentang cara menggabungkan tabel HTML menggunakan atribut colspan dan rowspan. Semoga bermanfaat!