BAHAN AJAR

Sekolah : SMK Cendikia

Mata Pelajaran : Pemrograman Web dan Perangkat Bergerak
Kelas/Semester : XI/I
Materi Pokok : Tag-tag Tabel dalam HTML
Alokasi Waktu : 8 JP (8 x 45 menit)

A. TUJUAN PEMBELAJARAN
1. Pengetahuan
a. Produk
1) Secara Kelompok melalui diskusi dan menggali informasi dari berbagai sumber dan
mengamati tayangan slide power point, Peserta didik dapat menjelaskan tag-tag html
yang digunakan untuk membuat table dengan mengerjakan soal terkait di LP 3
minimal nilai sama dengan SKM.
2) Secara Kelompok melalui diskusi dan menggali informasi dari berbagai sumber dan
mengamati tayangan slide power point, Pesaerta didik dapat menentukan prosedur
pembuatan table dalam html dengan mengerjakan soal terkait di LP 3 minimal nilai
sama dengan SKM.
3) Secara Kelompok melalui diskusi dan menggali informasi dari berbagai sumber dan
mengamati tayangan slide power point, Peserta didik dapat menentukan penerapan
format table dalam web dengan mengerjakan soal terkait di LP 3 minimal nilai sama
dengan SKM.

b. Proses
Melalui diskusi, tanya jawab dan kerja kelompok, Peserta didik dapat menentukan
prosedur pembuatan table dalam tabel dengan mengerjakan evaluasi yang terkait dengan
LP 4 minimal nilai sama dengan SKM.

2. Keterampilan
a. Dengan menggunakan computer Peserta didik dapat merancang program tampilan table
dalam html sesuai rincian tugas kinerja di LP 5 minimal nilai sama dengan SKM.
b. Dengan menggunakan computer Peserta didik dapat membuat program halaman web
yang menampilkan table sesuai rincian tugas kinerja di LP 5 minimal nilai sama dengan
SKM.
c. Dengan menggunakan computer Peserta didik dapat melakukan pengujian program
tampilan table dalam web server sesuai rincian tugas kinerja di LP 5. minimal nilai sama
dengan SKM.

B. KOMPETENSI DASAR
3.3 Menerapkan format tabel pada halaman web
4.3 Membuat kode html untuk menampilkan tabel pada halaman web

C. INDIKATOR PENCAPAIAN KOMPETENSI

Pengetahuan
Produk (Penggalan materi 1) :
3.3.1 Menjelaskan tag-tag html yang digunakan untuk membuat tabel.
 3.3.2 Menentukan prosedur pembuatan tabel dalam html.
3.3.3 Menentukan penerapan format tabel dalam web.

Proses (Penggalan Materi 2):

3.3.4 Menentukan prosedur pembuatan tabel dalam tabel.

Keterampilan (Penggalan Materi 3)

4.3.1 Merancang program tampilan tabel dalam html
4.3.2 Membuat program halaman web yang menampilkan tabel.
4.3.3 Menguji program tampilan tabel dalam web server.

D. URAIAN MATERI
Penggalan Materi 1
1. Tag-tag table dalam HTML
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap
kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom
menunjukkan kelompok data dalam satu kesatuan. Sebuah tabel mempunyai judul, tempat
anda menjelaskan kolom/baris yang dilibatkan, baris untuk informasi dan sel untuk setiap
itemnya. Pada tabel berikut, kolom pertama berisi informasi header, setiap baris
menjelaskan sebuah tag tabel HTML dan setiap sel berisi sebuah pasangan tag atau
penjelasan dari fungsi tag.

2. Elemen-elemen Tabel

Elemen Penjelasan
<TABLE>…</TABLE> Mendefenisikan sebuah tabel dalam HTML jika atribut border
dituliskan, maka browser akan menampilkan tabel dengan border.
<CAPTION>…</CAPTION> Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul
adalah ditengah pada bagian paling atas tabel. Atribut
align=”bottom” dapat digunakan untuk menempatkan judul pada
bagian bawah tabel.
Catatan: judul dapat diberi tag apa
<TR>...</TR> saja
Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat
mendefinisikan atribut untuk seluruh baris: align(left, center, right)
dan/atau valign (top,middle,bottom).
<TH>…</TH> Mendefiniskan sel header tabel. Secara default teks dalam sel
ini ditebalkan dan ditampilkan di tengah.
<TD>…</TD> Mendefinisikan sebuah sel data tabel. Secara default teks
dalam sel ini ditampilkan rata kiri, dan ditengah secara vertikal.
Sel data table dapat berisi atribut untuk mendefinisikan
karakteristik dari sel dan isinya
 Atribut Tabel

