Membuat table dengan HTML Bagian 2 (tamat)

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 ::

Baca Juga

• Membuat table dengan HTML Bagian 2 (tamat)
• Cara membuat tabel dengan HTML bagian 1
• Cara membuat Hyperlink
• Daftar tag HTML
• Membuat tulisan bergerak dengan HTML
• Membuat Efect Screen Saver di HTML 5
• Cara membuat website dengan HTML Bagian 2 (Tamat)
• Cara membuat membuat Website dengan HTML Bagian 1
• Cara membuat Login Form dengan HTML

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.