Tabel HTML
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
<style table = "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>
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan <tr> tag.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Catatan Tabel Data <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
Sebuah Tabel HTML dengan Atribut Perbatasan
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan dengan 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>
Catatan Atribut perbatasan adalah pada jalan keluar dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS:
contoh
tabel, th, td {
border: 1px solid hitam;
}
Ingatlah untuk menentukan 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
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
Sebuah Tabel HTML dengan sel Padding
Sel bantalan menentukan jarak antara isi sel dan perbatasannya.
Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
HTML Table Pos
Tabel judul didefinisikan dengan tag <th>.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<style table = "width: 100%">
<tr>
<th> Nama depan </ th>
<th> NamaBelakang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Ke kiri-menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
text-align: left;
}
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak perbatasan menentukan jarak antara sel-sel.
Untuk mengatur jarak perbatasan untuk meja, menggunakan properti CSS border-spacing:
contoh
tabel {
border-spacing: 5px;
}
Catatan Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, menggunakan atribut colspan:
contoh
<style table = "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>
Tabel Sel yang berkaitan dengan berbagai Baris
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<style table = "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>
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke meja, gunakan <caption> tag:
contoh
<style table = "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>
Catatan <caption> tag harus dimasukkan segera setelah <table> tag.
Gaya yang berbeda untuk Tabel Berbeda
Sebagian besar contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar meja masing-masing.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya dalam <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> NamaBelakang </ 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;
}
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;
}
Bab Ringkasan
Gunakan HTML <table> elemen untuk mendefinisikan tabel
Gunakan HTML <tr> elemen untuk menentukan baris tabel
Gunakan HTML <td> elemen untuk menentukan data tabel
Gunakan HTML <th> elemen untuk menentukan judul tabel
Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
Menggunakan properti perbatasan CSS untuk menentukan perbatasan
Menggunakan properti CSS border-collapse runtuh batas sel
Menggunakan properti CSS padding untuk menambahkan padding untuk sel
Menggunakan properti CSS text-align untuk menyelaraskan teks sel
Menggunakan properti CSS border-jarak untuk mengatur jarak antara sel-sel
Gunakan atribut colspan untuk membuat rentang sel banyak kolom
Gunakan atribut rowspan untuk membuat rentang sel banyak baris
Menggunakan atribut id untuk secara unik menentukan satu meja
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
<style table = "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>
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan <tr> tag.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Catatan Tabel Data <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
Sebuah Tabel HTML dengan Atribut Perbatasan
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan dengan 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>
Catatan Atribut perbatasan adalah pada jalan keluar dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS:
contoh
tabel, th, td {
border: 1px solid hitam;
}
Ingatlah untuk menentukan 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
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
Sebuah Tabel HTML dengan sel Padding
Sel bantalan menentukan jarak antara isi sel dan perbatasannya.
Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
HTML Table Pos
Tabel judul didefinisikan dengan tag <th>.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<style table = "width: 100%">
<tr>
<th> Nama depan </ th>
<th> NamaBelakang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Ke kiri-menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
text-align: left;
}
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak perbatasan menentukan jarak antara sel-sel.
Untuk mengatur jarak perbatasan untuk meja, menggunakan properti CSS border-spacing:
contoh
tabel {
border-spacing: 5px;
}
Catatan Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, menggunakan atribut colspan:
contoh
<style table = "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>
Tabel Sel yang berkaitan dengan berbagai Baris
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<style table = "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>
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke meja, gunakan <caption> tag:
contoh
<style table = "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>
Catatan <caption> tag harus dimasukkan segera setelah <table> tag.
Gaya yang berbeda untuk Tabel Berbeda
Sebagian besar contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar meja masing-masing.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya dalam <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> NamaBelakang </ 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;
}
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;
}
Bab Ringkasan
Gunakan HTML <table> elemen untuk mendefinisikan tabel
Gunakan HTML <tr> elemen untuk menentukan baris tabel
Gunakan HTML <td> elemen untuk menentukan data tabel
Gunakan HTML <th> elemen untuk menentukan judul tabel
Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
Menggunakan properti perbatasan CSS untuk menentukan perbatasan
Menggunakan properti CSS border-collapse runtuh batas sel
Menggunakan properti CSS padding untuk menambahkan padding untuk sel
Menggunakan properti CSS text-align untuk menyelaraskan teks sel
Menggunakan properti CSS border-jarak untuk mengatur jarak antara sel-sel
Gunakan atribut colspan untuk membuat rentang sel banyak kolom
Gunakan atribut rowspan untuk membuat rentang sel banyak baris
Menggunakan atribut id untuk secara unik menentukan satu meja
Tabel HTML
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
<style table = "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>
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan <tr> tag.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Catatan Tabel Data <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
Sebuah Tabel HTML dengan Atribut Perbatasan
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan dengan 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>
Catatan Atribut perbatasan adalah pada jalan keluar dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS:
contoh
tabel, th, td {
border: 1px solid hitam;
}
Ingatlah untuk menentukan 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
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
Sebuah Tabel HTML dengan sel Padding
Sel bantalan menentukan jarak antara isi sel dan perbatasannya.
Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
HTML Table Pos
Tabel judul didefinisikan dengan tag <th>.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<style table = "width: 100%">
<tr>
<th> Nama depan </ th>
<th> NamaBelakang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Ke kiri-menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
text-align: left;
}
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak perbatasan menentukan jarak antara sel-sel.
Untuk mengatur jarak perbatasan untuk meja, menggunakan properti CSS border-spacing:
contoh
tabel {
border-spacing: 5px;
}
Catatan Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, menggunakan atribut colspan:
contoh
<style table = "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>
Tabel Sel yang berkaitan dengan berbagai Baris
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<style table = "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>
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke meja, gunakan <caption> tag:
contoh
<style table = "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>
Catatan <caption> tag harus dimasukkan segera setelah <table> tag.
Gaya yang berbeda untuk Tabel Berbeda
Sebagian besar contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar meja masing-masing.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya dalam <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> NamaBelakang </ 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;
}
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;
}
Bab Ringkasan
Gunakan HTML <table> elemen untuk mendefinisikan tabel
Gunakan HTML <tr> elemen untuk menentukan baris tabel
Gunakan HTML <td> elemen untuk menentukan data tabel
Gunakan HTML <th> elemen untuk menentukan judul tabel
Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
Menggunakan properti perbatasan CSS untuk menentukan perbatasan
Menggunakan properti CSS border-collapse runtuh batas sel
Menggunakan properti CSS padding untuk menambahkan padding untuk sel
Menggunakan properti CSS text-align untuk menyelaraskan teks sel
Menggunakan properti CSS border-jarak untuk mengatur jarak antara sel-sel
Gunakan atribut colspan untuk membuat rentang sel banyak kolom
Gunakan atribut rowspan untuk membuat rentang sel banyak baris
Menggunakan atribut id untuk secara unik menentukan satu meja
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
<style table = "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>
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan <tr> tag.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Catatan Tabel Data <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
Sebuah Tabel HTML dengan Atribut Perbatasan
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan dengan 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>
Catatan Atribut perbatasan adalah pada jalan keluar dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS:
contoh
tabel, th, td {
border: 1px solid hitam;
}
Ingatlah untuk menentukan 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
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
Sebuah Tabel HTML dengan sel Padding
Sel bantalan menentukan jarak antara isi sel dan perbatasannya.
Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
tabel, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
HTML Table Pos
Tabel judul didefinisikan dengan tag <th>.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<style table = "width: 100%">
<tr>
<th> Nama depan </ th>
<th> NamaBelakang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Ke kiri-menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
text-align: left;
}
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak perbatasan menentukan jarak antara sel-sel.
Untuk mengatur jarak perbatasan untuk meja, menggunakan properti CSS border-spacing:
contoh
tabel {
border-spacing: 5px;
}
Catatan Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, menggunakan atribut colspan:
contoh
<style table = "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>
Tabel Sel yang berkaitan dengan berbagai Baris
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<style table = "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>
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke meja, gunakan <caption> tag:
contoh
<style table = "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>
Catatan <caption> tag harus dimasukkan segera setelah <table> tag.
Gaya yang berbeda untuk Tabel Berbeda
Sebagian besar contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar meja masing-masing.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya dalam <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> NamaBelakang </ 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;
}
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;
}
Bab Ringkasan
Gunakan HTML <table> elemen untuk mendefinisikan tabel
Gunakan HTML <tr> elemen untuk menentukan baris tabel
Gunakan HTML <td> elemen untuk menentukan data tabel
Gunakan HTML <th> elemen untuk menentukan judul tabel
Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
Menggunakan properti perbatasan CSS untuk menentukan perbatasan
Menggunakan properti CSS border-collapse runtuh batas sel
Menggunakan properti CSS padding untuk menambahkan padding untuk sel
Menggunakan properti CSS text-align untuk menyelaraskan teks sel
Menggunakan properti CSS border-jarak untuk mengatur jarak antara sel-sel
Gunakan atribut colspan untuk membuat rentang sel banyak kolom
Gunakan atribut rowspan untuk membuat rentang sel banyak baris
Menggunakan atribut id untuk secara unik menentukan satu meja
Tidak ada komentar:
Posting Komentar