Pembuatan Table HTML

Tabel HTML adalah cara yang baik untuk menampilkan data dalam bentuk yang terstruktur. Dalam artikel ini, kita akan membahas cara membuat tabel HTML dan memberikan beberapa contoh penggunaan.

Membuat Tabel HTML

Tabel HTML terdiri dari baris dan kolom. Untuk membuat tabel HTML, kita menggunakan tag <table>, <tr> untuk baris, dan <td> untuk sel atau kolom.

Contoh Kode:

<table>
  <tr>
    <td>Baris 1, Kolom 1</td>
    <td>Baris 1, Kolom 2</td>
  </tr>
  <tr>
    <td>Baris 2, Kolom 1</td>
    <td>Baris 2, Kolom 2</td>
  </tr>
</table>

Hasil dari kode di atas adalah sebuah tabel dengan dua baris dan dua kolom.

Penambahan Header Tabel

Kita dapat menambahkan header pada tabel HTML dengan menggunakan tag <th>. Tag <th> digunakan untuk menandai header atau judul dari sebuah kolom.

Contoh Kode:

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>30</td>
  </tr>
</table>

Hasil dari kode di atas adalah sebuah tabel dengan dua baris dan dua kolom, dengan judul kolom “Nama” dan “Umur”.

Merging Cell pada Tabel.

Kita dapat menggabungkan beberapa sel atau kolom dalam tabel HTML dengan menggunakan attribute rowspan atau colspan. Attribute rowspan digunakan untuk menggabungkan beberapa baris, sedangkan attribute colspan digunakan untuk menggabungkan beberapa kolom.

Contoh Kode:

<table>
  <tr>
    <th>Nama</th>
    <th colspan="2">Keterangan</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td rowspan="2">Tinggi: 180cm</td>
    <td>Berat: 70kg</td>
  </tr>
  <tr>
    <td>Umur: 25</td>
    <td>Status: Menikah</td>
  </tr>
</table>

Hasil dari kode di atas adalah sebuah tabel dengan dua baris dan tiga kolom, di mana kolom “Keterangan” tergabung menjadi satu kolom.

Penambahan Border dan Styling pada Tabel.

Kita dapat menambahkan border dan styling pada tabel HTML dengan menggunakan CSS. Untuk menambahkan border, kita dapat menggunakan CSS dengan menambahkan style border pada tag <table>. Untuk styling, kita dapat menggunakan CSS dengan menambahkan style pada tag <th> atau <td>.

Contoh Kode:

<style>
  table {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
    border: 1px solid black;
  }
  th {
    background-color: lightgray;
  }
</style>
<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
<th>Pekerjaan</th>
  </tr>
  <tr>
    <td>Wisnu</td>
    <td> 38 thn</td>
    <td>Pegawai Swasta</td>
  </tr>
  <tr>
    <td>Yulia</td>
    <td> 30 thn</td>
    <td>Ibu Rumah Tangga</td>
  </tr>
</table>

.

.

#Seri Belajar HTML:

• Mau Jadi Web Programmer?, Pelajari Bahasa HTML Dulu Yaa!
• Paragraf pada HTML dan Teks serta Font
• Penggunaan Heading dan Emphasis
• Hyperlink pada HTML
• Pembuatan Tabel HTML
• Memanfaatkan List
• Ilustrasi (Gambar, Foto, dan Desain) di dalam HTML
• Mengenal HTML Symbol / Special Character
• HTML Meta Tag Salah Satu Element Penting Dalam Pengembangan Web