Tuliskan script html untuk membuat tabel data mata pelajaran

Question

Di dalam HTML, kita bisa membuat tabel dengan berbagai macam konfigurasi dan kustomisasinya. Seperti memberi warna, mengatur jarak, panjang kolom, mengatur border, dan lain sebagainya.

Table of Contents Show

Cara Membuat Tabel di HTML
Memberi Garis (Border)
Memberi Jarak Antar Sel dan Konten (padding)
Memberi Jarak Antar Satu Sel dan Sel Lain (Cell Spacing)
Bagian Footer Table
Mengatur Panjang Tabel
Menggabungkan Sel
Gabungan Antara Rowspan dan Colspan
Cara Mewarnai Tabel
Catatan Deprekasi di HTML5
Kode Program Lengkap
Pertemuan Selanjutnya
Apa perintah HTML untuk membuat tabel?
Bagaimana cara membuat tabel pada HTML tuliskan strukturnya?
Apa saja kode HTML?
Jelaskan apa itu tabel pada HTML?

Kurang lebih pengaturan tabel di HTML sama saja seperti pengaturan tabel di dalam aplikasi pemrosesan teks semisal Microsoft Word, Google Docs, Libre Office dan lain sebagainya.

Cara Membuat Tabel di HTML

Untuk membuat tabel di dalam HTML, kita membutuhkan tag-tag berikut:

Tag
```
<table border="1">
  ...
</table>
```
2
Tag
```
<table border="1">
  ...
</table>
```
3
Tag
```
<table border="1">
  ...
</table>
```
4
Tag
```
<table border="1">
  ...
</table>
```
5

Tag

<table border="1">
  ...
</table>

2 sebagai kontainer.

Sedangkan tag

<table border="1">
  ...
</table>

3 sebagai tempat kita meletakkan nama kolom (baris paling atas sendiri).

Dan tag

<table border="1">
  ...
</table>

4 adalah tempat kita menampilkan data.

Dan yang terakhir adalah tag

<table border="1">
  ...
</table>

5 untuk membuat “footer” atau bagian bawah dari suatu tabel.

4 tag di atas adalah tag yang mendefinisikan struktur dasar untuk setiap bagian dari tabel.

Sedangkan untuk mendefinikan baris dan kolom, kita membutuhkan tag-tag berikut:

Tag
```
<table border="1" cellpadding="5">
  ...
</table>
```
0 (table row) untuk mendefinisikan tiap baris pada tabel.
Tag
```
<table border="1" cellpadding="5">
  ...
</table>
```
1 (table data) untuk mendefinisikan tiap sel pada tabel.
Tag
```
<table border="1" cellpadding="5">
  ...
</table>
```
2 (table head) untuk mendefinisikan tiap nama kolom pada tabel.

Perhatikan contoh berikut:

<table>
  <!-- Bagian kepala tabel -->
  <thead>
    <tr>
      <th>Baris</th>
      <th>Kolom</th>
    </tr>
  </thead>
  <!-- Bagian body tabel -->
  <tbody>
    <tr>
      <td>Sel 1</td>
      <td>Sel 2</td>
    </tr>
    <tr>
      <td>Sel 3</td>
      <td>Sel 4</td>
    </tr>
    <tr>
      <td>Sel 5</td>
      <td>Sel 6</td>
    </tr>
  </tbody>
</table>

Kode HTML di atas akan menghasilkan keluaran seperti berikut:

Memberi Garis (Border)

Pada output di atas, tabel yang kita buat tidak memiliki border atau garis.

Kita bisa menambah dan mengatur ukuran baris pada tabel dengan menambahkan atribut

<table border="1" cellpadding="5">
  ...
</table>

3.

Pada kode HTML sebelumnya, coba ubah tag pembuka tabel menjadi seperti ini:

<table border="1">
  ...
</table>

Kode di atas akan membuat tabel kita memiliki border dengan ukuran 1 piksel.

Berikut ini hasil keluarannya:

Lebih asik bukan?

Tapi masih ada yang kurang, tabelnya terlalu mepet!

Memberi Jarak Antar Sel dan Konten (padding)

Agar tabelnya tidak terlalu mepet, kita bisa memberikan jarak dengan menambahkan atribut

<table border="1" cellpadding="5">
  ...
</table>

4 pada tag

<table border="1">
  ...
</table>

2.

