Modul Pemrograman Web dan Perangkat Bergerak

Kb 1. Pembuatan Table menggunakan tag HTML Page 1

Modul Pemrograman Web dan Perangkat Bergerak

KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Allah SWT, berkat rahmat dan karunia Nya sehingga
terselesaikannya penulisan “Modul membuat table dengan tag HTML format table” modul ini merupakan
bahan ajar yang digunakan sebagai panduan dalam mempelajari pembuatan table menggunakan tag
HTML bidang studi Teknik Komputer dan Informatika pada paket keahlian Rekayasa Perangkat Lunak.
Modul ini menguraikan tentang pembuatan table menggunakan tag <tr> tag <td> dan atribut-atribut
lainya.
Kesuksesan belajar berawal dari kemauan dan ditunjang oleh berbagai sarana, salah satu
diantaranya adalah buku. Harapan kami, Modul ini dapat membantu siswa memahami tentang
pembuatan table pada HTML.
Akhir kata kami mengucapkan terima kasih kepada semua pihak yang telah membantu dalam
menerbitan bahan ajar ini. Kritik dan saran sangat kami harapkan untuk perbaikan bahan ajar ini di
masa yang akan datang.

Trenggalek, 05 Agustus 2021

Wahyu Tri Wulansari, S.Pd

Kb 1. Pembuatan Table menggunakan tag HTML Page 2

Modul Pemrograman Web dan Perangkat Bergerak

DAFTAR ISI

KATA PENGANTAR ...................................................................................................................... 2

DAFTAR ISI ................................................................................................................................... 3

A. PENDAHULUAN ..................................................................................................................... 4
1. Deskripsi Singkat ............................................................................................................... 4
2. Relevensi ........................................................................................................................... 4
3. Petunjuk Belajar ................................................................................................................ 4
B. INTI .......................................................................................................................................... 4
1. Capaian Pembelajaran ...................................................................................................... 4
2. Pokok – Pokok Materi ........................................................................................................ 4
3. Uraian Materi ..................................................................................................................... 4
a. Prosedure penulisan format table pada halaman web ................................................ 4
b. Tag HTML untuk membuat table ................................................................................. 5
c. Atribut border dan widht pada table ............................................................................ 6
4. Forum Diskusi.................................................................................................................... 7
C. RANGKUMAN ......................................................................................................................... 8
D. TES FORMATIF....................................................................................................................... 8
E. DAFTAR PUSTAKA ................................................................................................................ 8

Kb 1. Pembuatan Table menggunakan tag HTML Page 3

Modul Pemrograman Web dan Perangkat Bergerak

A. PENDAHULUAN
1. Diskripsi Singkat

Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya.
Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar,
sampai dengan tabel.Tabel terdiri dari 4 unsur utama, yaitu baris, kolom, sel dan Garis. Untuk
membuat table pada HTML perlu menggunakan tag yang sudah di sediakan pada HTML.
2. Relevensi

Setelah mempelajari materi ajar ini diharapkan mampu:

1. Menguasai dan memahami prosedure penulisan format table pada HTML
2. Menggunakan tag HTML untuk membuat table pada HTML.

3. Menggunakan atribut border dan width pada table

3. Petunjuk Belajar

Untuk membantu memahami materi ajar ini perhatikan petunjuk belajar berikut:
a. Bacalah uraian materi tentang tag HTML untuk format table, atribut yang digunakan
dalam format table.
b. Untuk memudahkan pemahaman terhadap materi ajar ini bacalah peta konsep dengan
seksama.
c. Bacalah masalah yang muncul dalam materi ajar ini yang terdiri dari tag <table>, <tr>,
<td> maupun tag lainnya.

B. INTI
1. Capaian Pembelajaran
a. Mengetahui penulisan format table pada HTML
b. Mengetahui penggunaan tag – tag pembuatan table
c. Mengetahui atribut pada table
d. Membuat table menggunakan tag – tag table dalam HTML
2. Pokok – pokok materi
 Tag <table>
 Tag <tr> dan <td>
 Atribut border dan width pada table
