Skip to main content

Membuat tabel daftar pelajaran sederhana menggunakan HTML

Assalamu'alaikum..
Pada kesempatan kali ini saya akan membuat tabel daftar pelajaran sederhana menggunakan HTML.
Disini saya menggunakan Adobe Dreamweaver sebagai text editor/web authoring nya. Oke langsung aja..

1. Buka Text editor kalian masing - masing, lalu masukan code di bawah ini..

<!DOCTYPE html>
<html>
<head>
<title>Jadwal Pelajaran</title>
</head>
<body>
<h3><center>Jadwal Pelajaran Tahun 2019</center></h3>
<table>
<tbody>
<table width="100%" border="9" cellspacing="">
<thead>
<tr>
<th>Hari</th>
<th>Jam ke 1</th>
<th>Jam ke 2</th>
<th>Jam ke 3</th>
</tr>
</thead>
</tbody>
    <tbody>
    <tr>
    <td>Senin</td>
    <td align="center"> Bahasa Indonesia </td>
    <td align="center"> Bahasa Inggris </td>
    <td align="center"> Bahasa Sunda </td>
    </tr>
    <tr>
    <td>Selasa</td>
    <td align="center"> Matematika </td>
    <td align="center"> Fisika </td>
    <td align="center"> Kimia </td>
    </tr>
    <tr>
    <td>Rabu</td>
    <td align="center"> IPA </td>
    <td align="center"> IPS </td>
    <td align="center"> PPKN </td>
    </tr>
    <tr>
    <td>Kamis</td>
    <td align="center"> C++ </td>
    <td align="center"> Java </td>
    <td align="center"> R </td>
    </tr>
    <tr>
    <td>Jum'at</td>
    <td align="center"> Pendidikan Agama Islam </td>
    <td align="center"> Al-Qur'an dan Hadist </td>
    <td align="center"> - </td>
    </tr>
    <tr>
    <td> Sabtu </td>
    <td align="center"> Mobile Legend </td>
    <td align="center"> COC </td>
    <td align="center"> PUBGM </td>
    </tr>
    <tr>
    <td> Minggu </td>
    <td align="center"> Pes 2019 </td>
    <td align="center"> Fifa 2019 </td>
    <td align="center"> Ludo </td>
    </tr> 
</table>
</body>
</html>

 2. Setelah kalian masukan maka hasilnya akan seperti dibawah ini..

Sedikit penjelasan tentang kode diatas..
Tabel pada HTML dapat dibuat menggunakan tag <table> </table>. Isi dalam tabel dibagi menjadi dua bagian yaitu header table ditunjukan dengan tag <thead> </thead> dan body tabel ditunjukan dengan tag <tbody> </tbody>. Untuk menambah baris pada tabel menggunakan tag <tr> </tr>. Untuk menambahkan data, jika berupa header menggunakan tag <th> </th> sedangkan pada body tabel menggunakan tag <td> </td>.
Format penulisan tabel secara umum adalah sebagai berikut..

<table>
      <thead>
           <tr>
               <th> ...... </th>
           </tr>
      </thead>
      <tbody>
              <tr>
                  <td> ..... </td>
              </tr>
      </tbody>
</table>

tag <table> memiliki beberapa atribut diantaranya :
1. Cellspacing, untuk menentukan jarak antar sel.
2. Cellpadding, untuk menentukan jarak isi sel dengan border nya.
3. Width, untuk menentukan lebar tabel.
4. Height, untuk menentukan tinggi tabel.
5. Bgcolor, untuk memberi warna backround pada tabel.
6. Align, untuk menentukan perataan tabel.
7. Border, untuk menentukan tebal border tabel, dll.

Semoga bermanfaat :)

Comments

Post a Comment

Popular posts from this blog

Cara melihat CCTV SPC di PC atau Laptop menggunakan SCMS

Pertama kita instal dulu software SCMS nya, biasa nya sudah ada CD yang berisikan software di dalam dus UVR/DVR, instal seperti biasa, jika sudah selesai buka software SCMS. Gambar di atas adalah tampilan awal SCMS.  Untuk password tidak usah di isi dan langsung klik login. Setelah anda klik login selanjut nya akan muncul seperti gambar di atas, disini kita klik Device Manager untuk menambahkan device baru. Gambar di atas adalah tampilan dari menu  Device Manager, untuk menambahkan device baru  kita pilih Manual Add, letak nya ada di pojok kiri bawah. Setelah kita klik Manual Add akan muncul tampilan gambar seperti di bawah ini  Isi Device name bebas terserah anda, Connect Mode ubah menjadi Cloud ID, isi Cloud ID menggunakan serial number yang ada di DVR/UVR, biasa nya berada di bagian bawah DVR, atau jika masih ada kardus nya ada di bagian atas kardus UVR, dan apabila tidak ada dua2 nya, bisa di lihat di menu network UVR/DVR tepat nya di bagian P2
9 comments
Read more

Pengertian POAC, SMART dan SWOT

Assalamualaiku, pada kesempatan kali ini saya akan sedikit berbagi tentang " POAC, SMART dan SWOT ". Biasanya semua itu ada di pelajaran manajemen. Langsung aja kita bahas satu persatu. 1. Apasih manajemen itu ? Manajemen  adalah seni menyelesaikan pekerjaan melalui orang lain. Definisi Mary Parker Follet ini berarti bahwa seorang manajer bertugas mengatur dan mengarahkan orang lain untuk mencapai tujuan organisasi. Ricky W. Griffin mendefinisikan manajemen sebagai sebuah proses perencanaan, pengorganisasian, pengkoordinasian, dan pengontrolan sumber daya untuk mencapai sasaran secara efektif dan efesien. Efektif berarti bahwa tujuan dapat dicapai sesuai dengan perencanaan, sementara efisien berarti bahwa tugas yang ada dilaksanakan secara benar, terorganisir, dan sesuai dengan jadwal.Manajemen belum memiliki definisi yang luas dan diterima secara universal.  ( sumber ) 2. Apasih POAC itu ? POAC.  Adalah kepanjangan dari Planning , Organiting , Actuating dan Con
2 comments
Read more

Bikin Form Login di Java (Netbeans)

Assalamu'alaikum wr wb. Pada kesempatan kali ini saya akan sedikit berbagi tutorial membuat form login di java (Netbeans). Gambar di atas adalah tampilan menu design dari form login. cukup sederhana bukan hhe Oke langsung aja masuk ke tahap pertama pembuata form login. 1. Buatlah 3 buah Label, Label ini berfungsi untuk pemberian nama seperti judul, username, dan password, cara mengubah nama di Label bisa dengan cara double klik dan ubah nama nya. Label sendiri terletak di bagian Swing Controls dan bernama Label. 2. Langkah keduan adalah dengan membuat 1 buah Text Field, disini Text Field berfungsi untuk menampung inputan user dalam memasukan username. Sama hal nya dengan Label, Text Field juga bisa di edit dengan cara double klik dan hapus semua huruf nya. Agar Text Field mudah di panggil ubah nama variable nya dengan cara klik kanan di Text Field nya lalu pilih change variable name, setelah itu edit namanya sesuai yg anda inginkan. Disini saya merubah namanya menjadi
Post a Comment
Read more