Belajar Membuat Tabel HTML

Tabel HTML

                Tabel merupakan cara menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom, tabel dibuat dengan menggunakan tag <tabel>. Ada 3 elemen dalam pembuatan tabel:

      1.       Tag <tr>  table row, digunakan untuk membuat baris dari tabel.

      2.       Tag <td>  table data, digunakan untuk menginput data ke tabel.

      3.       Tag <th> table heading, Mendefinisikan sel header di dalam  sebuah tabel.

Contoh:

1. Cara membuat tabel 1

<table border="1">

    <tr>

        <td>Nama</td>

    </tr>

</tabel>

Hasil:

2. Membuat tabel 1baris 2kolom

<table border="1">

    <tr>

        <td>Nama</td>

        <td>Alamat</td>

    </tr>

</tabel>

Hasil:

3. Membuat tabel 2baris 1kolom

<table border="1">

    <tr>

        <td>Nama</td>

    </tr>

    <tr>

         <td>Alamat</td>

    </tr>

</tabel>

Hasil:

4.  Membuat atribut dengan Cellspacing

                Atribut cellspacing digunakan untuk menentukan jarak antar sel pada sebuah tabel.

<table border="1" cellspacing="20">

    <tr>

        <td>Nama</td>

        <td>Umur</td>

    </tr>

    <tr>

         <td>Alamat</td>

         <td>Tanggal</td>

    </tr>

</tabel>

Hasil:

5.  Membuat atribut dengan Cellpadding

                Atribut Cellpadding digunakan untuk memberi jarak antar sel dengan tulisan.

<table border="1" cellpadding="20">

    <tr>

        <td>Nama</td>

        <td>Umur</td>

    </tr>

    <tr>

         <td>Alamat</td>

         <td>Tanggal</td>

    </tr>

</tabel>

Hasil:

6.  Menentukan lebar kolom dengan prosentase (width=25%)

                Jika lebar koloom ditentukan 25%, maka tampilan tabel akan melebar memenuhi lebar halaman.

<h3>membuat tabel width=25%</h3>

<table border="1" width=25%>

    <tr>

        <td width=10%>Nama</td>

        <td width=25%>Umur</td>

    </tr>

    <tr>

         <td width=10%>Alamat</td>

         <td width=25%>Tanggal</td>

    </tr>

</tabel>

Hasil:

7.  menentuan lebar dan tinggi kolom dengan satuan pixel

                Untuk membuat tabel, lebar kolom (width) tinggi kolom (height) dapat dilakukan dengan satuan pixel.

<table border=7>

    <tr height=40>

        <td width=150>Nama</td>

        <td width=150>Umur</td>

    </tr>

    <tr height=80>

         <td width=150>Alamat</td>

         <td width=150>Tanggal</td>

    </tr>

</tabel>

Hasil:

8. perataan tulisan dalam tabel

                Menggunakan tag ALIGN(untuk perataan horizontal) VALIGN(untuk perataan vertical).

<table border=7>

    <tr height=40>

        <td width=150 align=left valign=top>Nama</td>

        <td width=250 align=right valign=middle>Nama</td>

    </tr>

    <tr height=80>

         <td width=150 align=right valign=top>Nama</td>

         <td width=250 align=center valign=middle>Nama</td>

    </tr>

</tabel>

Hasil:

 Semoga artikel ini bermanfaat untuk anda.