3. Uraian Materi
1. Prosedure penulisan format table pada halaman web
Pada sebuah tabel tentunya selalu terdiri dari dua elemen utama, yaitu baris dan kolom.
Pada HTML dalam pembutan table tentunya juga memiliki elemen untuk membuat baris dan
kolom dari sebuah table. Sebelum membuat baris dan kolom dari tabel kita harus membuat

Kb 1. Pembuatan Table menggunakan tag HTML Page 4

Modul Pemrograman Web dan Perangkat Bergerak

tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan
elemen <table>

Setelah mengawali dengan elemen <table> selanjutnya untuk membuat baris pada sebuah
table digunakan tag HTML atau elemen <tr>

Di setiap baris pada table tentunya harus disikan dengan data yang akan menghasilkan
kolom pada table. Pembuatan kolom atau pengisian data pada table menggunakan tag
HTML atau elemen <td>

2. Tag HTML untuk membuat table

Ketika akan membuat tabel dengan HTML ada beberapa tag atau elemen HTML yang
harus diketahui. Pada dasarnya untuk pembuatan table pada HTML cukup menggunakan 3
elemen HTML berikut :

1. Elemen <table> digunakan untuk mendefinisikan pembuatan tabel

2. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel

3. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel

Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan
elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :

1. Elemen <th> digunakan untuk mendefinisikan header di dalam tabel

Kb 1. Pembuatan Table menggunakan tag HTML Page 5

Modul Pemrograman Web dan Perangkat Bergerak

2. Elemen <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel

3. Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel

4. Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari
tabel

3. Atribut border dan width pada table

 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.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika memberikan
nilai border=”2″, maka web browser akan menampilkan garis tepi sebesar 2 pixel pada
sisi atas, bawah, kiri dan kanan tabel.
Contoh penggunaan

Kb 1. Pembuatan Table menggunakan tag HTML Page 6

Modul Pemrograman Web dan Perangkat Bergerak

 Mengatur Lebar Tabel Dengan Atribut Width

Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom
(tag th, tag td, maupun tag col). Jika diletakkan pada tag table, atribut ini berfungsi
untuk mengatur lebar tabel secara keseluruhan. Namun jika diletakkan pada
tag th atau td, atribut ini akan berfungsi untuk mengatur lebar kolom.

Untuk mengatur lebar kolom tabel secara individu, maka atribut width harus diletakkan
pada tag kolom (tag th, td, maupun tag col).
Namun syarat agar bisa mengatur lebar masing-masing kolom, lebar tabel juga telah
ditentukan terlebih dahulu melalui atribut width pada tag table.

4. Forum Diskusi
Perhatikan gambar table berikut
Gambar 1

Gambar 2

Gambar 3

Analisis ketiga table yang sudah disediakan, apa yang menjadikan dari ketiga table tersebut
hasil tampilannya berbeda.!

Kb 1. Pembuatan Table menggunakan tag HTML Page 7

Modul Pemrograman Web dan Perangkat Bergerak

C. RANGKUMAN
Pada dasarnya untuk pembuatan table pada HTML cukup menggunakan 3 elemen HTML berikut :

1. Elemen <table> digunakan untuk mendefinisikan pembuatan tabel

2. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel

3. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel

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.
Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th,
tag td, maupun tag col). Jika diletakkan pada tag table, atribut ini berfungsi untuk mengatur lebar
tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan berfungsi
untuk mengatur lebar kolom

D. TES FORMATIF
1. Jelaskan secara runtut membuatan table dalam halaman web!
2. Jelaskan fungsi dari tag <table>!
3. Jelaskan fungsi dari tag <tr>!
4. Jelaskan fungsi dari tag <td>!
5. Jelaskan fungsi dari atribut border pada table!
6. Jelaskan fungsi dari atribut widht pada table!

E. DAFTAR PUSTAKA
Utomo, Eko Priyo, 2013. Mobile Web Programming HTML 5, CSS3, JQuery Mobile. Yogyakarta:
Andi
Kadir, Abdul,2013. From Zero To A Pro: HTML 5 Panduan Untuk Mempelajari Pengembangan Rich
Internet Applications Melibatkan CSS, Javascript, Dan PHP .Yogyakarta:Andi
https://www.petanikode.com/html-tabel/ diakses pada tanggal 5 agustus 2021 pukul 11.00

Kb 1. Pembuatan Table menggunakan tag HTML Page 8