Beranda  ›  HTML  ›  Tutorial

Tutorial Belajar Rowspan di HTML

,
Kita juga dapat merentangkan sebuah sel pada tabel ke bawah, sehingga tingginya setara dengan beberapa baris.

<table border="1">

 <tr>

  <th>Language</th>

<th>Framework</th>

  <td>PHP</td>

</tr>
 <tr>

 <tr>

<td>Laravel</td>
 </tr>

  <td>CodeIgniter</td>

<td>PHP</td>
 </tr>
        <tr>

 </tr>

<td>Ruby</td>
  <td>Ruby on Rails</td>
 <tr>

</table>

<td>Ruby</td>
  <td>Sinatra</td>

 </tr>

Kode table di atas akan ditampilkan seperti ini:
LanguageFramework
PHPLaravel
PHPCodeIgniter
RubyRuby on Rails
RubySinatra
Kita dapat menggabungkan beberapa sel yang memiliki nilai yang sama seperti sel PHP dan Ruby di atas, dengan cara menambahkan atribut rowspan pada sel yang ingin direntangkan ke bawah:

<table border="1">

 <tr>

  <th>Language</th>

<th>Framework</th>

  <td rowspan="2">PHP</td>

</tr>
 <tr>

 <tr>

<td>Laravel</td>
 </tr>

        <tr>

<td>CodeIgniter</td>
 </tr>

  <td>Ruby on Rails</td>

<td rowspan="2">Ruby</td>
 </tr>
 <tr>

</table>

<td>Sinatra</td>

 </tr>

Kode di atas akan tampil seperti ini:
LanguageFramework
PHPLaravel
CodeIgniter
RubyRuby on Rails
Sinatra
Perhatikan baris tabel ke-3 dan ke-5, kita tidak perlu lagi mendefinisikan kolom pertama, karena area kolom sudah digunakan oleh kolom di baris di atasnya.

PRAKTEK

  • Pada editor terdapat kode table dari praktek sebelumnya. Kita ingin agar baris pada sel yang berisi bulan dibuat menjadi satu sel. Gunakan atribut rowspan untuk menggabung baris dari sel bulan yang sama.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<table border="1">
<tr>
        <th colspan="2">Tanggal</th>
<th>Hari Besar</th>
  </tr>
  <tr>
    <td>Juni</td>
          <td>1</td>
          <td>Hari Pancasila</td>
</tr>
  <tr>
    <td>Juni</td>
          <td>8</td>
          <td>Hari Laut Sedunia</td>
</tr>
  <tr>
    <td>Juli</td>
          <td>12</td>
          <td>Hari Koperasi</td>
</tr>
    <tr>
      <td>Juli</td>
          <td>23</td>
          <td>Hari Anak Nasional</td>
</tr>
  </table>
</body>
</html>


Hasilnya:
TanggalHari Besar
Juni1Hari Pancasila
Juni8Hari Laut Sedunia
Juli12Hari Koperasi
Juli23Hari Anak Nasional

Subscribe to receive free email updates:

0 Response to "Tutorial Belajar Rowspan di HTML"

Posting Komentar

Langganan: Posting Komentar (Atom)