Table Colspan dan Table Rowspan

Oleh Unknown

Friday, April 17, 2015

Sebelum kita membahas apa itu colspan dan rowspan, ada baiknya untuk menyimak kembali cara membuat table dengan html. Karena yang sedang kita bahas kali ini adalah kelanjutan dari pembahasan sebelumnya.

Colspan adalah cara untuk menggabungkan dua kolom atau lebih menjadi satu. Lebih jelasnya simak contoh berikut ini :

Contoh Cara Membuat Table Colspan

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>

<body>

<h2>Contoh Fungsi colspan table:</h2>


<br>
<table style="width:100%">
  <tr>
    <th>Nama</th>
    <th colspan="2">Nomor Hp</th>
  </tr>
  <tr>
    <td>Paijo</td>
    <td>08123456789</td>
    <td>08512345678</td>
  </tr>
</table>

</body>
</html>

Hasilnya akan menjadi seperti ini :

Contoh Fungsi colspan table:

Nama	Nomor Hp
Paijo	08123456789	08512345678

Sedangkan rowspan adalah kebalikan dari colspan. Kalau colspan menggabungkan beberapa kolom secara horizontal, maka rowspan menggabungkan beberapa baris secara vertikal. Perhatikan contoh berikut :

Contoh Cara Membuat Table Rowspan

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>

<body>

<h2>Contoh Fungsi Rowspan table:</h2>


<br>
<table style="width:100%">
  <tr>
    <th>Nama :</th>
    <td>Paijo</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone :</th>
    <td>08886667786</td>
  </tr>
  <tr>
    <td>02381768992</td>
  </tr>
</table>

</body>
</html>

Seperti di bawah ini hasilnya :

Contoh Fungsi Rowspan Table:

Nama :	Paijo
Telephone :	08886667786
Telephone :	02381768992

Bagaimana? tidak sulit kan?. Angka pada colspan atau rowspan bisa kamu ubah sesuai selera. Semoga bermanfaat buat konco sinahu yang sedang mendalami ilmu html.

Table Colspan dan Table Rowspan

Contoh Cara Membuat Table Colspan

Contoh Fungsi colspan table:

Contoh Cara Membuat Table Rowspan

Contoh Fungsi Rowspan Table:

0 Komentar untuk "Table Colspan dan Table Rowspan"