Cara Membuat Tabel di HTML

Dipublikasikan oleh Muhammad Zen pada

Pengertian Tabel

Halo teman-teman semua. lanjut lagi belajar html. jika teman-teman belum mengikuti materi sebelumnya saya sarankan untuk mengikutinya dari awal. Jika sudah kita bahas Cara Membuat Tabel di HTML.

Kita semua pasti sudah tidak asing dengan tabel. Apalagi jika sering menggunakan aplikasi MS. Word. Tapi untuk mengingatkan kembali. Saya akan menjelaskan pengertian tabel. Ingat, tabel adalah susunan data dalam bentuk baris dan kolom.

Nah, Sekarang kamu sudah bisa memilih cara menanpilkan data. Yaitu dengan list atau tabel.

Apa Pentingnya Tabel ?

Sebelum kita mempelajari sesuatu. Tentu kita perlu tahu seberapa penting yang kita pelajari. Dan menjadi motifasi kita belajar.

Jadi, pentingnya tabel adalah sering sekali digunakan di aplikasi sistem informasi. Bahkan setiap menampilkan data hampir pasti menggunakan tabel. Bisa kamu bayangkan satu menu berarti sekali menampilkan data. Artinya tabel sering digunakan pada aplikasi.

Cara Membuat Tabel di HTML

Coba istirahat lah sejenak sebelum memulai membuat tabel. Baik, kita akan membahas cara membuat tabel di HTML. Sekarang kita buat tabel menggunakan tag <table>, <tr> dan <td>. Jika tag <ol> punya anak <li>. Maka tag tabel punya anak <tr>. kemudian tag <tr> punya anak <td>. Baik inilah tag yang akan kita gunakan dalam pembuatan tabel.

  • <table></table> -Pembuka (awal) dan penutup (akhir) tabel
  • <tr></tr> – baris
  • <td></td> – cell atau kolom
<table border="1">
  <tr> 
    <td>No.</td> <td>Nama Barang</td ><td>Jumlah</td> 
  </tr>
  <tr> 
    <td>1.</td> <td>Laptop</td ><td>2</td> 
  </tr>
</table>

Penjelasan:

  • Tag <table> sebagai awal dan akhir saja.
  • Tag <tr> meminta baris baru.
  • Tag <td> membuat cell ke kanan
  • Atribut border=”1″ agar border terlihat

Cara diatas saya buat tag <td> sejajar ke kanan. Untuk apa ?. Agar mudah untuk menyamakan apa yang kita lihat dikoding dengan yg tampil nanti.

Selanjutnya jika kamu sudah paham tulis kode yang lebih rapi.

<table border="1">
  <tr> 
    <td>No.</td> 
    <td>Nama Barang
    </td ><td>Jumlah</td> 
  </tr>
  <tr> 
    <td>1.</td> 
    <td>Laptop</td >
    <td>2</td> 
  </tr>
</table>

Walaupun tag <td> kamu ketik kebawah. kamu sudah bisa bayangkan hasilnya ke kanan.

Atribut pada tag <Table>

Berikut ini atribut tag <tabel> yang sering digunakan.

No.AtributContoh
1.Borderborder=”1″
2alignalign=”center”
3.cellpaddingcellpadding=”10″
4.cellspacingcellspacing=”10″
5.bgcolorbgcolor=”red”

Atribut pada tag <tr>

No.AtributContoh
1.bgcolorbgcolor=”red”

Atribut pada tag <td>

No.AtributContoh
1.widhtwidth=”100″
2.bgcolorbgcolor=”red”

Latihan

Sekarang coba kerjakan latihan berikut.

Jangan lupa kamu harus membuat tag standar html ya.

<html>
  <head>
    <title> Judul</title>
  </head>
  <body>
    <!-- Kode Kamu disini-->
  </body>
</html>

Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *