[Belajar HTML #16] Tabel HTML - Border - Collapsed Borders - Padding Sel - text-align - Special Style

HTML Table

Contoh Tabel HTML

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Cobalah sendiri

---

Mendefinisikan Tabel HTML

Tabel HTML didefinisikan dengan <table> tag.

Setiap baris tabel ditentukan dengan <tr> tag. Header tabel didefinisikan dengan <th> tag. Secara default, judul tabel tebal dan terpusat. Data tabel / sel didefinisikan dengan <td> tag.

Contoh

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Cobalah sendiri "

Catatan:<td>elemen adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar, tabel lain, dll.

---

Tabel HTML - Menambahkan Batas

Jika Anda tidak menentukan batas untuk tabel, itu akan ditampilkan tanpa batas.

Perbatasan ditetapkan menggunakan properti CSS border :

Contoh

table, th, td {
  border: 1px solid black;
}

Cobalah sendiri "

---

HTML Table - Collapsed Borders

Jika Anda ingin perbatasan runtuh menjadi satu perbatasan, tambahkan properti CSS border-collapse:

Contoh

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Cobalah sendiri "

---

Tabel HTML - Menambahkan Padding Sel

Padding sel menentukan ruang antara konten sel dan batasnya.

Jika Anda tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa padding.

Untuk mengatur padding, gunakan properti CSS padding:

Contoh

th, td {
  padding: 15px;
}

Cobalah sendiri "

---

Tabel HTML - Judul rata-kiri

Secara default, judul tabel tebal dan terpusat.

Untuk menyelaraskan kiri judul tabel, gunakan properti CSS text-align:

Contoh

th {
  text-align: left;
}

Cobalah sendiri "

---

Tabel HTML - Menambahkan Spasi Perbatasan

Border spacing menentukan ruang antar sel.

Untuk mengatur spasi perbatasan untuk tabel, gunakan properti CSS border-spacing:

Contoh

table {
  border-spacing: 5px;
}

Cobalah sendiri "

Catatan: Jika tabel memiliki batas tepian yang runtuh, border-spacing tidak berpengaruh.

---

Tabel HTML - Sel yang Rentang Banyak Kolom

Untuk membuat rentang sel lebih dari satu kolom, gunakan colspan atribut:

Contoh

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Cobalah sendiri "

---

Tabel HTML - Sel yang Rentang Banyak Baris

Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan:

Contoh

<table style="width:100%">
  <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>

Cobalah sendiri "

---

Tabel HTML - Menambahkan Keterangan

Untuk menambahkan teks ke tabel, gunakan <caption> tag:

Contoh

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Cobalah sendiri "

Catatan: <caption>tag harus dimasukkan segera setelah <table>tag.

---

Gaya Khusus untuk Satu Tabel

Untuk menentukan gaya khusus untuk tabel khusus, tambahkan id atribut ke tabel:

Contoh

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Sekarang Anda dapat menentukan gaya khusus untuk tabel ini:

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

Cobalah sendiri "

Dan tambahkan lebih banyak gaya:

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

Cobalah sendiri "

---

Ringkasan Bab

• Gunakan <table>elemen HTML untuk mendefinisikan tabel
• Gunakan <tr>elemen HTML untuk mendefinisikan baris tabel
• Gunakan <td>elemen HTML untuk mendefinisikan data tabel
• Gunakan <th>elemen HTML untuk menentukan judul tabel
• Gunakan <caption>elemen HTML untuk mendefinisikan keterangan tabel
• Gunakan borderproperti CSS untuk mendefinisikan perbatasan
• Gunakan border-collapseproperti CSS untuk menutup batas sel
• Gunakan paddingproperti CSS untuk menambahkan padding ke sel
• Gunakan text-alignproperti CSS untuk menyelaraskan teks sel
• Gunakan border-spacingproperti CSS untuk mengatur jarak antar sel
• Gunakan colspanatribut untuk membuat rentang sel banyak kolom
• Gunakan rowspanatribut untuk membuat rentang sel banyak baris
• Gunakan idatribut untuk secara unik mendefinisikan satu tabel

Share this post