Categories
PHP

Membuat Table Colspan Rowspan Responsive Menggunakan Data Table

colspan rowspan

Membuat tabel Colspan dan Rowspan menggunakan HTML biasa itu sudah biasa dan banyak kita jumpai di pencarian internet, tetapi bagaimana dengan membuat tabel Colspan (berapa kotak kesamping) Rowspan (berapa kotak kebawah) menggunakan plugin data table.

Apa itu Colspan Rowspan?

Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau baris menjadi satu, sehingga satu unit kolom atau barus menjadi lebih lebar.

Langsung saja mari kita masuk kedalam pembahasan inti yaitu membuat Colspan Rowspan menggunakan data table.

Anda terlebih dahulu memanggil css dan javascript plugin data table.

<link type="text/css" href='https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


<script>
  $(document).ready(function() {
    $('#example').DataTable( {
      "scrollX": true
    } );
  } );
</script>

Berikutnya anda buat form dimana table rowspan colspan ingin di tampilkan.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		  <link type="text/css" href='https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet'>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://jasawebsite.ooo/">Jasawebsite</a>
		</div>
	</nav>
	<div class="col-md-12"></div>
	<div class="col-md-12 well">
		<!--Script untuk memanggil Javascript-->
  <table id="example" class="display nowrap" style="width:100%">
    <thead>
            <tr>
                <th rowspan="3">Name</th>
                <th colspan="11">HR Information</th>
                <th colspan="2">Dan dimana kau berada saat ini saya tidak mengerti </th>
            </tr>
            <tr>
                <th rowspan="2">Provinsi</th>
                <th rowspan="2">Nama Kegiatan</th>
                <th rowspan="2">Satker</th>
                <th rowspan="2">Nilai Aset</th>
                <th rowspan="2">Tahun</th>
                <th rowspan="2">Kap</th>
                 <th colspan="5">Kategory Permasalahan</th>
                  <th rowspan="2">Lingkup Pekerjaan Fungsional</th>
                  <th rowspan="2">Penanganan Tahunan</th>
            </tr>
            <tr>
         
                 <th>Air</th>
                <th>Ipa</th>
                <th>JDU</th>
                <th>PLN</th>
                <th>LP</th>
            </tr>
        </thead>
    <tbody>
      <tr>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
      </tr>

    </tbody>
  </table>
	</div>
	
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


<script>
  $(document).ready(function() {
    $('#example').DataTable( {
      "scrollX": true
    } );
  } );
</script>
</body>	
</html>

Anda bisa melihat hasilnya pada gambar di atas, silahkan download pada link download dibawah dan modifikasi sesuai keinginan anda.

Sekian share kali ini, semoga apa yang kami share bermanfaat bagi anda, silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

Your email address will not be published. Required fields are marked *