Menggabuang Kolom Dan Baris
Untuk menggabungkan baris dan kolommenggunakan tag atau atribut colspan, fungsinya adalah untuk menggabungkan kolom-kolom menjadi satu kolom.
Begitu pun rowspan sama dengan fungsinya dengan colspan, hanya perbedaan baris dan kolom saja berbeda untuk perubahan atribut ini.
Langsung saja kita peraktekan dalam dokumen HTML yang sudah saya siapkan di bawah ini, anda juga bisa menggunakan Notepad atau Dreamwever dalam membangun atau menyusun dokumen HTML ini.
Contoh Program :
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border="1" align="center">
<tr>
<td colspan="2"> Sel 1 </td>
<td> Sel 3 </td>
</tr>
<tr>
<td> Sel 4 </td>
<td> Sel 5 </td>
<td> Sel 6 </td>
</tr>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Hasilnya akan seperti diibawah ini :
 |
| Menggabungkan kolom pada tabel |
Untuk menggabungkan baris, gantilah colspan dengan rowspan dengan memberikan nilai sesuai dengan jumlah baris yang ingin di bangunkan. Hasilnya tampak seperti gambar dibawah ini :
 |
| Menggabungkan baris pada table |
Menambahkan Title Tabel
Untuk menambahkan sebuah title tabel, element yang digunakan adalah <caption> </caption>. Contoh dari penambahan title untuk tabel adalah :
<body>
<table>
<caption> Tabel 2 baris 3 kolom </caption>
<tr>
<td> Baris 1 kolom 1 </td>
</tr>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
Menambahkan Heading Kolom
Element yang digunakan untuk keperluan ini adalah element <th> </th>. Penulisan tag ini sama seperti penulisan tag <td> yaitu didalam blok tag <tr>.
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table>
<caption> Tabel 2 baris 3 kolom </caption>
<tr>
<th> Kolom 1 </th>
<th> Kolom 2 </th>
<th> Kolom 3 </th>
</tr>
<tr>
<td> Baris 1 kolom 1 </td>
</tr>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Text yang ada didalam tag <th> akan mempunyai format huruf tebal dan alignment center.
Table Untuk Laporan
Pada table terdapat tag <THEAD> atau table header yang bisa digunakan untuk judul suatu kolom berbentuk tabular, Sedangkan isi datanya dalam tag <TBODY>. Dengan menggunakan tag <THEAD> dan <TBODY> maka jika halaman dokumen laporan cukup panjang dan jika dicetak akan menghasilkan lebih dari satu halaman, maka pada halaman berikutnya header laporan akan tetap ada.
Berikut contoh penggunaannya :
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<h2 align="center"> Daftar Anak Karyawan Raja Sticker </h2>
<table cellspacing="2" cellpadding="2" border="1" width="800px" align="center">
<thead>
<tr>
<th> No </th>
<th> Nama Anak </th>
<th> Umur </th>
<th> Orang Tua </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> David </td>
<td> 6 thn </td>
<td> Nurul Iman </td>
</tr>
<tr>
<td> 2 </td>
<td> Silvia Deby </td>
<td> 4 thn </td>
<td> Shelby Valleskan Wulansari </td>
</tr>
<tr>
<td> 3 </td>
<td> Joni </td>
<td> 2 thn </td>
<td> Alex Rose </td>
</tr>
<tr>
<td> 4 </td>
<td> Andi yusuf </td>
<td> 1 thn </td>
<td> Yusuf </td>
</tr>
<tr>
<td> 5 </td>
<td> Sean </td>
<td> 2 thn </td>
<td> Supriono </td>
</tr>
<tr>
<td> 6 </td>
<td> Dea </td>
<td> 10 thn </td>
<td> Agustiar </td>
</tr>
<tr>
<td> 7 </td>
<td> Rosalia Syafitri </td>
<td> 19 thn </td>
<td> Waslam Susanto </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"> Data Juni, 2016 </td>
</tr>
</tfoot>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Hasilnya akan seperti dibawah ini :
 |
| Table untuk laporan |
Cukup mudah untuk di mengerti bukan. Mungkin jika tidak ada yang di mengerti kalian bisa tinggalkan komentar di bawah artikel ini, Jika ingin melakukan konsultasi dengan fast respon, kalian bisa kirim-kirim email ke email saya, karena banyak waktu untuk membahas semua ini dengan langsung dua dosen dan satu penulis.
Terimakasih sangat membantu sekali untuk diaplikasikan. Menggabungkan kolom dan baris di HTML pada artikel ini ternyata sangat mudah dipahami.
BalasHapusKunjungi juga http://www.atmaluhur.ac.id dan https://gianskr.mahasiswa.atmaluhur.ac.id/
tks penjelasannya sangat membantu... ditunggu artikel selanjutnya yaa.. Kunjungi juga website kampus saya : http://www.atmaluhur.ac.id dan blog saya : https://kima.mahasiswa.atmaluhur.ac.id
BalasHapusTerima kasih kak website ini sangat bermanfaat untuk saya dengan penjelasannya. Saya merasa senang dapat ilmu tentang Menggabungkan kolom dan baris pada html. Materi yang disampaikan oleh kakak sangat mudah dimengerti. trus webnya bagus,sangat jelas, lengkap dengan penjelasannya serta gambar kodingnya & mudah di pahami terus berkreasi kak .
BalasHapusSalam kenal kak nama saya Wiranto kls (Si2K), kunjungi juga dong website kampus kami https://www.atmaluhur.ac.id