Belajar HTML Part 15 - Membuat Tabel di HTML

Membuat Table di HTML

Untuk memuat tabel di HTML gunakan tag <table>.

Tag <table> digunakan untuk memulai tabel.
Tag <th> adalah singkatan dari table header, digunakan untuk membuat header pada tabel.
Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
Tag <td> adalah singkatan dari table data, digunakan untuk mengimput data ke tabel.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
      <table style="width:600px">
        <tr>
          <th>Nama Depan</th>
          <th>Nama Belakang</th> 
          <th>Age</th>
        </tr>
        <tr>
          <td>Joko</td>
          <td>Widodo</td> 
          <td>50 Tahun</td>
        </tr>
        <tr>
          <td>Jusuf</td>
          <td>Kalla</td> 
          <td>60 Tahun</td>
       </tr>
    </table>

</body>
</html>

Hasilnya:

Catatan: Jika kita tidak menambahkan border pada tabel, maka akan ditampilkan tanpa garis tepi. Oleh karena itu, menambahkan border sangatlah penting saat membuat tabel.

Catatan: Elemen <td> adalah tempat untuk tabel data. Elemen ini dapat berisi segala macam elemen HTML, seperti teks, gambar, list, tabel lain, dan lain-lain.

HTML Table - Menambahkan Border

Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika kita tidak menambahkan border pada tabel, maka akan ditampilkan tanpa garis tepi.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<table border="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>

<br />

<table border="3">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>

</body>
</html>

Hasilnya:

HTML Table - Menambahkan Cellpadding

Atribut cellpadding digunakan untuk menentukan jarak spasi di dalam sel yakni diantara dinding sel dan isi sel.

Untuk mengatur padding, gunakan properti CSS padding:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<table border="2" cellpadding="5">

  <tr>
   <th width="50">No</th>
   <th>NIM</th>
   <th>Nama</th>
  </tr>

  <tr>
   <td align="center">1</td>
   <td>21615184</td>
   <td>Octavianus Hasan</td>
  </tr>

  <tr>
   <td align="center">2</td>
   <td>21615185</td>
   <td>Noldi Mohammad</td>
  </tr>

 </table>

</body>
</html>

Hasilnya:

HTML Table - Menambahkan Cellspacing

Atribut cellspacing digunakan untuk menentukan jarak spasi antar sel.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<table border="2" cellspacing="10">

  <tr>
   <th width="50">No</th>
   <th>NIM</th>
   <th>Nama</th>
  </tr>

  <tr>
   <td align="center">1</td>
   <td>21615184</td>
   <td>Octavianus Hasan</td>
  </tr>

  <tr>
   <td align="center">2</td>
   <td>21615185</td>
   <td>Noldi Mohammad</td>
  </tr>

 </table>

</body>
</html>

Hasilnya:

Pada contoh diatas terlihat bahwa disetiap sel terdapat jarak spasi. Semakin besar cellspacing yang kita berikan, semakin luas jarak spasi antar sel.

HTML Table - Colspan

Colspan digunakan untuk membuat rentang sel lebih dari satu kolom. Lebih jelasnya digunakan untuk menggabungkan dua kolom menjadi satu kolom, atau tiga kolom menjadi satu kolom, dan seterusnya.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<table style="width:600px" border="1">

  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>

  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>

</table>

</body>
</html>

Hasilnya:

Contoh diatas menggabungkan 2 kolom menjadi 1 kolom. Kolom yang digabungkan yaitu pada kolom "Telephone".

HTML Table - Rowspan

Rowspan digunakan untuk membuat rentang sel lebih dari satu baris. Lebih jelasnya digunakan untuk menggabungkan dua baris menjadi satu baris, atau tiga baris menjadi satu baris, dan seterusnya.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<table style="width:600px" border="1">

  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>

  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>

  <tr>
    <td>55577855</td>
  </tr>

</table>

</body>
</html>

Hasilnya:

Contoh diatas menggabungkan 2 baris menjadi 1 baris. Baris yang digabungkan yaitu pada baris "Telephone".

HTML Table - Menambahkan Caption

Untuk menambahkan keterangan ke tabel, gunakan tag <caption>!

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<table style="width:600px" border="1">

  <caption>Tabungan tiap bulan</caption>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>

  <tr>
    <td>January</td>
    <td>Rp. 5.000.000</td>
  </tr>

  <tr>
    <td>February</td>
    <td>Rp. 5.500.000</td>
  </tr>
</table>

</body>
</html>

Hasilnya: