TABLE HTML

Number	First Name	Last Name	Points
1	Eve	Jackson	94
2	John	Doe	80
3	Adam	Johnson	67
4	Jill	Smith	50

HTML Table Contoh
Nomor Nama Depan Nama Belakang Poin
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

________________________________________
Mendefinisikan Tabel HTML
contoh
<span tabel = "width: 100%">
   <tr>
     <td> Jill </ td>
     <td> Smith </ td>
     <td> 50 </ td>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Coba Sendiri »
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan tag <tr>.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
  Data tabel <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
________________________________________
Sebuah Tabel HTML dengan Atribut Border
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan menggunakan atribut border:
contoh
<table border = "1" style = "width: 100%">
   <tr>
     <td> Jill </ td>
     <td> Smith </ td>
     <td> 50 </ td>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Coba Sendiri »
  Atribut border sedang dalam perjalanan dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti border CSS:
contoh
meja, th, td {
     border: 1px solid hitam;
}

Coba Sendiri »
Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.
________________________________________
Sebuah Tabel HTML dengan Borders Collapsed
Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse:
contoh
meja, th, td {
     border: 1px solid hitam;
     border-collapse: collapse;
}

Coba Sendiri »

________________________________________
Sebuah Tabel HTML dengan Sel Padding
Sel bantalan menentukan ruang antara isi sel dan perbatasannya.
Jika Anda tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa bantalan.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
meja, th, td {
     border: 1px solid hitam;
     border-collapse: collapse;
}
th, td {
     padding: 15px;
}

Coba Sendiri »

________________________________________
HTML Table Pos
Tabel judul didefinisikan dengan <th> tag.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<span tabel = "width: 100%">
   <tr>
     <th> Nama depan </ th>
     <th> Nama belakang penumpang </ th>
     <th> Poin </ th>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Coba Sendiri »
Untuk kiri menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
     text-align: left;
}

Coba Sendiri »

________________________________________
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak Border menentukan ruang antara sel.
Untuk mengatur jarak perbatasan untuk tabel, menggunakan properti CSS border-spacing:
contoh
table {
     border-spacing: 5px;
}

Coba Sendiri »
  Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
________________________________________
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan:
contoh
<span tabel = "width: 100%">
   <tr>
     <th> Nama </ th>
     <th colspan = "2"> Telepon </ th>
   </ tr>
   <tr>
     <td> Bill Gates </ td>
     <td> 555 77 854 </ td>
     <td> 555 77 855 </ td>
   </ tr>
</ table>

Coba Sendiri »

________________________________________
Tabel Sel yang berkaitan dengan berbagai Rows
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<span tabel = "width: 100%">
   <tr>
     <th> Nama Pertama: </ th>
     <td> Bill Gates </ td>
   </ tr>
   <tr>
     <th rowspan = "2"> Telepon: </ th>
     <td> 555 77 854 </ td>
   </ tr>
   <tr>
     <td> 555 77 855 </ td>
   </ tr>
</ table>

Coba Sendiri »

________________________________________
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke tabel, gunakan <caption> tag:
contoh
<span tabel = "width: 100%">
   <caption> tabungan bulanan </ caption>
   <tr>
     <th> Bulan </ th>
     <th> Tabungan </ th>
   </ tr>
   <tr>
     <td> Januari </ td>
     <td> $ 100 </ td>
   </ tr>
   <tr>
     <td> Februari </ td>
     <td> $ 50 </ td>
   </ tr>
</ table>

Coba Sendiri »
  The <caption> tag harus dimasukkan segera setelah <table> tag.
________________________________________
Gaya Berbeda untuk Tabel Berbeda
Sebagian contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar dari setiap meja.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya di <head>, bagaimanapun, menentukan gaya untuk semua tabel di halaman.
Untuk menentukan gaya khusus untuk meja khusus, menambahkan atribut id ke meja:
contoh
<table id = "T01">
   <tr>
     <th> Nama depan </ th>
     <th> Nama belakang penumpang </ th>
     <th> Poin </ th>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Sekarang Anda dapat menentukan gaya yang berbeda untuk tabel ini:
tabel # T01 {
     width: 100%;
     background-color: # f1f1c1;
}

Coba Sendiri »

Dan menambahkan lebih gaya:
tabel # T01 tr: nth-anak (bahkan) {
     background-color: #eee;
}
tabel # T01 tr: nth-anak (aneh) {
     background-color: # fff;
}
th tabel # T01 {
     warna: putih;
     background-color: hitam;
}

Coba Sendiri »

________________________________________
Bab Ringkasan
• Gunakan HTML <table> elemen untuk mendefinisikan tabel
• Gunakan HTML <tr> elemen untuk mendefinisikan baris tabel
• Gunakan HTML <td> elemen untuk menentukan data tabel
• Gunakan HTML <th> elemen untuk menentukan judul tabel
• Gunakan HTML <caption> elemen untuk menentukan judul tabel
• Gunakan properti perbatasan CSS untuk menentukan perbatasan
• Gunakan properti CSS border-collapse runtuh batas sel
• Gunakan properti CSS padding untuk menambahkan padding untuk sel
• Gunakan properti CSS text-align untuk menyelaraskan teks sel
• Gunakan properti CSS border-spacing untuk mengatur jarak antar sel
• Gunakan atribut colspan untuk membuat rentang sel banyak kolom
• Gunakan atribut rowspan untuk membuat rentang sel banyak baris
• Gunakan atribut id untuk secara unik mendefinisikan satu meja