Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML

BELAJAR HTML | Cara Membuat Table dan List di HTML

Oleh Wahyup Posting Komentar
Hai Teman Teman Selamat Datang kembali di Awonapa Jr. Karena kemarin kita sudah membahas Cara Membuat Halaman Lebih Dari Satu Pada HTML , maka dari itu sekarang kita akan membahas tentang Cara Mudah Membuat Table dan List di HTML.

Table dan List 
  
Sebelumnya pasti teman teman semua sudah mengerti apa itu Table dan List. disini kita akan belajar bagaimana cara membuat Table dan List di HTML.

Karena kita kemarin sudah ada data index.html, maka sekarang kita lanjutkan saja di dalam index.html.
Oke langsung saja kita buka file index.html tadi.
Seperti biasa kita akan menggunakan Sublime Text3

Membuat Table

Untuk Membuat Table kita menggunakan perintah

<!DOCTYPE html>
<html>
    <head>
        <title>Kontak</title>
    </head>

    <body>
        <table border="1" align="center">
            <caption>
                DAFTAR SISWA
            </caption>

            <tr>
                <th>Nama</th>
                <th>Kelas</th>
            </tr>
            <tr>
                <td>Anita</td>
                <td>Bagus</td>
            </tr>
            <tr>
                <td>XII AP 1</td>
                <td>XII TKJ 1</td>
            </tr>
        </table>
    </body>
</html>


Hasil dari Script diatas adalah seperti ini

DAFTAR SISWA
Nama Kelas
Anita Bagus
XII AP 1 XII TKJ 1

Setelah teman teman semua mengetikan script diatas saya akan menjelaskan apa arti dari script tersebut.

<table> Perintah ini adalah perintah untuk membuat table di dalam html,
<table border="1"> ditambah dengan border dengan ketebalan 1 , maka hasilnya akan berbeda jika tidak dengan border.
Border adalah (garis tepi) : batas sebuah jendela (window), juga untuk memberi garis batas pemisah dari dua hal
<caption> Adalah perintah untuk memberi penjelasan tentang table tersebut, caption pada instagram contoh nya
<tr> kepanjangan dari table row, digunakan untuk mendefiniskan baris pada tabel
<th> kepanjangan dari table heading yang membedakan antara judul dan isi, biasanya table heading ini akan menjadi lebih tebal.
<td> kepanjangan dari table data, digunakan untuk membuat isi dari th atau baris atau kalau di MS.excel seperti cell.
Oke teman teman sekalian pasti sudah paham dong tentang table diatas yah.
Sekarang Kita Lanjut tentang LIST.

Membuat List

LIST adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir.

Oke langsung kita coba yah teman teman.


<!DOCTYPE html>
<html>
    <head>
        <title>Kontak</title>
    </head>

    <body>
        <ul>
            <li>Anita</li>

            <li>Bagus</li>
        </ul>

        <ol>
            <li>Anita</li>

            <li>Bagus</li>
        </ol>

        <dl>
            <dt>Anita</dt>

            <dd>Adalah siswa kelas XII AP 1</dd>

            <dt>Bagus</dt>

            <dd>Adalah siswa kelas XII TKJ 1</dd>
        </dl>
    </body>
</html>



Hasil dari Script HTML diatas adalah :



Hasil dari <ul>


    

  • Anita
    • 

  • Bagus
    • 


 Hasil dari <ol> 


    

      

    1. Anita
      2. 

    2. Bagus
      3. 

    
Hasil dari <dl> 
    

      

      

      Anita
      

      Adalah siswa kelas XII AP 1
      

      Bagus
      

      Adalah siswa kelas XII TKJ 1   
            
      

      
Oke kita akan jelaskan disini
      

      

        

      • <ul> adalah kepanjangan dari unordered list, artinya list ini tidak beraturan.
        • 

      • <ol> adalah kepanjangan dari ordered list, yang artinya list ini dibuat dengan berurutan. 
        • 

      • <dl> adalah kepanjangan dari data list, data list ini jarang digunakan karena kebanyakan menggunkan <ul> dan <ol>
        • 

      

      
Perlu di ingat lagi bahwa kita masih belajar tentang struktur dasar HTML.  Untuk memperindah tampilan HTML, kita akan mempelajari CSS nanti.
      

      

      
Tutorial Belajar CSS Dasar Untuk Pemula
      

      
Semoga teman teman semua sudah paham yah.
      

      
Yahhh okelah sudah selesai,
      
silahkan berkomentar, kita akan berdiskusi bersama.
      
Terimakasih Sayonara!! 

      

      



      

      


      

      

      




      

      


      
Posting Komentar
untuk "BELAJAR HTML | Cara Membuat Table dan List di HTML"