Elemen Penjelasan
Align={left|center|right} Alignment horizontal untuk sel
Valign={top|middle|bottom} Definisi alignment vertical dalam sel
Colspan=n Jumlah n kolom sel diperlebar
Rowspan=n Jumlah n baris sel diperbesar
Nowrap Matikan wrapping dalam sel

Contoh membuat table dalam html

Simpan dengan table.html

Catatan :
Jumlah baris table ditentukan dengan banyaknya <tr> ..</tr> yang dituliskan dalam elemen
table, dari <table> …</Table>.

Jumlah kolomdalam table ditentukan dengan banyaknya <td> …</td> didalam setiap
definisi baris, dari <tr> .. </tr>
Attribute Border di tabel HTML

Attribute border digunakan untuk mengatur ukuran garis tepi yang ada pada tabel html, satuan
yang digunakan adalah satuan pixel.
jika anda tidak memberikan nilai pada bagian border maka tabel akan ditampilkan tanpa
memiliki garis, baik langsung kita coba ya dan kita coba bandingkan.

Simpan dengan nama border.html

 Attribute Cellspacing di Tabel HTML
Attribute Cellspacing digunakan untuk mengatur jarak luar antar masing masing cell,
bagaimana bingung ya ?
baik akan kita coba untuk membuat skrip sederhanya, untuk satuannya juga sama seperti
border yaitu pixel, contoh skripnya adalah sebagai berikut :

Simpan dengan nama cellspacing.html

 Attribute Cellpadding di Tabel HTML
Attribute  cellpadding digunakan untuk mengatur ukuran dari garis di masing masing cell dan
objek yang ada didalamnya, baik langsung aja kita coba buat

Simpan dengan nama cellpadding.html

Attribute Rowspan dan Colspan di tabel HTML

Kedua Attribute ini hampir memiliki fungsi yang sama, yaitu untuk menggabungkan beberapa
bagian dari tabel, lalu apa yang membedakan, mari kita bahas…

 Attribute Rowspan digunakan untuk menggabungkan bagian tabel (cell) yang berada di

bawahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara vertical.
 Attribute Colspan digunakan untuk menggbungkan bagian tabel (cell) yang berada di
sebelahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel
secara horizontal.
kedua attribute ini diletakkan di bagian tag <td>, agar tidak bingung kita akan membuat skrip
html sederhana agar anda lebih mengerti dari penggunaan attribute rowspan dan colspan.

Simpan dengan nama colrowspan.html

maka hasilnya adalah sebagai berikut :

 Tabel pertama yang menggunakan rowspan otomatis akan menggabungkan dari baris 1 kolom

1 dan baris 2 kolom 1 karena kita menggunakan attribute rowspan pada tag <td> di baris 1
kolom 1
 Tabel kedua yang menggunakan colspan otomatis akan menggabungkan baris 1 kolom
1 dan baris 1 kolom 2 karena kita menggunakan attribute rowspan pada tag <td> di baris 1
kolom 1

Attribute TH di tabel HTML

Attribute ini digunakan untuk menggantikan tag <td> pada bagian header dari tabel, bagian
header itu biasanya adalah baris pertama yang ada pada bagian tabel, biasanya digunakan
sebagai keterangan dari data masing masing kolom.

Lalu apa perbedaanya jika kita menggunakan <td> dan <th> ?

perbedaanya adalah jika kita menggunakan tag <th> maka text akan ditampilkan dengan huruf
tebal (bold) serta textnya akan berada di tengah (center),  lalu saya buat skrip sederhana
dibawah ini :
Simpan dengan nama th.html

Tag caption di tabel HTML

Tag caption digunakan untuk memberikan judul dari tabel, sebenarnya anda bisa saja langsung
menuliskan judul dari tabel dengan langsung menuliskan text yang diletakkan di atas bagian
tabel, tetapi dari pihak HTML sendiri telah menyediakan pembuatan judul langsung dengan
menggunakan tag caption.

Tag Caption bisa anda letakkan setelah tag tabel pembuka dan sebelum tag <tr> untuk baris
pertama, baik langsung saja kita buat skrip sederhana.
Simpan dengan nama caption.html

