Belajar HTML 5 Dasar (Tabel) -Praktikum 5
Assalamualaikum WR.WB
Hai kembali lagi ke blog saya,Pada postingan kali ini saya akan membahas tentang tabel.Emangnya bisa membuat tabel di HTML?Ya tentu saja bisa,Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel.
1.Latihan12
Coding:Ouput:
Pembahasan:
Jadi,Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:
- Tag <table> digunakan untuk memulai tabel
- Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
2.Latihan13
Coding:Output:
Pembahasan:
Atribut rowspan and colspan digunakan untuk membuat sel tabel ‘bersatu’ dengan sel yang lain. Atribut ini diletakkan pada tag td dari sebuah tabel.Dalam contoh diatas, kita dapat melihat bahwa tag td yang memiliki atribut colspan, akan membuat sel tabel bersatu dengan kolom disebelahnya. Sedangkan atribut rowspan akan membuat sel tabel bersatu dengan baris dibawahnya
3.Latihan14
Coding:Output:
Pembahasan:
Untuk mengatur rata text, kita menggunakan property text-align. Property text-align memiliki 4 nilai yang bisa dipilih, yakni: left, right, center, atau justify. Sesuai dengan namanya, kita menggunakan text-align: left dan text-align: right untuk membuat rata teks kiri dan rata teks kanan. Untuk membuat text berada di tengah, kita mengunakan: text-align: center.
4.Latihan15
Coding:
Output:
Pembahasan:
Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa garis tepi.Disini saya menggunakan border sebanyak 2.maka web browser akan menampilkan garis tepi sebesar 2 pixel pada sisi atas, bawah, kiri dan kanan tabel.
5.Latihan16
Coding:Output:
Pembahasan:
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.Disini saya menggunakan cellpadding sebanyak 5.maka web browser akan membuat jarak sebesar 5 pixel dari border sisi dalam tabel dengan isi text tabel.
6.Latihan17
Coding:Output:
Pembahasan:
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.Disini saya tidak memakai cellspacing maka tidak akan menampilkan jarak diantara garis border tabel.
7.Latihan18
Coding:Output:
Pembahasan:
Jadi fungsi scope disini adalah sama seperti align="center" yang fungsinya untuk merata tengah kan kalimat.dan juga terdapat tag <sup> adalah singkatan dari superscript, yaitu sebutan untuk karakter kecil diatas text. Umumnya superscript digunakan didalam persamaan matematika seperti dalam pembuatan pangkat
8.Latihan19
Coding:
Output:
Pembahasan:
Jadi pada codingan ini eropa dan asia mengggunakan colspan sebanyak 2,Jadi colspan=’2’ akan membuat 2 kolom bergabung menjadi 1 sel
9.Latihan20
Coding:Output:
Pembahasan:
Jadi dalam codingan ini agar kolom asia muat dengan baris negara kita menggunakan rowspan sebanyak 5 karena negara dalam kolom asia berjumlah 5,dan dalam kolom eropa kita menggunakan rowspan sebanyak 4.
10.Latihan21
Coding:Output:
Pembahasan:
Jadi dalam codingan ini agar jeruk menyatu dengan baris dibawahnya,kita menggunakan rowspan sebanyak 2,dan agar kolom disamping leci kosong maka dalam tag <td> nya tidak usah diisi
Nah,mungkin cukup sekian postingan saya kali ini semoga dengan adanya postingan ini dapat menambah ilmu pengetahuan kita.sampai ketemu lagi di post selanjutnya
Komentar
Posting Komentar