Belajar membuat tabel dalam HTML dan css
Format Tabel Halaman Web
Pada kesempatan kali ini kita akan
membahas cara membuat tabel HTML 5 dengan CSS, membuat tabel di HTML5 menjadi
lebih populer karena munculnya beberapa tag tabel baru dalam HTML5 dan elemen
lain yang tersedia di HTML5. Pada tutorial ini akan menunjukkan cara untuk
membuat dan format tabel menggunakan tag tabel dan elemen HTML5.
Berikut adalah tampilan tabel dari tutorial ini.
Hasil Akhir
Untuk mengetahui cara membuat tabel HTML5 dengan CSS,
silahkan ikuti langkah-langkah berikut.
Tabel HTML
Tabel bukanlah hal yang baru dalam HTML, tetapi ada
beberapa tag baru yang tersedia di HTML.
Untuk menentukan tabel di HTML, kita perlu menggunakan tag <table>. Tabel dibagi menjadi baris dengan
menggunakan tag
<tr> dan kolom
dengan menggunakan tag <td>.
Tabel dapat mengandung elemen kolom, elemen baris,
header, footer dan elemen lainnya. Pada Tutorial ini akan menunjukkan cara
untuk menggunakan berbagai tag tabel tersebut dan bagaimana untuk format
elemen-elemen tersebut menggunakan CSS (style sheet).
Cara Membuat Tabel HTML
Berikut adalah standar kode yang diperlukan untuk
membuat tabel:
Skrip HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table style="width:300px">
<tr>
<td>Nyekrip</td>
<td>Indonesia</td>
<td>Web</td>
</tr>
<tr>
<td>Nyekrip 2</td>
<td>Indonesia 2</td>
<td>Tutorial</td>
</tr>
<tr>
<td>Nyekrip 3</td>
<td>Indonesia 3</td>
<td>Indonesia</td>
</tr>
</table>
|
Jika skrip diatas dijalankan, maka akan tampil seperti
gambar berikut.
Tampilan
Standar
Perlu diperhatikan bahwa secara default HTML tidak
menerapkan border. Untuk menerapkan border pada tabel, kita harus menambahkan
atribut border pada tag tabel.
Skrip HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table border="1"
style="width:300px">
<tr>
<td>Nyekrip</td>
<td>Indonesia</td>
<td>Web</td>
</tr>
<tr>
<td>Nyekrip 2</td>
<td>Indonesia 2</td>
<td>Tutorial</td>
</tr>
<tr>
<td>Nyekrip 3</td>
<td>Indonesia 3</td>
<td>Indonesia</td>
</tr>
</table>
|
Setelah menambahkan atribut border, maka tabel akan
terlihat seperti berikut.
Tabel Dengan
Border
Membuat Tabel HTML :
Menambahkan Header dan Footer
Kita dapat menggunakan tag berikut untuk membuat dan
format header dan footer untuk tabel:
- <th> –
digunakan untuk menunjukkan header tabel- th singkatan “table header”
- <thead> – tag
ini dapat digunakan untuk mengelompokkan header dan format
konten sebagai kesatuan header (kepala) dari tabel.
- <tbody> –
tag ini dapat digunakan untuk mengelompokkan isi tabel dan format
konten sebagai body (tubuh) dari tabel.
- <tfoot> –
tag ini dapat digunakan untuk mengelompokkan bagian isi tabel yang
dijadikan footer .
Tiap teks yang berada dalam sel yang telah di-format
menggunakan tag
<th> secara
otomatis akan ditengah-kan dan di buat tebal. Sedangkan teks yang
berada dalam elemen tabel yang telah didefinisikan dengan menggunakan tag body <td> akan
di-setting rata kiri (left aligned) dan tidak ada perubahan dalam tampilan
teks.
Semua atribut HTML5 dapat digunakan untuk memformat tabel
menggunakan tag
<thead>, <tbody> dan <tfoot>. Dalam
tutorial ini, kita akan menggunakan atribut warna untuk format berbagai elemen
tabel dalam warna yang berbeda. Kita akan mengatur header dengan warna hijau,
tubuh dengan warna biru dan footer dengan warna merah.
Skrip HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table,th,td
{border:1px solid black;}
</style>
</head>
<body>
<table border="1"
style="width:300px">
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nyekrip</td>
<td>Indonesia</td>
<td>Web</td>
</tr>
<tr>
<td>Nyekrip 2</td>
<td>Indonesia 2</td>
<td>Tutorial</td>
</tr>
<tr>
<td>Nyekrip 3</td>
<td>Indonesia 3</td>
<td>Indonesia</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
</body>
</html>
|
Jika skrip diatas dijalankan, maka akan tampil seperti
gambar berikut.
Penambahan
Header Footer Tabel
Tabel dengan HTML : Memformat
Kolom
Tag kelompok kolom memungkinkan kita untuk menentukan
format untuk satu atau lebih kolom dalam tabel. Jika kita ingin menambahkan
format khusus untuk kolom di tabel, maka kita dapat menentukan elemen dan
format menggunakan tag <colgroup>.
Atribut span dalam tag <colgroup> dapat digunakan untuk menentukan
style pada beberapa kolom, jika atribut ini tidak didefinisikan maka style akan
diterapkan hanya pada satu kolom. Tag ini berguna untuk menerapkan style untuk
sebagian atau seluruh kolom, sangat merepotkan jika harus mengulangi dalam
penerapan style untuk setiap kolom.
Dalam tutorial ini kita akan membuat background pada
kolom ke-satu dan ke-dua berwarna hijau, dan kolom ketiga berwarna merah.
Mari ketik-kan skrip berikut untuk mencoba menggunakan
tag <colgroup>.
Skrip HTML
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table,th,td
{border:1px solid black;}
</style>
</head>
<body>
<table border="1"
style="width:300px">
<colgroup>
<col
span="2" style="background-color:#90C695">
<col
style="background-color:#89C4F4">
</colgroup>
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nyekrip</td>
<td>Indonesia</td>
<td>Web</td>
</tr>
<tr>
<td>Nyekrip 2</td>
<td>Indonesia 2</td>
<td>Tutorial</td>
</tr>
<tr>
<td>Nyekrip 3</td>
<td>Indonesia 3</td>
<td>Indonesia</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
</body>
</html>Perlu diperhatikan bahwa penggunaan tag <colgroup> harus menjadi anak dari elemen <table>, penempatan-nya setelah setiap elemen <caption> dan sebelum elemen <thead>, <tbody>, <tfoot>, dan <tr>. Sedangkan untuk menentukan properti yang berbeda untuk kolom dalam <colgroup>, gunakan tag <col> dalam tag <colgroup>.
Jika skrip diatas dijalankan, maka akan nampak seperti
gambar berikut.
Hasil Akhir
Sekian tutorial cara membuat tabel HTML dengan CSS,
penggunaan tabel merupakan cara yang bagus untuk menyajikan data. Tag HTML menghadirkan kesederhanaan dalam membuat dan
format tabel.
Sekian Terimakasih , Semoga Membantu Bagi yang Membutuhkan
terima kasih tutorial table nya , ane coba bikin juga
BalasHapusMy blog