Modul Kompbis 2 - Modul 05

MODUL
KOMPUTER BISNIS II
Kordinator :
Rama Chandra Jaya, S.Kom., MM
Anggota :
Arie Hendra Saputro, S.Pd., MM
Suhendar, S.Kom., M.M
Indra Purnama.,MT
MODUL 5
Tabel Layout Web HTML
SEKOLAH TINGGI ILMU EKONOMI “INDONESIA MEMBANGUN”

BANDUNG
TAHUN 2020
MODUL 5
Tabel Layout Web HTML
5.1 Capaian Pembelajaran

1. Mahasiswa mampu memahami Kode Dasar HTML
2. Mahasiswa mampu memahami Tag, Elemen, dan Atribut HTML
3. Mahasiswa mampu memahami Kode HTML Untuk Membuat Table
4. Mahasiswa mampu memahami Fungsi tag table, td, th, dan tr
5. Mahasiswa mampu memahami Cara Membuat Tabel HTML
6. Mahasiswa mampu memahami Membuat Tabel Layout Web
7. Mahasiswa mampu memahami Membuat Tabel didalam Tabel
HTML
5.2 Kode Dasar HTML
Perhatikan penulisan kode HTML dibawah, yang diberi highlight
merupakan tempat untuk menuliskan kode html lainnya, misalnya kode
untuk membuat table dan lain sebagainya.
Kode dasar HTML:
1 <html>
2 <head>
3 <title>Judul</title>
4 <body>
5 <p>Halo ini kode HTML pertamaku</p>
6 </body>
7 </head>
8 </html>
5.2.1 Tag, Elemen, dan Atribut HTML

Dari kode dasar HTML diatas, dapat dibagi menjadi tiga pokok
bahasan utama yaitu pembahasan tentang Tag, Elemen dan Atribut.
Tag
Tag dalam HTML rata-rata ditulis berpasangan. Tapi tidak semua Tag
selalu ditulis berpasangan. Tag HTML selalu diawali dengan Tag pembuka
<> dan diakhiri dengan Tag penutup </>.
Contoh tag dalam HTML:
1 <html>
2 <head>
3 <title>Judul Laman</title>
4 <body>
5 <p>Ini kode HTML pertamaku</p>
6 </body>
7 </head>
8 </title>
1
Pada kode HTML diatas yang diberi highlight,
1 <title>Judul Laman</title>
merupakan contoh dari Tag. Diawali dengan tak
<title>....elemen....kemudian ditutup dengan tag

1
</title>.
Dari kode HTML diatas, kita bisa kumpulkan masing-masing tag seperti
dibawah ini:
1 <html>...</html>
2 <head>...</head>
3 <title>...</title>
4 <body>...</body>
5 ...
Elemen
Elemen merupakan isi tag. Biasanya berupa teks, tapi tidak selalu berupa
teks bisa juga berupa sinyaks lainnya.
Contoh Elemen:
1 <p>Halo ini kode HTML pertamaku</p>
Penjelasan singkatnya:
1 <p>.....</p>
Merupakan Tag paragrafh dalam HTML

