dan Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag , tag , dan tag :- Tag
digunakan untuk memulai tabel- Tag
adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.- Tag
| adalah singkatan dari table data, digunakan untuk menginput data ke tabel. Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML: Contoh penggunaan tag :
Penggunaan Tag Tabel
Belajar Tag Tabel
| Baris 1, Kolom 1 |
Baris 1, Kolom 2 |
Baris 1, Kolom 3 |
| Baris 2, Kolom 1 |
Baris 2, Kolom 2 |
Baris 2, Kolom 3 |
| Baris 3, Kolom 1 |
Baris 3, Kolom 2 |
Baris 3, Kolom 3 |
| Baris 4, Kolom 1 |
Baris 4, Kolom 2 |
Baris 4, Kolom 3 |
Perhatikan bahwa pada tag kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.eBook HTML Uncover Duniailkom Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom. Tabel [Table] adalah sebuah data tabular dalam bentuk grid yang terdiri dari kolom [column], baris [row] dan celll yang merupakan pertemuan antara kolom dan baris. HTML
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
2 element merepresentasikan data dengan lebih dari satu dimensi dalam bentuk sebuah tabel [table].Table di dalam HTML dibentuk dengan sebuah baris [row], tepatnya menggunakan element
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
3 yang merupakan kepanjangan dari table row. Adapun element pendukung lain yang membentuk sebuah table adalah
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
4 [table header] dan
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
5 [table data]. menunjukkan sebuah cell, sedangkan menunjukkan cell induk dan ditandai dengan tulisan cetak tebal. Element lain yang berkaitan dan digunakan dalam sebuah HTML table adalah , , , , dan | .TIPS HTML table tidak boleh digunakan untuk layout halaman atau tidak tepat digunakan untuk mendesain tata letak beberapa element dalam sebuah tabel. Attributes
Atribut HTML Tag
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
2
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
7
Digunakan sebagai antarmuka untuk memberi kemampuan menyortir [memilih-milih] table. Value:
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
7Attribute lain yang sudah tidak didukung oleh HTML5 tidak dibahas disini. Global Attributes
Atribut Secara Global [Keseluruhan] tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.Silahkan, lihat referensi mengenai HTML Global Attribute Event Attributes
Atribut event [Peristiwa] tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa [kejadian]. Contoh: menjalankan script [JavaScript] ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.Silahkan, lihat referensi mengenai HTML Events Attribute Example
Contoh HTML
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
2Contoh 1Contoh HTML table sederhana yang dibentuk dengan baris [
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
3] dan cell [
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
5].HTML editor
No.
Nama
Tempat Lahir
1.
Rodiah
Serang
Contoh 2Contoh HTML table dengan tambahan element
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
Harap diperhatikan: /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
2 ditulis setelah /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
3 [ditengah-tengah], bukannya setelah /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
4 [terakhir]. Meskipun demikian, /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
2 akan terlihat pada baris akhir tabel secara visual.Untuk mempercantik table, CSS style mungkin diperlukan seperti ini: /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
Untuk Contoh 1 dan Contoh 2, dapat diedit dan dilihat hasilnya pada Demo Editor dibawah ini: Contoh LengkapContoh source code lengkap disertai dengan link "editor" untuk mencoba [try it] dan melihat hasil [preview] kode. SOURCE editor
Demo HTML table tag - by apacara.com
/* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
Contoh 1:
No.
Nama
Tempat Lahir
1.
Rodiah
Serang
Contoh 2:
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
Pada Contoh 1, table tidak diberi CSS style apapun, sedangkan Contoh 2 diberi sedikit CSS style sehingga terlihat kotak-kotak seperti tabel pada umumnya.
Contoh Lainnya Contoh lainnya yang berkaitan, untuk memperkaya materi yang disampaikan dapat dilihat dibawah ini: Contoh 3
Contoh HTML table element dengan tambahan , dan HTML editor
Juara Lomba Bulu Tangkis Antar Kelas IX
Hadiah
Juara 1 mendapatkan Uang Pembinaan sebesar Rp. 3.000.000, Juara 2 sebesar Rp. 2.000.000 dan Juara 3 sebesar Rp. 1.000.000.
No.
Kelas
Juara
1.
Kelas IX A
Juara 1
2.
Kelas IX C
Juara 2
3.
Kelas IX B
Juara 3
CSS /* style untuk contoh 3 */
table#table3 {
border-collapse: collapse;
width: 100%;
}
table#table3 td, table#table3 th {
border: thin solid #ccc;
padding: .2em;
}
table#table3 thead tr th:first-child {
width: 40px;
}
Contoh 4Contoh HTML table yang ditulis di dalam element HTML editor
Juara Kelas Tahun Ajaran 2015-2016 Kelas VIII
Ranking 1-3 masing-masing mendapatkan uang saku sebesar Rp. 500.000.
No.
Nama
Nilai Rata-Rata
Ranking
1.
Suntiyem
9.5
Ranking 1
2.
Markonah
9.0
Ranking 2
3.
Sarboah
8.5
Ranking 3
CSS /* style untuk contoh 4 */
table#table4 {
border-collapse: collapse;
width: 100%;
}
table#table4 td, table#table4 th {
border: thin solid #ccc;
padding: .2em;
}
figure figcaption {
text-align: center;
font-weight: bold;
}
Contoh 5Contoh HTML table dengan /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
6 dan /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
7 attribute di dalam element serta penempatan /* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
8 yang berada dibawah table menggunakan CSS.
Apa perintah HTML untuk membuat table *?
Tag untuk Membuat Tabel di HTML
Tag untuk membungkus bagian kepala tabel. Tag untuk membungkus bagian body dari tabel. Tag [tabel row] untuk membuat baris. Tag [table data] untuk membuat sel.
Apa itu TR dan TD dalam HTML?
Tag berfungsi untuk membuat baris pada tabel [table row]. Tag digunakan untuk membuat kolom di dalam baris tabel di HTML sehingga akan membentuk sel [table data].
Apa HTML yang benar untuk membuat hyperlink?
Apa itu td di HTML?
Elemen digunakan untuk membuat kolom atau sel di setiap baris pada tabel.
| |
| |