Ubah kode HTML sebelumnya menjadi:

<table border="1" cellpadding="5">
  ...
</table>

Atribut

<table border="1" cellpadding="5">
  ...
</table>

6 di atas akan memberi instruksi agar kepada browser agar memberikan jarak (padding) 5px kepada tabel kita.

Berikut ini hasil keluarannya:

Sekarang tabelnya sudah terlihat lebih lega.

Memberi Jarak Antar Satu Sel dan Sel Lain (Cell Spacing)

Selain mengatur jarak antara konten dan sel menggunakan atribut

<table border="1" cellpadding="5">
  ...
</table>

4, kita juga bisa melakukan hal sebaliknya yaitu memberi jarak antar satu sel dengan sel lainnya menggunakan atribut

<table border="1" cellpadding="5">
  ...
</table>

8.

Perhatikan contoh berikut:

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

Hasil keluaran:

Berikutnya kita bisa menambahkan footer pada suatu table dengan menambahkan tag

<table border="1">
  ...
</table>

5.

Tag

<table border="1">
  ...
</table>

5 hampir sama dengan tag

<table border="1">
  ...
</table>

3, hanya saja ia ditempatkan di bagian paling bawah.

Coba ubah kode table sebelumnya menjadi seperti ini:

<table border="1" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

Hasil keluaran:

Mengatur Panjang Tabel

Berikutnya kita bisa memanfaatkan atribut

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

2 untuk mengatur panjang tabel.

Kita bisa mengaturnya dengan berbagai macam satuan semisal pixel, atau juga bisa menggunakan persentase.

Berikut ini contoh mengubah tabel dengan atribut

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

2:

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

Hasil keluaran:

Menggabungkan Sel

Berikutnya kita bisa melakukan merge cells pada tabel. Ia merupakan teknik menggabungkan dua atau lebih sel menjadi satu.

Ada dua tipe penggabungan sel pada tabel HTML:

Penggabungan kolom dengan

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

4.

Penggabungan baris dengan

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

5.

Colspan

Dengan atribut

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

4, kita akan mengubah tabel seperti ini:

NamaDepanBelakangBudiPrakaryaAndiSusilo

Menjadi seperti ini:

NamaDepanBelakangBudiPrakaryaAndiSusilo

Berikut ini kode programnya sebelum

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

4:

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

Dan setelah

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

4:

<table>
  <thead>
    <tr>
      <th colspan="2">Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  ...
</table>

Rowspan

Sedangkan dengan atribut

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

5, kita bisa mengubah tabel seperti ini:

4x5=2055256530

Menjadi seperti ini:

4x5=2055256530

Kode program asli sebelum

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

5:

<table>
  <tbody>
    <tr>
      <td>4</td>
      <th>x</th>
      <td>5</td>
      <th>=</th>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>25</td>
    </tr>
    <tr>
      <td>6</td>
      <td>5</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Kode program asli setelah pakai

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

5:

<style>
  th {
    vertical-align: middle;
  }
</style>

<table>
  <tbody>
    <tr>
      <td>4</td>
      <th rowspan="3">x</th>
      <td>5</td>
      <th rowspan="3">=</th>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>25</td>
    </tr>
    <tr>
      <td>6</td>
      <td>5</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Pada kode di atas kita menambahkan style

<table border="1" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

2 agar teks x dan = diletakkan pada tengah sel secara vertikal.

Gabungan Antara Rowspan dan Colspan

Berikutnya kita bisa membuat tabel yang lebih kompleks lagi dengan menggabungkan antara

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

5 dan

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

4.

Sehingga tabel yang awalnya terlihat seperti ini:

NamaAsalDepanBelakangBudiPrakaryaMakassarAndiSusiloSemarangDoniSutrisnoJogja

Menjadi seperti ini:

NamaAsalDepanBelakangBudiPrakaryaMakassarAndiSusiloSemarangDoniSutrisnoJogja

Kode program dari tabel yang kedua adalah seperti berikut:

<table border="1">
  ...
</table>

0

Teman-teman bisa menghapus

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

5 dan

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

4 agar tabel di atas terlihat struktur aslinya.

Cara Mewarnai Tabel

Sebenarnya kita bisa memanfaatkan atribut

<table border="1" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

7 pada tag

<table border="1">
  ...
</table>

2,

<table border="1" cellpadding="5">
  ...
