Belajar HTML Part 15 - Membuat Tabel di HTML

byPksaimadiunkota1 •
0

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:
Catatan: Tag <caption> harus dimasukkan dalam tag <table>

Demikian pembahasan tentang membuat Tabel pada HTML.
Semoga bemanfaat!

Sumber: https://www.w3schools.com
Tags:

Posting Komentar

Lebih baru Lebih lama