Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Home / HTML / Pemrograman / Tutorial

Belajar HTML #05 : Membuat Table - Table Styling, Colspan, Rowspan

Membuat Table - Table Styling, Colspan, Rowspan

Assalamualaikum wr wb, Halo temen-temen sekarang kita akan masuk ke pembejaran berikutnya pada artikel sebelumnya Belajar HTML #04 : Membuat Heading Text, Paragraph, List Item dan Komentar. Kita telah mempelajari tentang Cara Membuat Heading Text, Paragraph, List Item dan Memberi Komentar di HTML. Pada materi kali ini kita akan bejar membuat Table.

Table

Table di HTML digunakan untuk Menampilkan sebuah data dalam bentuk tabel. Elemen utama dari sebuah tabel adalah tag <table>, di dalamnya terdapat baris-baris yang ditandai dengan tag <tr> dan setiap baris terdiri dari beberapa sel yang ditandai dengan tag <td>. Kita juga bisa menambahkan header tabel dengan menggunakan tag <th> di dalam tag <tr>.

  1. <th> adalah elemen HTML yang digunakan untuk menandai sebuah sel sebagai header tabel. Elemen ini biasanya digunakan pada baris pertama dari tabel untuk menyatakan nama kolom.
  2. <tr> adalah elemen HTML yang digunakan untuk menandai sebuah baris dalam tabel. Setiap baris dalam tabel harus ditandai dengan elemen ini.
  3. <td> adalah elemen HTML yang digunakan untuk menandai sebuah sel dalam tabel. Setiap sel dalam tabel harus ditandai dengan elemen ini.

Contoh penggunaan Table:

<!DOCTYPE html>
<html>
  <head>
    <title>Table</title>
  </head>
  <body>
    <h1>Contoh Table</h1>
    <table>
      <tr>
        <th>NAMA</th>
        <th>HOBI</th>
      </tr>
      <tr>
        <td>Rizal</td>
        <td>Budi</td>
      </tr>
      <tr>
        <td>Tidur</td>
        <td>Belajar</td>
      </tr>
    </table>
  </body>
</html>
Lihat Preview

Kegunaan dari ketiga elemen tersebut adalah sebagai berikut :

  1. <th> digunakan untuk memberikan informasi yang berfungsi sebagai header dari tabel, seperti nama kolom dan judul tabel.
  2. <tr> digunakan untuk membuat baris dalam tabel, sehingga memudahkan dalam penataan layout data.
  3. <td> digunakan untuk membuat sel dalam tabel, sehingga memudahkan dalam penempatan data.

Table Styling

Beberapa atribut yang dapat digunakan untuk styling tabel secara bawaan di HTML adalah:

  1. border: untuk menambahkan border pada tabel. Nilai yang dapat ditentukan berkisar dari 0 hingga 1.
  2. cellpadding: untuk menambahkan jarak antara teks di dalam sel dengan batas sel. Nilainya ditentukan dalam pixel.
  3. cellspacing: untuk menambahkan jarak antara sel-sel. Nilainya ditentukan dalam pixel.
  4. width: untuk menentukan lebar tabel. Nilainya ditentukan dalam pixel atau persentase.
  5. height: untuk menentukan tinggi tabel. Nilainya ditentukan dalam pixel atau persentase.
  6. align: untuk menentukan posisi tabel. Nilai yang dapat ditentukan adalah "left", "center", dan "right".
  7. bgcolor: untuk menentukan warna background tabel. Nilainya ditentukan dalam format RGB atau dengan nama warna.

Contoh penggunaan atribut styling pada Table:

<!DOCTYPE html>
<html>
  <head>
    <title>Styling Table</title>
  </head>
  <body>
    <h1>Contoh Styling Table</h1>
    <table
      border="1"
      cellpadding="5"
      cellspacing="0"
      width="50%"
      align="center"
    >
      <tr bgcolor="yellow">
        <th>NAMA</th>
        <th>HOBI</th>
      </tr>
      <tr>
        <td>Rizal</td>
        <td>Tidur</td>
      </tr>
      <tr>
        <td>Budi</td>
        <td>Belajar</td>
      </tr>
    </table>
  </body>
