Menyajikan Pembuatan Tabel Di Web

Tabel yaitu data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga gampang untuk disimak.

Tabel merupakan cara untuk menampilkan gosip dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, dipakai Tag<Table>. Elemen table berisi property <tr> untuk memilih baris (table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table (table data). Struktur elemen table yaitu sebagai berikut:
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan
tag <th> ….. </th>

Atribut Elemen Tabel
  1. Width =panjang(lebar table, pixel atau persen)
  2. Height =panjang (tinggi table, pixel atau persen)
  3. Border =pixel(tebal garis tepi)
  4. Cellspacing =pixel(spasi antar sel)
  5. Cellpadding =pixel(spasi di dalam sel)
  6. Align = left, center, right (perataan table)
  7. Bgcolor =warna(warna latar belakang table)
  8. Colspan = penggabungan kolom
  9. Rowspan = penggabungan baris
 Tabel yaitu data yang berisi iktisar sejumlah data gosip Menyajikan Pembuatan Tabel Di Web
Atribut Table Row
  1. Align =[left|center|right] (perataan sebaris sel secara horizontal)
  2. Valign =[top|middle|bottom] (perataaan sebaris sel secara vertical)
  3. Bgcolor =warna(warna latar belakang baris)

Atribut Tabel Data
  1. Align =[left|center|right](perataan horizontal)
  2. Width =[top|middle|bottom](perataan vertical)
  3. Height =pixel(tinggi sel, pixel atau persen)
  4. Bgcolor =warna(warna latar belakang sel)

Berikut referensi tabel dengan rowspan dan colspan :
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>

Maka Hasilnya sebagai berikut :
baris 1 kolom 1 baris 1 kolom 2
baris 2 kolom 1
baris 3 kolom 1 baris 3 kolom 2

Contoh lainnya yaitu :
<table border="1"><caption>Daftar Wiraniaga</caption> <tbody>
<tr><th colspan="2" rowspan="2">WIRANIAGA</th><th colspan="3">KOTA</th></tr>
<tr><th>Semarang</th><th>Kudus</th><th>Solo</th></tr>
<tr> </tr>
<tr><th rowspan="2">Jenis Kelamin</th><th>Pria</th><td align="right">30</td><td align="right">20</td><td align="right">30</td></tr>
<tr><th>Wanita</th><td align="right">20</td><td align="right">8</td><td align="right">18</td></tr>
</tbody></table>

Maka kesudahannya yaitu sebagai berikut.
Daftar Wiranaga
WIRANIAGAKOTA
SemarangKudusSolo
Jenis KelaminPria302030
Wanita20818

Buatlah dokumen HTML sehingga menghasilkan tampilan tabel menyerupai berikut ini (aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapat dua buah tampilan yang berbeda, sebagaimana dibawah ini ).

Tabel 1
<table border="1"><tbody>
<tr style="text-align: left;" valign="top"><th width="132">Nama</th><th width="132">Usia</th></tr>
<tr valign="top"><td>Ali</td><td >25</td></tr>
<tr valign="top"><td >Fahmianto</td><td>27</td></tr>
</tbody></table>

Hasilnya yaitu sebagai berikut.
NamaUsia
Ali25
Fahmianto27

Tabel 2:
<table border="1"><tbody>
<tr style="line-height: 40px; text-align: center;" valign="bottom"><th width="132">Nama</th><th width="132">Usia</th></tr>
<tr style="line-height: 40px; text-align: left;" valign="top"><td width="215">Ali</td><td width="132">25</td></tr>
<tr style="line-height: 40px; text-align: left;" valign="top"><td width="215">Fahmianto</td><td width="132">27</td></tr>
</tbody></table>

Hasilnya yaitu sebagai berikut :
NamaUsia
Ali25
Fahmianto27

Menyajikan Tabel dengan Spaning
Ada kalanya kita menciptakan table dengan menggabungkan baris, ataupun kolom. Berikut ini referensi tabel yang menggabungkan baris :
<table border="1"><tbody>
<tr valign="top"><td width="215">Benua</td><td width="215">Negara</td></tr>
<tr valign="top"><td rowspan="4">ASIA</td><td>Arab Saudi</td></tr>
<tr valign="top"><td>India</td></tr>
<tr><td>Indonesia</td></tr>
<tr><td>Singapura</td></tr>
</tbody></table>

Hasilnya yaitu sebagai berikut :
BenuaNegara
ASIAArab Saudi
India
Indonesia
Singapura

Tabel memakai penggabungan kolom
<table border=1>
<tr valign=top><td width=123>Benua</td><td width=223 colspan=4>Eropa</td></tr>
<tr valign=top><td>Negara</td><td>Belanda</td><td>Italia</td><td>Inggris</td><td>Jerman</td></tr>
</table>
BenuaEropa
NegaraBelandaItaliaInggrisJerman

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel