Cara Membuat Tabel HTML 5 Dengan CSS
Halo Nyekripper! 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 5
Tabel bukanlah hal yang baru dalam HTML, tetapi ada beberapa tag baru yang tersedia di HTML5. 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 5
Berikut adalah standar kode yang diperlukan untuk membuat tabel:
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.
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 5: Menambahkan Header dan Footer
Kita dapat menggunakan tag berikut untuk membuat dan format header dan footer untuk tabel:
<th>– digunakan untuk menunjukkan header tabel-thsingkatan “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.
Lebih dalam dengan atribut kunjungi artikel ” ATRIBUT DALAM ELEMEN HTML “.
Oke langsung saja ketik-kan skrip berikut.
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 5: 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>.
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
49
50
51
52
|
<!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>.
Dengan memahami cara membuat tabel, mungkin anda ingin mempelajari bagaimana cara membuat website sederhana dengan HTML5 dengan mengunjungi artikel ” Cara Membuat Website Sederhana dengan HTML 5 “.
Jika skrip diatas dijalankan, maka akan nampak seperti gambar berikut.
Hasil Akhir
Sekian tutorial cara membuat tabel HTML 5 dengan CSS, penggunaan tabel merupakan cara yang bagus untuk menyajikan data. Tag HTML5 menghadirkan kesederhanaan dalam membuat dan format tabel.
