Nawi Web

" Tutorial Perancangan Web Dasar untuk Pemula "

Senin, 27 April 2015

Lebih Rapi dengan Tag Table

06.33 Posted by Nawi , 1 comment
Table:
  • Salah satu cara yang paling kompak dan paling mudah dibaca dalam menampilkan item informasi adalah dengan tabel.
Manfaat Tabel:
  • Tabel dapat digunakan untuk menampilkan teks, link, grafik atau item lainnya yang dapat dikirimkan ke tempat lain manapun melalui halaman web.
  • Tabel dapat digunakan untuk menyajikan informasi, atau bahkan dapat diperkuat dengan batas, warna, dan grafik sedemikian rupa, sehingga tabel itu sendiri menjadi item – item dekorasi.
<table>
 <tr>
  <td>Columns Item</td>
  <td>Columns Item</td>
 </tr>
 <tr>
  <td>Columns Item</td>
  <td>Columns Item</td>
 </tr>
</table>
Tabel dibentuk dari kiri atas, dan melintasi kolom - kolomnya. Setiap item diapit dengan tag <td></td>, dan setiap baris diapit dengan tag <tr></tr>.

Latihan 5
Script:
<html>
 <head>
  <title>Latihan 5</title>
 </head>

 <body>
 <table>
  <tr>
   <td>Satu</td>
   <td>Dua</td>
  </tr>
  <tr>
   <td>Tiga</td>
   <td>Empat</td>
  </tr>
 </table>
 </body>
</html>
Tampilan:

Table Properties:
  • BORDER = akan memberikan garis pembatas pada tabel.
  • CELLSPACING = akan menset jarak dalam piksel antara batas dalam dan batas     luar.
  • CELLPADDING= akan menset jarak dalam piksel antara batas dalam dan teksnya.
  • ALIGN = penjajaran rata kanan, kiri atau tengah.
  • BGCOLOR = akan memberikan efek warna pada tabel.
  • ROWSPAN = untuk menset jumlah baris ke bawah. 
  • COLSPAN = untuk menset jumlah kolom ke kanan. 
  • WIDTH = untuk menset batas lebar / panjang tabel.
  • HEIGHT = untuk menset batas tinggi tabel.

Latihan 6
Script:
<html>
 <head>
  <title>Latihan 6</title>
 </head>
 <body>
  <h3>Daftar Nama Siswa</h3>
  <table border=1 cellpadding=3 cellspacing=3>
   <tr>
    <td align=center>NIM</td>
    <td align=center>NAMA LENGKAP</td>
   </tr>
   <tr>
    <td>130030716</td>
    <td>Nawi Kartini</td>
   </tr>
  </table>
 </body>
</html>
Tampilan:

kolom bewarna

Latihan 7
Script:
<html>
 <head>
  <title>Latihan 7</title>
 </head>
 <body>

  <h3>Daftar Nama Siswa</h3>

  <table border=1 cellpadding=3 cellspacing=3>
   <tr bgcolor=red>
    <td align=center>NIM</td>
    <td align=center>NAMA LENGKAP</td>
   </tr>
   <tr>
     <td>130030716</td>
     <td>Nawi Kartini</td>
   </tr>
  </table>
 </body>
</html>
Tampilan:


Latihan 8
Script:
<html>
 <head>
  <title>Latihan 8</title>
 </head>
 <body>

  <h3 align=center>Daftar Nama Siswa</h3>

  <table border=1 cellpadding=3 cellspacing=3 align=center>
   <tr bgcolor=red>
    <td align=center>NIM</td>
    <td align=center>NAMA LENGKAP</td>
   </tr>
   <tr>
     <td>130030716</td>
     <td>Nawi Kartini</td>
   </tr>
  </table>
 </body>
</html>
Tampilan:


Images & Table

Latihan 9
Script:
<html>
 <head>
  <title>Latihan 9</title>
 </head>
 <body>

  <h3 align=center>Daftar Nama Siswa</h3>

  <table border=1 cellpadding=3 cellspacing=3 align=center>
   <tr  align=center>
    <td background=bg1.jpg>NIM</td>
    <td background=bg1.jpg>NAMA LENGKAP</td>
   </tr>
   <tr>
     <td>130030716</td>
     <td>Kartini Nawi</td>
   </tr>
  </table>
 </body>
</html>
Tampilan:


 Latihan 10
Script:
<html>
 <head>
  <title>Latihan 10</title>
 </head>
 <body>
  <table border=10 cellspacing=10 cellpadding=10>
   <tr>
    <td><img src=photo1.jpg width=200 height=200></td>
    <td><img src=photo2.jpg width=200 height=200></td>
    <td><img src=photo3.jpg width=200 height=200></td>
   </tr>
  </table>
 </body>
</html>
Tampilan:

Selamat Mencoba..!

1 komentar: