tutorial membuat tabel dengan html
pagi sobat berhubung kemaren gua baru aja di ajarin HTML ma guru gua,jadi sekarang gua pengen nge share yang udah gua pelajarin di kelas aja lah gua juga lagi males sihh
( yaaa,,,, sebenernya ni karna gak ada materi blog
hihi..!!)
( yaaa,,,, sebenernya ni karna gak ada materi blog
hihi..!!)OKehhhh! kali ini gua pengen berbagi caranya membuat serta tag-tag apa saja yang diperlukan unuk membuat tabel dengan koding HTML. are you ready!!!!, if you ready lets go..cek…cek…cekidooott!!!.
1. alat perang :
- teks editor contoh : notepad,notepad++,dll
- browser contoh : mozilla,IE,safari,chrome,dll
2. langkah kerja :
- buka notepadnya mas mba
- tulis script htmlnya
- lalu save dengan ekstensi “.html” contoh : index.html
- trusssszz buka pake the browser.
3. berikut ini contoh scriptnya :
1. script tabel sederhana :
<table border= “2”><tr>
<td>ini kolom 1 baris 1</td>
<td>ini kolom 2 baris 1</td>
</tr>
<tr>
<td>ini kolom 1 baris 2</td>
<td>ini kolom 2 baris 2</td>
</tr>
<tr>
<td>ini kolom 1 baris 3</td>
<td>ini kolom 2 baris 3</td>
</tr>
</table>
keterangan tag :
atribut border digunakan untuk memberi garis tabel<table></table> = untuk membuat tabel tentunya
<tr></tr> = untuk membuat baris baru,
<td></td> = untuk membuat kolom baru,
2. attribut colspan dan rowspan :
<table><tr>
<td colspan=”2”>ini kolom 1&2 baris ke 1 yang sudah di gabung</td>
</tr>
<tr>
<td rowspan=”2”>ini kolom 1 baris 2&3</td>
<td>ini kolom 2 baris 2</td>
</tr>
<tr>
<td>ini kolom 2 baris 3</td>
</tr>
</table>
keterangan tag :
atribut colspan berguna untuk menggabungakan cell.(kalo di ibaratkan di ms word pake cell aligment)atribut rowspan berguna untuk menggabungkan baris.
3. penggunaan tag “th”, dan “caption” :
<table border= “2”><caption> caption</caption>
<tr>
<th>ini kolom 1 baris 1</th>
<th>ini kolom 2 baris 1</th>
</tr>
<tr>
<td>ini kolom 1 baris 2</td>
<td>ini kolom 2 baris 2</td>
</tr>
<tr>
<td>ini kolom 1 baris 3</td>
<td>ini kolom 2 baris 3</td>
</tr>
</table>
keterangan tag :
tag “<th></th>” digunakan untuk menjadikan kolom2 di baris pertama menjadi sebuah headersedangkan tag “<caption></caption>” digunakan untuk membuat judul tabel yang kita buat
4. atribut “cellpadding” dan “cellspacing”
<table cellpadding=”50%” cellspacing=”10%”><tr>
<td colspan=”2”>ini kolom 1&2 baris ke 1 yang sudah di gabung</td>
</tr>
<tr>
<td rowspan=”2”>ini kolom 1 baris 2&3</td>
<td>ini kolom 2 baris 2</td>
</tr>
<tr>
<td>ini kolom 2 baris 3</td>
</tr>
</table>
keterangan tag :
atribut cellpadding berguna untuk mengatur jarak huruf dengan garis tepi coloumnatribut cellspacing untuk mengatur jarak antara cell dengan cell
5. membuat tabel dalam tabel
<tabel border=”1” width=”300” height=”500”><caption>tabel dalam tabel</caption>
<tr>
<td>ini dia tabelnya
<table border=”1” width=”200” height=”200”>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
<td>ini kolom ke 2</td>
</tr>
</table>
keterangan :
kurang lebih tabelnya akan seperti ini:
| ini dia tabelnya | ini kolom ke dua |
akhirnya selesai juga nih postingan gua kali ini,semoga bermanfaat bagi kalian yak…
.sebenarnya kita juga bisa membuat web hanya dengan menggunakan tabel lhooo.
tapi kali ini tidak dibahas dalam postingan.
Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.