Membuat table dengan HTML Bagian 2 (tamat)

Baca Juga

Di artikel yang sebelumnya sudah saya jelaskan cara membuat table sederhana. Kali ini saya akan memberikan tips kepada teman-teman untuk mempercantik table.

Tapi sebelum saya jelaskan bagaimana cara mempercantik table, akan saya jelaskan sedikit cara untuk menggabungkan row dan colum di table.

 
<table border="1">
  <tr>
    <th rowspan="2">NPM</th>
    <th rowspan="2">Nama</th>
    <th colspan="2">Mata Kuliah</th>
  </tr>
  <tr>
    <th>Nilai Bahasa Indonesia</th>
    <th>Nilai PBO</th>
  </tr>
  <tr>
    <td>1920133</td>
    <td>roy purbo</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
</table>

Dari potongan source code diatas attribut rowspan & colspan bernilai 2. Artinya saat kita berikan nilai pada attribut tersebut, row dan colum akan bergabung. Dari pada bingung dengan penjelasan saya, ini tampilan dari code diatas ::

NPM	Nama	Mata Kuliah
		Nilai Bahasa Indonesia	Nilai PBO
1920133	roy purbo	A	A

Pada table juga kita bisa memasukkan attribut align, yang artinya kita bisa membuat text punya kita menjadi rata tengah, kiri dan juga kanan.

Table juga bisa kita beri sentuhan warna agar menarik. Kita tinggal menambahkan attribut bgcolor.

 
<table border="1" cellpadding="1" cellspacing="0">
  <tr bgcolor="#3785ee">
    <th rowspan="2">NPM</th>
    <th rowspan="2">Nama</th>
    <th colspan="2">Mata Kuliah</th>
  </tr>
  <tr bgcolor="#3785ee">
    <th>Nilai Bahasa Indonesia</th>
    <th>Nilai PBO</th>
  </tr>
  <tr bgcolor="a9c9f4">
    <td>1920133</td>
    <td>roy purbo</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
</table>

Hasilnya tampilan code diatas ::

NPM	Nama	Mata Kuliah
		Nilai Bahasa Indonesia	Nilai PBO
1920133	roy purbo	A	A

Bagaimana ?? mudah sajakan. Selebihnya teman-teman bisa mengutak-atik sendiri. Jangan pernah menyerah sebelum mencoba ... itu saja kata-kata dari aku.