Sedangkan teks “Halo ini kode HTML pertamaku” merupakan isi tag
paragraph
Ingat!
Jangan tertukar, antara Tag dan Elemen.
Pengetahuan mengenai jenis-jenis Elemen dalam HTML bisa dibaca materi
dasar html
Atribut
Atribut merupakan informasi tambahan dari Tag. Sering juga disebut
dengan isi Tag. Setiap atribut akan berpasangan dengan Value. Value
merupakan isi dari atribut, ditulis setelah tanda sama dengan dengan
memberi tanda kutip.
2
Contoh dari atribut dalam HTML:
1 <p align="center">
2 <table border="1">
Penjelasan singkat dari contoh atribut diatas:
1 <p align="center">
Perhatikan!
Atribut diatas adalah align, dan valuenya adalah center. Atribut diatas
digunakan untuk mengatur posisi paragraf berada ditengah / center.
Pengetahuan lebih lengkap mengenai jenis-jenis atribut dalam HTML bisa
dibaca pada materi; Jenis-jenis Atribut dalam HTML
Perlu diperhatikan juga, bahwa tidak semua Tag membutuhkan atribut.
Contohnya tag
1 <html>...</html>
Tapi pada HTML akan sering ditemukan tag yang berisi atribut-
atribut sesuai dengan fungsi yang dikehendaki oleh programmer yang akan
membuat laman web.
Untuk membuat tabel/table menggunakan kode HTML caranya
sangat mudah. Silahkan diperhatikan terlebih dahulu kode dasar dalam
pembuatan table menggunakan kode HTML dibawah ini.
1 <html>
2 <head>
3 <title>Tabel</title>
4 </head>
5 <body>
7 <tr>
8 <td>Kolom 1 baris ke 1</td>
10 </tr>
11 </table>
12 </body>
13 </html>
3
Contoh table 1.
1 <html>
2 <head>
3 <title>Contoh Table 1</title>
4 </head>
5 <body>
6
8 <tr>
11 </tr>
12 <tr>
15 </tr>
16 </table>
17 </body>
18 </html>
Kode contoh table 1 diatas, jika ditampilkan dengan browser seperti

dibawah ini.
5.2.2 Atribut Pada Tabel

Atribut pada tabel HTML merupakan informasi tambahan dari Tag yang
digunakan dalam pembuatan Tabel. Beberapa atribut yang sering
digunakan dalam pembuatan Tabel antara lain:
1 <table border="1">atribut ini digunakan untuk mengatur

2 ketebalan garis tabel.
3 <td height="90px">
4 atribut ini digunakan untuk mengatur tinggi kolom
5 <td width="400px">
6 atribut ini digunakan untuk mengatur lebar kolom
7 <td rowspan="2">
4
8 atribut ini digunakan untuk menggabungkan
beberapa baris
<td colspan="2">atribut ini digunakan untuk
menggabungkan beberapa kolom
Selain atribut diatas, masih banyak lagi atribut-atribut lainnya yang sering
digunakan dalam pembuatan table di HTML. Pengetahuan lebih lengkap
bisa dilihat pada laman:Jenis-jenis Atribut Pada Table HTML
Contoh penggunaan atribut pada table

Berikut beberapa penggunaan atribut pada pembuatan Tabel
menggunakan HTML.
<html>
1
<head>
2
<title>Contoh Table 2</title>
3
</head>
4
<body>
5
<table border="1">
6
<tr>
7
<td colspan="2" width="720px"
8
height="90px">Header</td>
9
</tr>
10
<tr>
11
<td width="200px" height="400px">Sidebar </td>
12
<td>Content</td>
13
</tr>
14
<tr>
15
<td colspan="2" height="90px">Footer</td>
16
</tr>
17
</table>
18
</body>
19
</html>
Pada kode yang di highlight, ada tiga atribut yang digunakan yaitu atribut:
<colspan="2">atribut ini digunakan untuk menggabungkan

dua kolom
1
<width="720px">atribut ini digunakan untuk mengatur
2
lebar tabel menjadi 720px
3
<height="90px">atribut ini digunakan untuk mengatur
tinggi baris menjadi 90px
5
Dalam penulisan contoh kode html untuk membuat tabel kali ini, kita
akan mengingat kembali struktur kode html untuk membuat kolom dan
baris. Juga akan kita praktikan kembali penggunaan atribut table seperti
width, height, colspan, dan rowspan.
5.3 Kode HTML Untuk Membuat Table

Sebelum kita membuat tabel dengan kelengkapan atribut-atributnya.
Terlebih dahulu kita ingat-ingat kembali kode html dasar untuk membuat
tabel.
Menulis kode HTML di Notepad

