Sabtu, 23 Mei 2015

Membuat Tabel Daftar Mahasiswa STT Ibnu Sina Dengan HTML

Membuat Tabel Daftar Mahasiswa STT Ibnu Sina Dengan HTML

Cara membuat tabel dengan kode HTML
Berikut ini Cara membuat tabel dengan kode HTML diperlukan 3 tag dasar yaitu : TABLE, TR, TD.

TABLE         : Untuk menandai sebuah table.
TR               : Untuk membentuk baris.
TD               : untuk membentuk kolom.

Contoh , di bawah ini adalah serangkaian kode HTML  untuk membuat tabel :
<table border=1>
<tr>
<td># </td>
</tr>
</table>

Hasilnya, browser akan menampilkan gambar tabel seperti  di bawah ini :










Berikut ini adalah cara  membuat table daftar mahasiswa STT Ibnu sina Batam  dengan kode HTML 1 baris 4 kolom yang meliputi No, NPM, Nama, Jurusan.  Lihat penerapannya di bawah ini  :
<table width="655"  height="445"  border="2" align="center">
  <tr>
    <td width="25"  align="center"><b>NO</b></td>
    <td width="200" align="center"><b>NPM</b></td>
    <td width="555" align="center"><b>NAMA</b></td>
    <td width="655" align="center"><b>JURUSAN</b></td>
  </tr>
</table>

Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Setelah itu tambahkan isi table dengan nama mahasiswa STT Ibnu sina Batam seperti berikut:

<html>
<head>
<title>TUGAS</title>
</head>
<body>
<font face="Mongolian Baiti">

<table width="1000" height="675" border="5" align="center">
  <tr>
    <td bgcolor = "grey" width="25"  align="center"><b>NO</b></td>
    <td bgcolor = "cyan" width="200" align="center"><b>NPM</b></td>
    <td bgcolor = "grey" width="555" align="center"><b>NAMA</b></td>
    <td bgcolor = "cyan" width="655" align="center"><b>JURUSAN</b></td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">1</td>
    <td bgcolor = "cyan" align="center">1410128262091</td>
    <td bgcolor = "grey" align="center">ANDIKA RISKI</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">2</td>
    <td bgcolor = "cyan" align="center">1410128262092</td>
    <td bgcolor = "grey" align="center">AEIZAL SAAD</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">3</td>
    <td bgcolor = "cyan" align="center">1410128262093</td>
    <td bgcolor = "grey" align="center">ANGGI NUGRAHA</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">4</td>
    <td bgcolor = "cyan" align="center">1410128262094</td>
    <td bgcolor = "grey" align="center">CHAIRUL MUTTAKIN</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">5</td>
    <td bgcolor = "cyan" align="center">1410128262095</td>
    <td bgcolor = "grey" align="center">FITRA KURNIAWAN</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">6</td>
    <td bgcolor = "cyan" align="center">1410128262096</td>
    <td bgcolor = "grey" align="center">GILANG RAMADHAN</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">7</td>
    <td bgcolor = "cyan" align="center">1410128262097</td>
    <td bgcolor = "grey" align="center">HABIBI</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">8</td>
    <td bgcolor = "cyan" align="center">1410128262098</td>
    <td bgcolor = "grey" align="center">MUHAMMAD RIDWAN</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">9</td>
    <td bgcolor = "cyan" align="center">1410128262099</td>
    <td bgcolor = "grey" align="center">MUHAMMAD ALI</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
  <tr>
    <td bgcolor = "grey" align="center">10</td>
    <td bgcolor = "cyan" align="center">1410128262100</td>
    <td bgcolor = "grey" align="center">RAMA ADIRIA</td>
    <td bgcolor = "cyan" align="center">TEKNIK INFORMATIKA</td>
  </tr>
</table>
</font>
</body>
</html>

Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :




Demikian semoga bermanfaat!!!  

0 komentar:

Posting Komentar