</html>
Lihat Preview

Table Colspan

Atribut colspan digunakan dalam elemen <td> atau <th> untuk menentukan jumlah kolom yang digabungkan dalam sebuah sel. Ini berarti bahwa sel akan mencakup beberapa kolom yang berdampingan di tabel.

Contoh penggunaan colspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Colspan</title>
  </head>
  <body>
    <h1>Table dengan Colspan</h1>
    <table
      border="1"
      cellpadding="5"
      cellspacing="0"
      width="50%"
      align="center"
    >
      <tr bgcolor="yellow">
        <th>NAMA</th>
        <th colspan="2">HOBI</th>
      </tr>
      <tr>
        <td>Rizal</td>
        <td>Tidur</td>
        <td>Makan</td>
      </tr>
      <tr>
        <td>Budi</td>
        <td>Belajar</td>
        <td>Bernyanyi</td>
      </tr>
    </table>
  </body>
</html>
Lihat Preview

code di atas menggunakan atribut colspan pada elemen <th> untuk menentukan jumlah kolom yang digabungkan dalam sebuah sel. Pada kode di atas, atribut colspan="2" digunakan pada sel yang berisi "HOBI". Ini berarti bahwa sel "HOBI" akan mencakup 2 kolom yang berdampingan dalam tabel. Dengan menggunakan colspan seperti ini, sel "HOBI" akan menempati 2 kolom dalam tabel dan membuat tabel terlihat lebih rapi.

Secara umum fungsi dari colspan adalah untuk menggabungkan beberapa kolom menjadi satu sel yang sama, sehingga membuat tabel menjadi lebih rapi dan terstruktur.

Table Rowspan

Atribut rowspan digunakan dalam elemen <td> atau <th> untuk menentukan jumlah baris yang digabungkan dalam sebuah sel. Ini berarti bahwa sel akan mencakup beberapa baris yang berdampingan di tabel.

Contoh penggunaan rowspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Rowspan</title>
  </head>
  <body>
    <h1>Table dengan Rowspan</h1>
    <table
      border="1"
      cellpadding="5"
      cellspacing="0"
      width="50%"
      align="center"
    >
      <tr bgcolor="yellow">
        <th>NAMA</th>
        <th colspan="2">HOBI</th>
      </tr>
      <tr>
        <td rowspan="2">Rizal</td>
        <td>Tidur</td>
        <td>Makan</td>
      </tr>
      <tr>
        <td>Jalan"</td>
        <td>Masak</td>
      </tr>
      <tr>
        <td>Budi</td>
        <td>Belajar</td>
        <td>Bernyanyi</td>
      </tr>
    </table>
  </body>
</html>
Lihat Preview

code di atas menggunakan atribut rowspan pada elemen <td> untuk menentukan jumlah baris yang digabungkan dalam sebuah sel. Pada kode di atas, atribut rowspan="2" digunakan pada sel yang berisi "Rizal". Ini berarti bahwa sel "Rizal" akan mencakup 2 baris yang berdampingan dalam tabel. Dengan menggunakan rowspan seperti ini, sel "Rizal" akan menempati 2 baris dalam tabel dan membuat tabel terlihat lebih rapi.

Secara umum fungsi dari rowspan adalah untuk menggabungkan beberapa baris menjadi satu sel yang sama, sehingga membuat tabel menjadi lebih rapi dan terstruktur.

Cukup sekian pembahasan Materi kali ini, Jika ada pertanyaan silahkan kirim melalui kolom komentar di bawah. Pada materi berikutnya kita akan belajar Menampilkan Gambar di HTML, Terimakasih.