Untuk latihan kali ini text editor untuk menulis kode HTML kita gunakan
aplikasi bawaan Windows, yaitu Notepad.
Bagi yang belum tahu cara masuk ke Notepad, langkahnya:
1. Klik Start
2. Klik all programs
3. Klik Accessories
4. Klik Notepad
Tampilan jendela kerja Notepad seperti dibawah ini;
5.4 Fungsi tag table, td, th, dan tr :
<table>:
Untuk membuat tabel awal.
<td>:
Kepanjangan dari table data, digunakan untuk membuat isi dari th atau baris
atau kalau di MS.excel seperti cell.
<th>:
Kepanjangan dari table heading, digunakan untuk membuat judul sebuah
table seperti No, dan nama. Biasanya di tanda dengan hurufnya menjadi
bold seperti contoh table di atas.
<tr>:
Kepanjangan dari table row, digunakan untuk mendefiniskan baris pada
tabel
6
Selain Notepad, ada banyak text editor lainnya yang biasa digunakan
untuk latihan menulis kode HTML dan kode pemrograman lainnya,
diantaranya Notepad ++, Sublema, atau bahkan aplikasi besutan Windows
lainnya yaitu Wordpad.
Jika sudah terbuka jendela kerja Notepad tersebut, selanjutnya kita mulai
kode-kode HTML dibawah ini.
1. Penggunaan Tag Pembuka dan Penutup Table
1 <html>
2 <head>
3 <title>table</title>
4 <body>
6 .......disini tag untuk baris dan kolom....
7 </table>
8 </body>
9 </head>
10 </html>
Bagian kode HTML yang diberi highlight baris ke 5 dan ke 7,

merupakan tag pembuka dan pentup untuk membuat tabel di html. Pada
baris ke 5, tag pembuka dilengkapi dengan atribut border=”1″, atribut
tersebut fungsinya untuk menampilkan garis tabel. Value atau isi dari atribut
tersebut bisa 1,2,3 dan seterusnya.
2.Tag pembuka dan penutup baris TR
1 <html>
2 <head>
4 <body>
6 <tr>
7 .........disini tag untuk kolom....
8 </tr>
9 </table>
10 </body>
11 </head>
12 </html>
Tag yang diberi highlight pada baris ke 6 dan ke 8 merupakan tag pembuka
dan penutup untuk menampilkan baris pada tabel.
7
3. Tag pembuka dan penutup kolom TD
1 <html>
2 <head>
4 <body>
6 <tr>
7 <td>Kolom 1</td>
8 <td>Kolom 2</td>
9 </tr>
10 </table>
11 </body>
12 </head>
13 </html>
Kode yang diberi highlight pada baris ke 7 dan 8 merupakan tag untuk
menampilkan kolom pada tabel.
4. Contoh tabel 2 baris 3 kolom

Dibawah ini merupakan kode dasar HTML untuk menampilkan tabel 2 baris
3 kolom.
1 <html>
2 <head>
4 <body>
6 
7 <tr>
8 <td>Kolom ke 1 baris ke 1</td>
11 </tr>
12
13 
14 <tr>
18 </tr>
19 </table>
20 </body>
21 </head>
22 </html>
8
5. Menyimpan file HTML dan Menampilkannya di Browser
Bagi yang belum tahu cara menyimpan file HTML di notepad, langkahnya:
1. Klik Save As, ata CTRL + S
2. Pada file Name, tulis nama file dengan akhiran extensi html
3. Pada Save as type, pilih All Files
4. Save
Untuk menampilkan kode html yang sudah ditulis dan disimpan tadi,
langkahnya:
1. Buka browser yang ada pada komputer, misalnya Mozilla Firefox
2. Klik File, pilih Open File
9
3. Pilih File HTML
4. Pilih Open
Kode dasar HTML untuk membuat tabel diatas, jika ditampilkan pada
browser Mozilla Firefox, maka tampilannya seperti screenshoot tampilan
tabel dibawah ini.
5.5 Cara Membuat Tabel HTML

