Cara Membuat Tabel HTML 5 Dengan CSS Nyekrip » HTML » Tips Trik HTML » Cara Membuat Tabel HTML 5 Dengan CSS Updated on Mei 9, 2015 Ad...
Cara Membuat Tabel HTML 5 Dengan CSS
Nyekrip » HTML » Tips Trik HTML » Cara Membuat Tabel HTML 5 Dengan CSS
Updated on Mei 9, 2015 Admin Tips Trik HTML 24 Comments
Cara-Membuat-Tabel-HTML-5-Dengan-CSS-Nyekrip
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_Cara_Membuat_Tabel_HTML_5_Dengan_CSS_Nyekrip
Hasil Akhir
Download Skrip
Run Skrip
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:
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_Cara_Membuat_Tabel_HTML_5_Dengan_CSS_Nyekrip
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
| Nyekrip | Indonesia | Web |
| Nyekrip 2 | Indonesia 2 | Tutorial |
| Nyekrip 3 | Indonesia 3 | Indonesia |
