Skip to content Skip to sidebar Skip to footer
Home / HTML / Web Design

Tutorial Belajar HTML 11 : Tabel pada HTML

By Web Design Purbalingga Post a Comment

Tabel pada HTML – Materi tentang HTML masih banyak sekali, dan sekarang kita sudah sampai pada materi tentang bagaimana cara membuat tabel pada HTML. Ada banyak sekali fungsi dari sebuah tabel, mungkin ingin membuat jadwal atau yang lainnya.

Tabel pada HTML

Sebelumnya, ada beberapa tag tabel html yang perlu kalian ketahui, agar kalian lebih mahir dalam membuat tag.
- Tag tabel dalam HTML di definisikan dengan tag <table>
- Setiap baris tabel di definisikan dengan tag <tr> atau table row
- Header tabel (biasa digunakan untuk judul setiap kolomnya) di definisikan dengan tag <th> atau table heading. Dan setiap elemen yang ada pada tag <th> akan di cetak tebal dan akan berada di tengah.
- Adapun data atau elemen yang ada dalam tabel (jika di dalam microsoft excel di sebut cell) di definisikan dengan tag <td> atau table data. Di dalam tag ini kalian bisa mengisikan segala jenis html, mulai dari gambar, teks, daftar dan lain – lain. Silahkan ketikan contoh baris kode table di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan HTML</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- table pada html -->
  <h2>Membuat Tabel</h2>
  <table>
    <tr>
      <th>Nama</th>
      <th>Alamat</th> 
      <th>Jurusan</th>
    </tr>
    <tr>
      <td>Puji Sulistianto</td>
      <td>Purbalingga</td>
      <td>MI</td>
    </tr>
    <tr>
      <td>Eko Setiawan</td>
      <td>Padamara</td>
      <td>MI</td>
    </tr>
    <tr>
      <td>Ari Bintang</td>
      <td>Purwokerto</td>
      <td>TI</td>
    </tr>
 </table>
</body>
</html>
Dan tambahkan kode css di bawah ini pada file css kalian
table {
 width:100%;
}
Hasilnya


Menambahkan Border pada Tabel

Contoh di atas adalah jika tabel tidak menggunakan border (pembatas), jadi terlihat kurang menarik. Untuk mengatur border, gunakan property border. Lihat contohnya berikut ini
/*menambahkan border*/
table {
 width:100%;
 border: 1px solid black;
}
th {
 border: 1px solid black;
}
td {
 border: 1px solid black;
}
Jika sudah selesai, silahkan tampilkan ke jendela browser kalian. Hasilnya akan tampil lebih jelas dengan border 1 pixel solid berwarna hitam. Ada cara lain agar border pada tabel tidak tertumpuk seperti contoh sebelumnya, yaitu dengan menambahkan property border-collapse dan memberinya nilai collapse. Lihat contohnya berikut ini
/*border-collapse*/
table {
 width:100%;
 border: 1px solid black;
 border-collapse: collapse;
}
th {
 border: 1px solid black;
 border-collapse: collapse;
}
td {
 border: 1px solid black;
 border-collapse: collapse;
}
Hasilnya


Mengatur Teks dalam Tabel

Pada materi sebelumnya sudah di bahas tentang mengatur teks. Untuk mengatur teks dalam tabel tidak ada perbedaan saat mengatur teks pada elemen html yaitu menambahkan property text-align dan nilainya bisa di atur apakah teksnya akan berada tengah (center), kanan (right) atau di kiri (left).

Jarak Border pada Tabel

Untuk mengatur jarak pada tabel html, gunakan property border-spacing lalu berikan nilai sesuai selera kalian, apakah itu 1 pixel atau 1 pixel. Perhatikan contohnya berikut ini
/*border-spacing*/
table {
 width:100%;
 border: 1px solid black;
 border-spacing: 10px;
}
Pada contoh di atas, pada property border-spacing diberikan nilai 10 pixel dan lihat hasilnya di bawah ini.


Dan perlu diketahui, border-spacing akan memberikan jarak antara tabel itu sendiri dan tiap baris data yang ada dalam html baik itu jarak ke kiri, ke kanan, ke atas dan ke bawah. Materi tentang tabel ini masih cukup banyak, tapi yang di bahas pada materi ini sudah mewakili yang lainnya. Namun, jika belum puas dengan materi kali ini, silahkan ke halaman ini untuk mengetahui lebih banyak seputar tabel html.

Sekian materi kali ini tentang membuat Tabel pada HTML. Jika ada yang belum di mengerti, seperti biasa tinggalkan pertanyaan kalian di kolom komentar di bawah ini dan sampai jumpa di materi berikutnya.

Post a Comment for "Tutorial Belajar HTML 11 : Tabel pada HTML"