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.
0 komentar:
Posting Komentar