Cara Membuat Table Sederhana Dengan HTML

   , ,    Comment  

COntoh-Gambar
Cara Membuat Table Dengan HTML - Table atau tabel merupakan susunan data dalam baris dan kolom, nah sekarang kangrpl akan memberikan tutorial Cara Membuat Table Dengan HTML, nah pasti kamu pernah mengoprasikan ms.exel atau ms.word kalo yang sudah tau ms.exel pasti sudah tak asing lagi dengan table, yang kita pelajari ini sama hasilnya akan tetapi cara membuatnya berbeda jauh.
Mungkin bila kamu memakai software dreamweaver itu sangat gampang membuat table tinggal klik klik doang jadi, nah di html sangat apa ya di bilang susah enggak di bilang mudah ya bisa jadi kali ya.

Lihat Hasilnya : DEMO

Nah biasanya table itu di gunakan untuk data data misalnya data siswa,barang,user,admin,dan masih banyak lagi.

Pertama buka text editor kalian masing masing, contohnya : notepad,notepad++,sublime,atom atau apalah.

Kita awali dengan dengan kode kode di bawah ini
<html>
<head>
  <title>Judul Web</title>
</head>
<body>
isi table
</body>
</html>
 Lalu ketikan kode di bawah ini di dalam kode body
<html>
<head>
  <title>Judul Web</title>
</head>
<body>
<table>
        <tr>
            <th>No</th>
            <th>Nama Depan</th>
            <th>Nama Belakang</th>
            <th>Nomor HP</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ajis</td>
            <td>Maulana</td>
            <td>08389074xxxx</td>
            <td>Kp.Kadu Gading</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Susi</td>
            <td>lawati</td>
            <td>08389078xxxx</td>
            <td>Kp.Cikeutar</td>
        </tr>
        <tr>
            <td>3</td>
            <td>XXXXX</td>
            <td>XXXXXXX</td>
            <td>0989766XXXX</td>
            <td>Kp.BlaBlaBla</td>
        </tr>
        <tr>
            <td>4</td>
            <td>XXX</td>
            <td>XXXX</td>
            <td>XXXXXXXX</td>
            <td>XXXXXXXXX</td>
        </tr>
    </table>
</body>
</html>
 Untuk
<th>No</th>
            <th>Nama Depan</th>
            <th>Nama Belakang</th>
            <th>Nomor HP</th>
            <th>Alamat</th>
Bisa diganti misalnya " NO,Nama Depan,Nomor HP,Alamat " Semau Kamu.
Dan Yang 
<tr>
            <td>1</td>
            <td>Ajis</td>
            <td>Maulana</td>
            <td>08389074xxxx</td>
            <td>Kp.Kadu Gading</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Susi</td>
            <td>lawati</td>
            <td>08389078xxxx</td>
            <td>Kp.Cikeutar</td>
        </tr>
        <tr>
            <td>3</td>
            <td>XXXXX</td>
            <td>XXXXXXX</td>
            <td>0989766XXXX</td>
            <td>Kp.BlaBlaBla</td>
        </tr>
        <tr>
            <td>4</td>
            <td>XXX</td>
            <td>XXXX</td>
            <td>XXXXXXXX</td>
            <td>XXXXXXXXX</td>
        </tr>
Bisa diganti sama , baris pertama No nya 1 Dan Baris Ke 2 Nama depan Ajis dan baris ke 3 Nama Belakang dan baris ke 4 Nomor HP, dan baris ke 5 Alamat bisa di ganti , misalnya di atas " Ajis " Bisa Di ganti dengan nama depan kamu !! 

0 komentar:

Posting Komentar