25 April 2016

Cara Membuat Tabel dalam HTML


 ok,guys kali ini saya akan mengepos tentang cara membuat tabel dalam html meskipun saya tidak anak RPL tapi saya akan mencoba untuk mempelajarinya.

     Tabel dalam website banyak digunakan untuk menyajikan informasi yang terdiri dari baris dan kolom agar tampak lebih rapi dan mudah dipahami.  Dengan kode HTML sederhana kita dapat membuat tabel statis. Dalam html tabel diawali dengan tag <table> dan diakhiri tag </table>,kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris  baru pada tabel kemudia tag <td>(table data) adalah sebagai tempat data yang ditampilkan .
Berikut contoh tabel sederhana dalam HTML :
<table border=”1″>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
hasi dari kode HTML diatas  :

Keterangan tag dalam membuat tabel dan atribut HTML:
a . tag <table> ….. </table>
Tag awal dan akhir dalam membuat tabel di HTML.tag tabel memiliki beberapa atribut seperti height,width,border lainya untuk mengatur tinggi tabel ,lebar tabel,dan tebal garis tepi,dan masih banyak lagi atribut tabel dalam HTML.

b . tag <th> ….. </th>
Tag <th> pengganti tag <td> digunakan untuk membuat header titel dari baris maupun kolom. Secara default teks pada tag <th> menggunakan teks tebal dan letaknya di tengah pada baris.

c . tag <caption> ….. </caption>
Tag caption digunakan untuk membentuk judul pada table . Judul dapat ditandai dengan apa pun . Posisi default di bagian atas table.

d . tag <tr> ….. </tr>
 Mendefinisika baris dalam tabel. Kita dapat mengatur teks dalam satu baris banyak kolom menggunakan : atribut color (warna), letak teks,dll seperti rata kiri, rata kanan, warna teks merah, dll.

e . tag <td> ….. </td >
tag td digunakan untuk membuat kolom tabel yang berisi data. Tag td memiliki beberapa atribut di antaranya color, background. Pada table kita bisa membuatbanyak kolom dengan tag td.

f . atribut <colspan>
Atribut colspan pada html digunakan untuk menggabungkan dua atau lebih kolom agar lebih menarik. Nilai bisa bervariasi  tergantung kebutuhan misalnya <td colspan=”2″>…</td>. Yang artinya menggabungkan 2 kolom.

h. atribut <rowspan)>
dalam html sederhana atribut rowpan digunakan untuk menggabungkan dua atau lebih baris pada html.

Mengatur lebar dan tinggi tabel (table) html

kita bisa mengatur lebar dan tinggi dalam html dengan width dan height.Kita juga bisa mengatur tabel menggunakan CSS agar ebih indah dan cantik. he….! Ingat satuan dalam mengatur tinggi dan lebar tabel menggunakan satuan pixel dan persen.
Berikut contoh tabelnya :
<table border=”1″ width=”300″ height=”100″>
<tr>
<td style="height:40px;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>


0 komentar:

Posting Komentar