Laporan Praktikum Tag Tabel

Materi Praktikum : Tag Tabel

Tanggal Praktikum : Selasa, 5 Oktober 2021

Hasil :

1. Untuk memulai, pertama buka sublime text terlebih dahulu, lalu klik new file

2. Lalu simpan file dengan nama latihan 3.html

3. Kemudian klik tag html, dan isikan title dengan praktikum 3

4. Lalu pada bagian body, beri judul dengan “membuat table pada HTML” caranya yaitu:

<h1 align="center" style="margin: 0px 0px 0px 0px;">Membuat Tabel pada HTML</h1> yang berfungsi :

a. <h1 berfungsi untuk membuat judul

b. align="center" berfungsi agar judul berada ditengah

c. style="margin” berfungsi untuk mengatur tata letak/jarak

5. kemudian buat tabel, dengan menambahkan <table border="1" width="600px" align="center"> yang berfungsi untuk:

a. Border digunakan untuk membuat garis tepi

b. Width digunakan untuk mengatur lebar table tanpa tergantung oleh ukuran jendela browser

c. align="center" digunakan agar tabel berada ditengah

6. Dalam sebuah tabel terdapat baris dan kolom, cara nya yaitu dengan menambahkan:

a. Tag tr (Table Row) digunakan untuk membuat baris

b. Tag td (Table Data) digunakan untuk membuat kolom

7. Akan didapatkan hasil sebagai berikut:

8. Selanjutnya untuk membuat judul pada tabel, caranya yaitu <th colspan="3">Kolom utama</th>

a. Tag th (Table Header) fungsinya sama seperti tag td, tetapi terletak di baris pertama dan sebagai header dari table

b. colspan="3" berfungsi untuk menggabungkan 3 kolom

9. hasilnya sebagai berikut:

10. kemudian jika ingin menggabungkan kolom 1, dapat menggunakan colspan, seperti berikut:

11. hasilnya seperti berikut:

12. jika ingin memposisikan tulisan di tengah dan pada bagian atas, caranya yaitu align="center" valign="top"

a. align=center digunakan untuk memposisikan tulisan berada di tengah

b. valign=”top” digunakan untuk memposisikan tulisan berada di atas

13. Didapatkan hasil sebagai berikut

14. Membuat biodata diri menggunakan tabel, sebelumnya gunakan tag hr untuk memberi garis untuk menandakan pembatas

15. Didapatkan hasil sebagai berikut

16. Untuk menghilangkan garis, ubah border yang tadinya 1 menjadi 0

17. Didapatkan hasil sebagai berikut

18. Lanjutkan membuat riwayat Pendidikan

19. Didapatkan hasil sebagai berikut

20. Membuat iframe

21. Didapatkan hasil sebagai berikut