Setelah mengetahui kode dasar html untuk membuat tabel,
berikutnya kita coba membuat berbagai contoh tabel, sehingga nantinya
menghasilkan contoh tabel yang bagus yang dibuat menggunakan kode-
kode html.
Untuk menghasilkan tabel yang bagus sebenarnya kita bisa
memodifikasinya dengan kode CSS, tapi untuk latihan kali ini kita hanya
akan membahas kode HTML saja. Jadi, untuk membuat tabel yang bagus
menggunakan kode HTML, paling kita menambahkan atribut untuk
mengatur lebar dan tinggi, serta atribut untuk memberi warna pada header
tabel.
10
5.5.1 Contoh tabel HTML menggunakan atribut Width
Atribut WIDTH digunakan untuk mengatur lebar kolom, dengan
value 1px, 2px, 3px, dan seterusnya tergantung seberapa lebar kolom yang
diinginkan.
Contoh table dengan atribut width:
1 <html>
2 <head>
4 <body>
7 <tr>
8 <td width="50px">No</td>
9 <td width="150px">Nama Lengkap</td>
10 <td width="100px">Kelas</td>
11 <td width="200px">Alamat</td>
12 </tr>
13
15 <tr>
16 <td>1</td>
17 <td>Indah Safitri</td>
18 <td>X Multimedia</td>
19 <td>Kp. Malang Nengah</td>
20 </tr>
21 </table>
22 </body>
23 </head>
24 </html>
Yang diberi highlight, baris 8,9,10,11 tag kolom yang diberi atribut
width. Jika ditampilkan dalam browser maka tampilannya seperti dibawah
ini;
11
5.5.2 Mengatur Alignt Text pada Tabel
Agar tampilan text pada tabel terlihat rapi, maka gunakan tag align.
Tag align memiliki value /isi yaitu left, center, right.
Contoh tampilan table html dengan penambahan atribut align:
1 <html>
2 <head>
4 <body>
7 <tr align="center">
8 <td width="50px">No</td>
9 <td width="150px">Nama Lengkap</td>
10 <td width="100px">Kelas</td>
11 <td width="200px">Alamat</td>
12 </tr>
13
15 <tr>
16 <td align="center">1</td>
20 </tr>
21 </table>
22 </body>
23 </head>
24 </html>
Pada baris ke 7 yang diberi highlght pada tag TR diberi

atribut align dengan value center, ini untuk menampilkan posisi teks berada
ditengah-tengah kolom tabel.
Pada baris 16, pada tag TD diberi atribut align dengan value center,
ini untuk menampilkan posisi teks berada ditengah-tengah kolom nomor
saja. Jika ditampilkan dalam browser, tampilannya seperti dibawah ini;
12
5.5.3 Membuat kepala tabel dan memberi background warna
Untuk membedakan antara kepala tabel dan baris tabel lainnya,
biasanya diberi pembeda dengan menebalkan text atau dengan memberi
latar warna pada kepala tabel tersebut.
Untuk membuat kepala tabel, tinggal mengganti tag TD dengan TH.
Sedangkan untuk memberi latar warna pada kepala tabel, tinggal memberi
atribut bgcolor=”” dengan value jenis warna yang diinginkan, misalnya
kuning. Value bisa diisi dengan kode warna, atau langsung menuliskan
nama warna dalam bahasa inggris, misalnya Yellow.
1 <html>
2 <head>
4 <body>
7 <tr align="center" bgcolor="yellow">
8 <th width="50px">No</th>
9 <th width="150px">Nama Lengkap</th>
10 <th width="100px">Kelas</th>
11 <th width="200px">Alamat</th>
12 </tr>
13
15 <tr>
16 <td align="center">1</td>
20 </tr>
21 </table>
22 </body>
23 </head>
24 </html>
Pada baris ke 7, tag TR sudah diberi atribut bg color dengan value

yellow, itu artinya baris pertama pada tabel diberi latar warna kuning.
Perhatikan pula, pada baris ke 8,9,10,11 tag TD diganti dengan Tag TH
untuk membuat kepala tabel, jika ditampilkan dalam browser maka text
pada header tabel tersebut akan ditebalkan.
Lihat hasilnya pada tampilan layar berikut;
13
5.5.4 Membuat Tabel html Colspan Rowspan
Colspan
Colspan merupakan atribut yang digunakan untuk menggabungkan kolom.
Adapun value dari atribut tersebut adalah 1,2,3 dan seterusnya tergantung
jumlah kolom yang digabungkan.
Contoh penggunaan atribut Colspan:
Kode awal sebelum diberi atribut colspan
1 <html>
2 <head>
4 <body>
5 <tr>
6 <td width="100px">1</td>
10 </tr>
11 </table>
12 </body>
13 </head>
14 </html>
Kode html table setelah diberi atribut colspan untuk menggabungkan kolom
3 dan 4
1 <html>
2 <head>
4 <body>
5 <tr>
8 <td width="100px" colspan="2">3</td>
9 
10 </tr>
11 </table>
12 </body>
13 </head></html>
14
Keterangan:
Pada baris 8 diberi atribut colspan=”2″ digunakan untuk
menggabungkan kolom 3 dan 4. Karena pada tag kolom 3 sudah diberi
atribut colspan, maka tag kolom ke 4 dihilangkan / dihapus.
Contoh penggunaan tag colspan pada sebuah tabel:

