Cara Membuat Table dengan HTML bagian 2

Membuat Table bagian 2
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.
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Show Parser Box