Tag <thead>, <tbody>, dan <tfoot> di tabel HTML

Seperti yang anda ketahui bahwa tabel biasanya digunakan untuk menampilkan data dalam
bentuk tabel, nah jika tabel diperlukan untuk menampilkan data yang kompleks.

Anda pasti akan membutuhkan strukutur tabel yang mudah dipahami agar ketika merubah style
tabel di css dapat lebih mudah.

Nah di HTML terdapat fitur untuk membagi strukutur tabel menjadi beberapa bagian yang akan
diwakili oleh 3 tag antara lain :

 <thead></thead> : untuk mendeklarasikan bagian header dari tabel

 <tbody></tbody> : untuk mendeklarasikan bagian body dari tabel
 <tfoot></tfoot>     : untuk mendeklarasikan bagian footer dari tabel
sekilas jika anda menggunakan tag ini memang tidak ada yang berbeda dalam hasil tabel yang
dihasilkan, tetapi jika anda menggunakan skrip css untuk merubah stylenya anda dapat terbantu
dengan adanya 3 tag ini, baik langsung saja kita coba ya, kita akan buat skrip sederhana :

Simpan dengan nama tbody.html

 beberapa style dari tabel, antara lain :

 Headernya berwarna merah karena di css thead kita buat background-color:red;

 Isi tabel berwarna hijau karena di css tbody kita buat background-color:green;
 Footer tabel berwarna kuning karena di css tfoot kita buat background-color:yellow;
Penggalan Materi 2
2. Prosedur Pembuatan table dalam table
Dalam membuat tabel di dalam tabel html kita bebas menentukan di sel mana yang akan kita
tempatkan tabel tersebut. Intinya kita harus tau sel yang mana perlu ditambah tabel.
Semisal kita ingin menambahkan tabel pada salah satu sel dari yaitu tag <td>

Coba perhatikan baik, pada contoh membuat tabel di dalam tabel diatas sudah terdapat tabel
didalam tabel, bisa dilihat bahwa dialam tag <td> dibangun lagi sebuah tabel. Mungkin anda
bisa memahaminya dengan saya tandai pada gambar tersebut.

Jadi jika kita ingin menambah tabel dalam tabel, yang harus dilakukan adalah membuat
tabelnya didalam tag <td> atau <th>, ini harus anda ingat. Bukan tag <tr>
Maka hasilnya adalah sebagai berikut :

Kita beralih lagi dalam contoh Cara Menambah Tabel di Dalam Tabel html dengan benar. Berikut ini
adalah contoh script membuat tabel biasa di html.
Diatas adalah tabel sederhana yang mungkin bentuknya seperti biasa anda buat karena tidak
ada tabel didalam tabel.
Terus sebagai contohnya, bagaimana kalau membuat tabel didalam sel nomor 10.ingat bahwa
kita menambahkan tabel harus pertimbangkan lebarnya juga.
Baik, contohnya kita ingin menambahkan tabel didalam tabel pada sel 10. 

Jadi kita membuat lagi tabel bari didalam sel 10, dan memulainya sama seperti kita membuat
tabel baru yaitu dengan tag <table> seperti berikut ini :

Nah tinggal ditambahkan atau lanjutkan seperti biasa membuat tabel. Sebagai contohnya
tambahkan tabel dengan urutan a,b,c,d,e,f,g,h didalamnya seperti berikut ini

Atau berikut script membuat tabel didalam tabel html diatas ketika sudah ditambahkan tabel
didalam tabel.
Maka hasil dari membuat tabel di dalam tabel html diatas sebagai berikut ini :

Diatas adalah sebagai contoh dalam pembuatan tabel didalam tabel html, ini tergantung
kebutuhan kamu dimana letak dari tabel didalam tabel yang kamu inginkan. 
 Penggalan Materi 3
Peserta didik mempraktikan Langkah membuat table dalam html seperti yang ada pada
penggalan materi 1 dan 2 menggunakan aplikasi teks editor Sublime

E. RUJUKAN
1. Marwati, Linda. 2018. Pemrograman Web Dan Perangkat Bergerak XI .MEDIATAMA
2. https://www.warungbelajar.com/belajar-html-part-19-cara-membuat-tabel-di-html.html
3. https://www.anakit.id/2019/03/tabel-dalam-tabel-html.html
4. https://modulkomputer.com/contoh-kode-html-untuk-membuat-tabel-dan-layout-web