<html>
1
<head>
2
<title>table</title>
3
<body>
4
<table border="1">
5
<tr align="center" bgcolor="yellow">
6
<th width="50px">No</th>
7
<th width="150px">Nama Lengkap</th>
8
<th width="100px">Kelas</th>
9
<th width="200px">Alamat</th>
10
<th width="300px" colspan="2">Tempat , Tgl.
11
Lahir</th>
12

13
</tr>
14
15
<tr>
16
<td align="center">1</td>
17
<td>Indah Safitri</td>
18
<td>X Multimedia</td>
19
<td>Kp. Malang Nengah</td>
20
<td>Jakarta</td>
21
<td>08 Juli 2003</td>
22
</tr>
23
24
<tr>
25
<td align="center">2</td>
26
<td>Wandi Wigoena</td>
27
<td>X Multimedia</td>
28
<td>Sentral land</td>
29
<td>Bogor</td>
30
<td>17 Agustus 2003</td>
31
</tr>
32
</table>
33
</body>
34
</head>
35
</html>
15
Tampilan kode pada layar:
Rowspan
Rowspan merupakan atribut yang digunakan untuk menggabungkan
baris. Value dari atribut rowspan sama dengan value pada atribut colspan,
yatu angka 1,2,3 dan seterusnya.
Contoh penggunaan aribut rowspan pada tabel
Kode awal:
1 <html>
2 <head>
4 <body>
6 <tr>
9
10 <tr>
13 </tr>
14 </table>
15 </body>
16 </head>
17 </html>
Kode setelah penambahan atribut rowspan, untuk menggabungkan

baris ke1 kolom ke1 dengan baris ke 2 kolom ke 1
1 <html>
2 <head>
4 <body>
6 <tr>
7 <td width="100px" rowspan="2">1</td>
16
9
10 <tr>
11 
14 </tr>
15 </table>
16 </body>
17 </head>
</html>
Jika ditampilkan dalam browser sebagai berikut;
Silahkan buat contoh tabel dengan atribut rowspan lainnya!

Lihat: Materi Dasar-dasar HTML Lengkap Untuk Belajar Pemrograman
Web
5.6 Membuat Tabel Layout Web

Tabel di dalam tabel kadang diperlukan, khususnya pada saat
pembuatan layout halaman web menggunakan html. Berikut beberapa
contoh kode html untuk membuat tabel di dalam tabel.
Contoh kode html untuk membuat tabel layout web:
1 <html>
2 <head>
3 <title>Layout</title>
4 <body>
5 <table border="1" width="900px">
6 
7 <tr bgcolor="cyan">
8 <td colspan="2" height="90px">Header 1</td>
9 
17
10 </tr>
11 
12 <tr>
13 <td width="600px" height="400px"
14 bgcolor="purple">body 1</td>
15 <td width="300px" bgcolor="blue">body 2</td>
16 </tr>
17 
18 <tr bgcolor="cyan">
19 <td colspan="2" height="120px">Footer 1</td>
20 
21 </tr>
22 </body></head>
23 </html>
Jika ditampilkan dalam browser tampilannya seperti dibawah ini;
18
5.7 Membuat Tabel didalam Tabel HTML
Contoh penerapan tabel didalam tabel:
<html>
1
<head>
2
<title>Layout</title>
3
<body>
4
<table border="1" width="900px">
5

6
<tr bgcolor="cyan">
7
<td colspan="2" height="90px">Header 1</td>
8

9
</tr>
10
11

