Jumat, 31 Maret 2017

Belajar HTML dan CSS Bagian 10 : Membuat Tabel Pada HTML

Membuat Tabel Pada HTML

      Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSS Bagian 9  Bagi sahabat lupacode yang baru saja bergabung atau nyasar ke halaman ini, silahkan pelajari terlebih dahulu dari artikel yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini. Sahabat semua dapat melihat seluruh isi artikel pada blog ini di halaman Daftar isi

lupacode - belajar html bagian 10
      Pada malam hari ini saya akan melanjutkan pembahasan materi selanjutnya yaitu tentang bagaimana Membuat Table Pada HTML. Tabel pada html digunakan untuk menampilkan data yang tidak bulat. Sama seperti jika sahabat membuat tabel pada microsoft word atau excel. Contohnya jika kalian ingin membuat seperti anggaran biaya, menampilkan skor untuk sebuah kompetisi, membuat kalender dan lain-lain.
     Sebelum kita mempelajari bagaimana cara membuat tabel pada html, sebaiknya kita pelajari terlebih dahulu mengenai struktur tabel pada html. Meskipun saya yakin sahabat semua sudah pada tahu bagaimana struktur pada sebuah tabel.

lupacode - tabel 1

        Misalnya seperti ini, saya punya seebuah tabel sederhana yang memiliki dua buah baris dan dua buah kolom. Baris yang pertama kita sebut dengan Baris satu kolom satu, dan dan kotak yang bawah sebelah kanan itu kita sebut dengan Baris dua kolom dua

lupacode - tabel 2

     Lalu jika saya mempunyai tabel seperti ini, maka kotak – kotak horizontal itu kita sebut dengan baris sedangkan kotak – kotak yang vertikal itu kita sebut dengan kolom

lupacode - tabel 3

       Lalu perpotongan antara baris dengan kolom itu biasanya kita sebut dengan cell atau nanti di html kita sebutnya data. Jadi itu merupakan struktur dari tabel sederhana

lupacode - tabel 4
        Ada lagi jika kalian punya tabel seperti ini, dimana judul dari setiap – tiap kolomnya kita sebut dengan header

lupacode - tabel 5

       Atau jika kalian mempunyai judulnya dua sumbu seperti ini bearti kalian punya dua buah header. Header yang horizontal dan header yang vertikal.

lupacode - tabel 9

         Jika kita ingin mengimplementasikan nya ke dalam html, kita harus gunakan tag yang namanya <table> </table> lalu strukturnya seperti ini. Saya bagi menjadi dua ada tabel yang simpel dan ada tabel yang kompleks. Untuk yang simpel pertama kita harus bungkus dengan tag
<table> </table>
Lalu di dalam tag table ini kita akan membuat sebuah baris
<table>
            <tr>
            </tr>
</table>
Baris di repersentasikan dengan tag <tr> atau singkatan dari table row lalu di dalam baris ini kita buat kolom
<table>
            <tr>
                        <td> ... </td>
            </tr>
</table>
Kolom di repersentasikan dengan tag <td> atau singkatan dengan table data. Jadi strukturnya <table> dulu, kemudian <tr> lalu di dalamnya ada <td>

<!DOCTYPE html>
<html>
<head>
            <title>Table Html</title>
</head>
<body>

<table>
            <tr>
                        <td>Baris 1, Kolom 1</td>
                        <td>Baris 2, Kolom 2</td>
            </tr>
            <tr>
                        <td>Baris 1, Kolom 1</td>
                        <td>Baris 2, Kolom 2</td>
            </tr>
</table>

</body>
</html>

      Jadi contohnya kalau saya punya struktur html seperti ini, dimana saya mempunyai tag <table> dan di dalamnya terdapat dua buah tag <tr> lalu di dalam tiap-tiap tag <tr> nya saya punya dua buah tag <td> jadi tiap baris memiliki dua kolom. Saya simpan file latihan ini dan saya beri nama table1.html di dalam folder html yang telah kita buat sebelumnya. Maka hasilnya akan seperti ini :

lupacode - tabel 6     Oke tablenya sudah kita buat, mungkin kalian bertanya biasanya table itu ada bordernya atau garisnya kok ini tidak ada ya ? karna kita belum berikan atribut pada tablenya. Tabel ke dua merupakan table yang complex. Tabel seperti ini digunakan biasanya kalau datanya sudah banyak dan strukturnya memang sudah complex. Jadi syntaxnya seperti ini

<!DOCTYPE html>
<html>
<head>
            <title>Table Html</title>
</head>
<body>

<table>
            <thead>
                        <tr>
                                    <th></th>
                                    <th>Kolom 1</th>
                                    <th>Kolom 2</th>
                        </tr>
            </thead>
            <tbody>
                        <tr>
                                    <th>Baris 1</th>
                                    <th>Baris 1, Kolom 1</th>
                                    <th>Baris 1, Kolom 2</th>
                        </tr>
                        <tr>
                                    <th>Baris 2</th>
                                    <th>Baris 2, Kolom 1</th>
                                    <th>Baris 2, Kolom 2</th>
                        </tr>
            </tbody>
</table>

</body>


</html>

      Kalau kita lihat sama-sama dibungkus menggunakan <table> kemudian didalamnya dibagi menjadi dua. Ada <thead> atau Table Header lalu ada <tbody>. Lalu didalam <thead> ini sama didalamnya menggunakan <tr> untuk membuat baris. Bedanya kalau tadi kita menggunakan <td> tapi sekarang kita menggunakan <th> atau table header nya. Ini sama-sama menyimpan data tapi html nya sudah membaca dia sebagai header. Karna html itu untuk menampilkan struktur halaman atau content jadi harus mudah dibaca oleh manusia maupun oleh browser. Maka hasilnya akan seerti ini

lupacode - tabel 7
         Sekarang bagaimana jika kita ingin menambahkan border agar terlihat seperti table. Nah itu kita akan pelajari, atribut apa saja yang bisa digunakan didalam tag <table>. Ada 5 atribut yang bisa kita gunakan, seperti dibawah ini :

<table> </table>

Border

Cellspacing

Cellpadding

Colspan

Rowspan

         Sebetulnya diluar ini juga ada lagi. Tapi diantara 5 atribut ini, kita akan coba 3 atribut terlebih dahulu, sebetulnya 3 atribut ini harus menggunakan css. Tapi karna kita belum belajar css gapapa kita gunakan html saja. Untuk atribut border fungsinya adalah untuk memberi border atau garis pada table. Contoh penggunaanya adalah seperti ini <table border=”1”> Atribut Cellspacing gunanya adalah untuk memberi jarak antar cell. Sedangkan Cellpadding adalah untuk memberi luas pada sebuah cell. Contoh penggunaannya adalah seperti ini

<table border="1" cellspacing="0" cellpadding="10">


Dan kita lihat hasilnya adalah seperti ini

lupacode - tabel 8      Oke baik jadi itulah cara menggunakan atribut border, cellspacing dan cellpadding. Yang nantinya kita akan dengan mudah menggunakan css. Karna kita belum belajar css maka gapapa kita pake atribut milik html dulu
     Baik saya rasa cukup untuk pembahasan materi kali ini yaitu mengenai Membuat Table Pada HTML kita akan langsung menuju materi selanjutnya yaitu Belajar HTML dan CSS Bagian 11

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon