tutorial membuat tabel dengan html

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 header
sedangkan 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 coloumn
atribut 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>&nbsp</td>
     <td>&nbsp</td>
     </tr>
      <tr>
      <td>&nbsp</td>
      <td>&nbsp</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.