12
<tr>
13
<td width="600px" height="400px" bgcolor="purple"
14
valign="top">
15

16
<table border="1">
17
<tr bgcolor="yellow">
18
<td width="200px">Menu 1</td>
19
20
21
</tr>
22
</table>
23
</td>
24
<td width="300px" bgcolor="blue">body 2</td>
25
</tr>
26
27

28
<tr bgcolor="cyan">
29
<td colspan="2" height="120px">Footer 1</td>
30

31
</tr>
32
</body>
33
</head>
34
</html>
19
Jika ditampilkan di layar menggunakan browser:
20
Tugas dan Latihan:
Buatlah halaman HTML sebagai berikut dengan semirip mungkin:
Berikut adalah tampilannya pada browser:
Buat lah halaman HTML diatas. Simpan dengan nama Latihan 05-01 –
Nama – Nim.
Misal: Latihan 05-01 - Rama Chandra– 012310123
Kirim File Tersebut Ke Link Bitly yang akan diinformasikan kepada KM

setiap kelas sesuai dengan arahan Dosen masing-masing
• Rama Chandra Jaya, S.Kom., MM

• Arie Hendra Saputro, S.Pd., MM
• Suhendar, S.Kom., M.M
• Indra Purnama.,MT
Tugas Ini Bersifat WAJIB sebagai pengganti kehadiran.
21
DAFTAR PUSTAKA
Adi, Arista Prasetyo. (2019) 111 Kode HTML untuk Belajar Kilat. Elex Media
Komputindo
Jubilee Enterprise. (2016) HTML 5 dan PHP. Elex Media Komputindo
SAPUTRA, ADAM. (2019) Buku Sakti Html, Css & Javascript :
Pemrograman Web. START UP
Solichin S.Kom, A. (2016). Pemrograman Web dengan PHP dan MySQL -
Achmad Solichin - Google Buku. Universitas Budi Luhur.
https://doi.org/10.1061/(ASCE)IS.1943-555X.0000027
22

Bahasa

Modul Kompbis 2 - Modul 05

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Kompbis 2 - Modul 05

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL

SEKOLAH TINGGI ILMU EKONOMI “INDONESIA MEMBANGUN”

5.1 Capaian Pembelajaran

5.2.1 Tag, Elemen, dan Atribut HTML

merupakan contoh dari Tag. Diawali dengan tak

<title>....elemen....kemudian ditutup dengan tag

1 <p>Halo ini kode HTML pertamaku</p>

Merupakan Tag paragrafh dalam HTML

Penjelasan singkat dari contoh atribut diatas:

Kode contoh table 1 diatas, jika ditampilkan dengan browser seperti

5.2.2 Atribut Pada Tabel

1 <table border="1">atribut ini digunakan untuk mengatur

Contoh penggunaan atribut pada table

<colspan="2">atribut ini digunakan untuk menggabungkan

5.3 Kode HTML Untuk Membuat Table

Menulis kode HTML di Notepad

5.4 Fungsi tag table, td, th, dan tr :

1. Penggunaan Tag Pembuka dan Penutup Table

Bagian kode HTML yang diberi highlight baris ke 5 dan ke 7,

2.Tag pembuka dan penutup baris TR

4. Contoh tabel 2 baris 3 kolom

5.5 Cara Membuat Tabel HTML

Contoh tampilan table html dengan penambahan atribut align:

Pada baris ke 7 yang diberi highlght pada tag TR diberi

Pada baris ke 7, tag TR sudah diberi atribut bg color dengan value

Contoh penggunaan tag colspan pada sebuah tabel:

Kode setelah penambahan atribut rowspan, untuk menggabungkan

Jika ditampilkan dalam browser sebagai berikut;

Silahkan buat contoh tabel dengan atribut rowspan lainnya!

5.6 Membuat Tabel Layout Web

Jika ditampilkan dalam browser tampilannya seperti dibawah ini;

Kirim File Tersebut Ke Link Bitly yang akan diinformasikan kepada KM

• Rama Chandra Jaya, S.Kom., MM

Tugas Ini Bersifat WAJIB sebagai pengganti kehadiran.

Anda mungkin juga menyukai