Home » » Membuat Table HTML Bagian 2

Membuat Table HTML Bagian 2

Written By Unknown on Minggu, 06 Juli 2014 | 22.43

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.
Share this article :

0 komentar:

Posting Komentar

http://yllix.com/fullpage.php?section=General&pub=412333&ga=g
 
Support : Your Link | Your Link | Your Link
Copyright © 2013. ILMU KOMPUTER - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger