Belajar HTML Dasar 10 - Table pada html

pada tanggal


 Melanjutkan seri pembelajaran mengenai Belajar pemrograman Dasar khususnya pengembangan dibidang frontend web development.

   Seri Belajar HTML dasar ke 10 hari ini adalah tag table pada HTML. Table di html sama saja dengan table yang kita sering jumpai dan sering kita buat didalam aplikasi semisal microsoft excel, ataupun di libre office, dimana table ini digunakan untuk menampilkan data yang tabular.

  • Struktur Table dan tag Table :
<table> </table> 

  • Simple Table code :
<table>

    <tr>

          <td>...</td>

    </tr>

</table>

  1. tr = Table Row
  2. td = Table Data
Atribut yang ada pada tabel, yang akan digunakan sebelum kita belajar CSS (cascading style sheet)

<table>..</table>

  • Border = 
  • cellspacing =
  • cellpadding =
  • colspan
  • rowspan 
Yang diberi warna itu nantinya kita akan mengubah atributnya dengan menggunakan css, sementara kita belum belajar css, maka kita gunakan atribut ini dulu. Nanti kita akan belajar css di seri pembelajaran berikutnya. Baiklah langsung saja kalian praktek buatlah file baru seperti biasa di folder kalian, kopas saja dibawah dan paste di vscode kalian :
  • Simple dan complex table html source code :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simple and complex table</title>
</head>
<body>
    <h1>contoh table simple</h1>
    <p>ini merupakan contoh dari simple tabel</p>
    <table border="5" cellspacing="0" cellpadding="5">
        <tr>
            <td>baris 1 , kolom 1</td>
            <td>baris 1 , kolom 2</td>
        </tr>
        <tr>
            <td>baris 2, kolom 1</td>
            <td>baris 2, kolom 2</td>
        </tr>
    </table>

    <h1>contoh tabel complex</h1>
    <p>berikut ini contoh dari tabel kompleks</p>
    <table border="5" cellspacing="0" cellpadding="5">
        <thead>
            <tr>
                <th></th>
                <th>kolom 1</th>
                <th>kolom 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>baris 1</th>
                <td>baris 1, kolom 1</td>
                <td>baris 1, kolom 2</td>
            </tr>
            <tr>
                <th>baris 2</th>
                <td>baris 2, kolom 1</td>
                <td>baris 2, kolom 2</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Dan apabila kita liat pada aplikasi browser kurang lebih hasilnya akan seperti
berikut ini :
Baca juga :

Komentar

Posting Komentar