HTML Tables

Tabel Contoh 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 Table HTML

Tabel HTML didefinisikan dengan <table>tag.

Setiap baris tabel didefinisikan dengan <tr>tag. Sebuah header tabel didefinisikan dengan <th>tag. Secara default, judul tabel yang berani dan berpusat. Sebuah 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: The <td>elemen adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar, tabel lain, dll

HTML Table - Menambahkan Border sebuah

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

Sebuah perbatasan diatur menggunakan CSS borderproperti:

Contoh

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

Cobalah sendiri "

Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.

---

HTML Table - Borders Runtuh

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

Contoh

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

Cobalah sendiri "

---

HTML Table - Menambahkan Sel Padding

Sel Padding menentukan ruang antara isi sel dan perbatasannya.

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

Untuk mengatur padding, gunakan CSS paddingproperti:

Contoh

th, td {
  padding: 15px;}

Cobalah sendiri "

---

HTML Table - Kiri-align Pos

Secara default, judul tabel yang berani dan berpusat.

Untuk meninggalkan-align tajuk tabel, gunakan CSS text-alignproperti:

Contoh

th {
  text-align: left;}

Cobalah sendiri "

---

HTML Table - Menambahkan Border Spasi

spasi perbatasan menentukan ruang antara sel-sel.

Untuk mengatur perbatasan jarak meja, gunakan CSS border-spacingproperti:

Contoh

table {
  border-spacing: 5px;}

Cobalah sendiri "

Catatan: Jika tabel memiliki batas runtuh, border-spacingtidak berpengaruh.

---

HTML Table - Sel yang Span Banyak Kolom

Untuk membuat rentang sel lebih dari satu kolom, gunakan colspanatribut:

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 "

---

HTML Table - Sel yang Span Banyak Baris

Untuk membuat rentang sel lebih dari satu baris, gunakan rowspanatribut:

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 "

---

HTML Table - Menambahkan Caption

Untuk menambahkan keterangan ke meja, 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: The <caption>tag harus dimasukkan segera setelah <table>tag.

---

Sebuah Gaya Khusus untuk One Table

Untuk menentukan gaya khusus untuk meja khusus, menambahkan id atribut ke meja:

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 menambahkan lebih 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 "

---

Bab Ringkasan

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

---

Latihan HTML

Uji Diri Dengan Latihan

Olahraga:

Menambahkan baris meja dengan dua header tabel.

Kedua header tabel harus memiliki nilai "Nama" dan "Umur".

<Table>
  
    
    
  
  <tr>
    <td> Jill Smith </ td>
    <td> 50 </ td>
  </ tr>
</ table>

Mulai Latihan

---

HTML Table Tag

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

Untuk daftar lengkap dari semua tag HTML yang tersedia, kunjungi HTML Tag Referensi .