</table>

1, mau pun

<table border="1" cellpadding="5">
  ...
</table>

2 untuk mengubah warna latar dari sebuah tabel, baik secara keseluruhan atau pun pada sel tertentu.

Atau kita juga bisa menggunakan atribut

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

1 untuk mengatur warna border pada tabel.

Tapi, sayangnya, atribut-atribut tersebut sudah deprecated alias kadaluarsa pada HTML5 dan sudah harusnya kita ganti dengan penggunaan CSS.

Berikut ini contoh mewarnai tabel, border, dan mengatur padding dengan CSS:

<table border="1">
  ...
</table>

1

Hasil keluaran dari kode di atas adalah:

Catatan Deprekasi di HTML5

Banyak dari tutorial-tutorial HTML yang beredar di internet masih menyertakan cara-cara yang sudah kadaluarsa. Yang dimaksud kadaluarsa adalah cara-cara tersebut sudah bukan lagi masuk pada spesifikasi HTML5.

Menurut MDN Web Docs, ada beberapa atribut yang berhubungan dengan tabel yang seharusnya sudah tidak dipakai lagi di HTML5.

Berikut ini daftar atribut yang telah deprecated:

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

2

Bisa diganti CSS

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

3

<table border="1" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

7

Bisa diganti dengan CSS

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

5

<table border="1" cellpadding="5">
  ...
</table>

3

Bsa diganti dengan CSS

<table border="1" cellpadding="5">
  ...
</table>

3

<table border="1" cellpadding="5">
  ...
</table>

4

Bisa diganti dengan CSS

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

9 pada

<table border="1" cellpadding="5">
  ...
</table>

1 atau

<table border="1" cellpadding="5">
  ...
</table>

2

<table border="1" cellpadding="5">
  ...
</table>

8

Bisa diganti dengan CSS

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

3 dan

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

4

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

2

Bisa diganti dengan CSS

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

2

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

7

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

8

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

9

Kenapa pada tutorial ini kita masih menggunakan beberapa atribut yang sudah kadaluarsa?

Jawabannya adalah: karena kita masih belum masuk pembahasan CSS dan juga agar kita mengenal sejarah sintaks lama HTML.

Kesimpulan

Di dalam dokumen HTML, kita bisa menyajikan data dalam bentuk tabel. Tabel didefinisikan dengan tag

<table border="1">
  ...
</table>

2 sebagai kontainer, lalu tag

<table border="1">
  ...
</table>

3 untuk bagian header, tag

<table border="1">
  ...
</table>

4 untuk bagian body table, dan tag

<table border="1">
  ...
</table>

5 untuk bagian footer.

Sedangkan untuk membuat baris pada tabel kita menggunakan tag

<table border="1" cellpadding="5">
  ...
</table>

0, dan untuk cell-nya kita bisa menggunakan baik tag

<table border="1" cellpadding="5">
  ...
</table>

1 atau pun tag

<table border="1" cellpadding="5">
  ...
</table>

2.

Selain itu, kita juga bisa melakukan merge cells pada HTML dengan memanfaatkan atribut

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

5 dan

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

4.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang cara menambahkan CSS ke dalam dokumen HTML.

Apa perintah HTML untuk membuat tabel?

Tag untuk Membuat Tabel di HTML Tag <table> untuk membungkus tabelnya. Tag <thead> untuk membungkus bagian kepala tabel. Tag <tbody> untuk membungkus bagian body dari tabel. Tag <tr> (tabel row) untuk membuat baris.

Bagaimana cara membuat tabel pada HTML tuliskan strukturnya?

Struktur dasar membuat tabel pada HTML adalah tag <table>, <tr> dan <td>. Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.

Apa saja kode HTML?

Berikut adalah 9 kode HTML untuk blog dan arti coding tersebut:.

Title Tag. Tag HTML yang pertama yaitu title tag. ... .

Meta Description. Berikutnya, ada meta description. ... .

3. Heading Tag. ... .

4. Anchor Text dan Link. ... .

Nofollow. ... .

6. Image Alt Text. ... .

7. Tag Kanonikal. ... .

9. Tag Huruf Tebal (Bold).

Jelaskan apa itu tabel pada HTML?

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk membuat tabel menggunakan tag <table>. Biasanya tag <table> digunakan untuk menampilkan data yang struktur atau tampilan data dari database.

kode html