Membuat Tabel Biodata mudah dengan HTML

-
Assalamualaikum warahmatullahi wabarakatuh
Kali ini berjumpa lagi dengan saya pada kesempatan yang berbahagia ini, penulis akan berbagi tips mengenai cara mudah membuat tabel biodata secara singkat dan jelas dengan Coding text HTML yang biasa kita gunakan dalam membuat web. Sebelumnya saya ingin memaparkan beberapa materi terkait dengan tips kali ini, semoga bisa bermanfaat bagi pembaca sekalian, simak berikut:

Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.
Tabel terdiri dari 4 unsur utama:
  1. Baris
  2. Kolom
  3. Sel
  4. Garis

Tag untuk Membuat Tabel di HTML

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
  1. Tag <table> untuk membungkus tabelnya
  2. Tag <thead> untuk membungkus bagian kepala tabel
  3. Tag <tbody> untuk membungkus bagian body dari tabel
  4. Tag <tr> (tabel row) untuk membuat baris
  5. Tag <td> (table data) untuk membuat sel
  6. Tag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.
Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag <table>.
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:
  • rowspan untuk menggbungkan baris;
  • colspan untuk mebggabungkan kolom.
Atribut ini bisa kita berikan kepada tag <td> atau <th>.

Pada aplikasinya, penulis membuat coding text untuk biodata sebagai berikut:
<html>
    <head>
    <title> Tabel Biodata BEN </title>
    </head>
    <body>
    <table align=center border="3" style="background-color:yellow">
    <tr>a
        <td colspan="3" style="background-color: yellow"><center><h2><font color=green>Biodata diri</font></h2></td>
            </tr>
            <tr>
                <td>NRP  </td>
                <td>1110181023</td>
                <td rowspan="9"><img src=benfoto.png width="150" height="150"></td>
            </tr>
            <tr>
                <td>Nama  </td>
                <td>Rizky Benniah Arvind Gunawan</td>
            </tr>
            <tr>
                 <td>Kelas  </td>
                 <td>1 D 4 Elektronika A</td>
            </tr>
            <tr>
                <td>Tanggal lahir </td>
                <td>23 November 2000</td>
            </tr>
            <tr>
                <td>Tempat lahir  </td>
                <td>Nunukan</td>
            </tr>
            <tr>
                <td>Warga  </td>
                <td>WNI</td>
            </tr>
            <tr>
                <td>Agama  </td>
                <td>Islam</td>
            </tr>
            <tr>
                <td>Golongan_Darah </td>
                <td>B</td>
            </tr>
                <td>Alamat </td>
                <td>Keramat gantung, kepatian surabaya</td>
             </tr>
            </table>
    </body>
</html>

Dan code tersebut disimpan dalam ekstensi .HTML lalu dibuka dan diuji coba sehingga menghasilkan:

 Gambar 2.1 Hasil Akhir

Bagaimana? tinggalkan komentar untuk memberikan saran agar blog ini hidup
Nantikan tips bermanfaat selanjutnya
Wassalamualaikum warahmatullahi wabarakatuh.....

Komentar

Posting Komentar

Postingan populer dari blog ini

Materi PHP: Menghitung Bunga Tabungan

-
Gambar
Assalamualaikum warahmatullahi wabarakatuh readers bargun sekalian :3 kali ini admin akan memberikan cara mengenai materi pemrograman web yaitu: Menghitung Bunga Tabungan. Beberapa hal-hal yang harus dipersiapkan yaitu: PC atau laptop yang terinstal xamplite dan visual studio serta niat yang benar agar ilmu ini bermanfaat :3 Berikut adalah case yang saya berikan: Ada seorang nasabah bank yang menabung di bank X dengan saldo awal Rp. 1.000.000,-. Bank X menerapkan kebijakan bunga 3% perbulan dari saldo awal tabungan. Hitunglah jumlah saldo  akhir nasabah  tersebut  setelah  11 bulan. Berikut adalah code yang dapat menyelesaikan case tersebut: <html> <head> <title> Tugas 1 bab 5 </title> </head> <body> <?php $saldoAwal=1000000; $bunga=0.03; $bulan=11; $saldoAkhir=$saldoAwal+($saldoAwal*$bunga*$bulan); echo "Saldo akhir setelah ".$bulan." bula...
Baca selengkapnya

Materi PHP: Cara menghitung saldo Part 2

-
Gambar
Assalamualaikum Warahmatullahi Wabarakatuh sobat bargun sekalian :3 Kali ini admin akan memberikan ilmu yang insya Allah bermanfaat bagi teman-teman pembaca sekalian. Materi ini termasuk kedalam pemrograman Web. Berikut adalah beberapa hal-hal yang harus dipersiapkan yaitu: Laptop atau Personal Computer (PC), Xampplite, serta niat yang kuat agar ilmu ini bias tertular dan bermanfaat nantinya... Saya berikan kasus sebagai berikut: Seorang nasabah bank, mula-mula memiliki saldo awal Rp. 1.000.000,- di suatu bank X. Bank tersebut memiliki kebijakan memberikan bunga 3%  jika besar saldo kurang dari Rp. 1.100.000,- dan 4% bila saldo lebih besar atau sama dengan Rp. 1.100.000,- . Perhitungan bunga dihitung dari besar saldo terakhir. Selain itu di setiap bulannya nasabah dikenai biaya administrasi  Rp. 9.000,-. Buatlah script PHP untuk menentukan saldo akhir setelah N bulan. Keterangan Buatlah form untuk mengisikan saldo awalnya dan N (jangka waktu tabungan).  Beriku...
Baca selengkapnya