tugas kelompok 2 - pemrograman web
TRANSCRIPT
MATERI PEMBELAJARAN
ANATOMI TABEL MINIMAL
TABEL DENGAN SPANNING
TABEL DENGAN BORDER
TABEL DENGAN PADDING
ANATOMI TABEL MINIMAL
Model tabel HTML memungkinkan pengguna untuk mengatur data seperti teks, teks terformat, gambar, link, bentuk, kolom formulir, tabel, dan sebagainya.
Pengelompokan beberapa bagian tabel:
Table Head, <THEAD> kepala tabel biasa disebut header.
Table Foot, <TFOOT> kaki tabel biasa disebut footer.
Table Body Sections, <TBODY elements> dan bagian body atau isi.
Contoh tabel HTML yang menggunakan urutan dan struktur kepala, kaki dan
tubuh.
<! DOCTYPE html><html><body><TABLE><thread><t r> . . . Informasi header . . . < /t r>< / thead><TFOOT><TR> . . . Informasi Footer . . .< / t r>< /TFOOT><Tbody><tr> . . . Baris pertama blok data satu . . .< / t r><tr> . . . Baris kedua blok data satu . . .< / t r>< /Tbody><tr> . . . Baris pertama blok dua data . . .< / t r><tr> . . . Baris kedua blok dua data . . .< / t r><tr> . . . Baris ketiga blok dua data . . .</ t r>< /TABLE>< /body>< /html>
NEXTHASIL LISTING
… Informasi header …… Informasi footer …… baris pertama blok data satu ……Baris kedua blok data satu ……. Baris pertama blok dua data …… Baris kedua blok dua data …… Baris ketiga blok dua kata …
APA ITU PEMBUATAN
TABEL??
Pembuatan tabel pada dasarnya merupakan media informasi yang harus tersusun secara sistematis. Oleh karena itu, pembuatan tabel pada halaman web juga diperlukan mengingat informasi yang dapat disampaikan dalam berbagai bentuk. Tabel memberikan kemudahan untuk memahami sebuah penjelasan dibandingkan narasi, karenanya halaman web harus memungkinkan untuk memasukkan tabel di dalamnya.
CONTOH TABEL MINIMAL PADA
HALAMAN WEB!!!
< ! DOCTYPE html><html><body><table><caption>Perhitungan dan Hasil < / caption><tr><th>Perhitungan< / th><th>hasil< / th>< /tr><tr><td>1 + 1< / td><td>2< / td>< / tr><tr><td>3 * 5< / td><td>15< / td>< / tr>< /table>< /body>< /html>
Hasilnya seperti di samping
Perhitungan danHasil
Perhitungan Hasil 1 + 1 2 3 * 5 15
NEXT CONTOH
KEDUA DARI LISTING TABEL
MINIMAL!!
LET’S CHECK IT OUT BUNG!!
< ! DOCTYPE html><html><body><p>Tabel HTML dimulai dengan tag table . <br> Tabel baris mulai dengan tag tr . <br>Tabel data mulai dengan tag td .< / p.<hr><h3>kolom 1 : < /h3><table><tr><td>100< /td>< / tr>< / table><hr><h3>1 baris dan 3 kolom:< /h3><table><tr><td>100< /td><td>200< /td><td>300< /td>
< / tr>< / table><hr><h3>3 baris dan 3 kolom :< / h3><table><tr><td>100< / td><td>200< /td><td>300< /td>< / tr><tr><td>400< / td><td>500< /td><td>600< /td>< / tr><tr><td>700< / td><td>800< /td><td>900< /td>< / tr>< / table><hr>< /body>< /html.
INI LOH HASIL LISTINGNYAA..
KAKAK>_<
Tabel HTML dimulai dengan tag table.Tabel baris mulai dengan tag tr.Tabel data mulai dengan tag td.
Kolom 1:
100
1 baris dan 3 kolom:
100 200 300
3 baris dan 3 kolom:
100 200 300400 500 600700 800 900
Setelah mengetahui cara membuat tabel sederhana, ada baiknya jika kita
lebih dahulu mengenal tag
HTML pada tabel agar lebih mudah
dalam penerapannya.
SELANJUTNYA AKAN
KUPERLIHATKAN TAG TABEL HTML !!!
Tag Keterangan
<table> Mendefinisikan tabel<th> Mendefinisikan sel header tabel<tr> Mendefinisikan baris dalam tabel<caption> Mendefinisikan judul tabel<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam
sebuah tabel untuk memformat
<col> Menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup>
<thead> Grub isi header dalam sebuah tabel <tbody> Grub isi tubuh dalam sebuah tabel<tfoot> Grub konten footer dalam sebuah tabel<td> Mendefinisikan sel dalam sebuah tabel
BERIKUT ADALAH TAG TABEL PADA HTML
SETELAH KITA MENGETAHUI TAG TABEL HTML SEKARANG KITA AKAN MEMBUAT TABEL DENGAN SPANNING. BERIKUT ADALAH CONTOHNYA!!
< ! DOCTYPE html ><html><title>Tabel dengan Border 1< /title><body><TABLE booder = `1’Ringkasan = ‘Tabel ini memberikan beberapa statistik tentang buahLalat : rata-rata tinggi dan berat badan, dan presentaseDengan mata merah (untuk laki-laki dan perempuan0 . `><CAPTION><EM> Sebuah tabel percobaan dengan sel gabungan < /EM>< /CAPTION><TR><TH rowspan=` 2 ‘ > < /TH><TH colspan=` 2 ‘ > Rata-rata< /TH><Th rowspan=` 2 ‘ > mata red <BR>< /TH>< /TR><TR><TH> Berat Tinggi< /TH>< /TR>
<TR><TH> Pria </TH><TD> 1 . 9 < /TD><TD> 0 , 003 < /TD><TD> 40 %< /TD>< /TR><TR><TH> Wanita < /TH><TD> 1 , 7 < /TD><TD> 0 , 002 < /TD><TD> 43%< /TD>< /TR>< /TABLE>< /body>< /html>
HASIL
PriaWanita
Rata-rataBerat Tinggi
1 . 9
1 , 7
0 ,003
0 ,002
Mata Red
40%
43%
LISTING TABEL DENGAN BORDER < ! DOCTYPE>
<html><title>Tabel dengan Border 2< /tittle><body><table border=“ 1 “ style=“widht : 300px”><tr><td>Ahmad< /td><td>Doni< /td><td>50< /td>< /tr><tr><td>Alex< /td><td>Jackson< /td><td>94< /td>< /tr><tr><td>Joni< /td><td>Dio< /td><td>80< /td>< /tr>< table>< /body>< /html>
Untuk memperjelas pembatasan dalam tabel (border) tidak dapat dilakukan secara otomatis. Diperlukan memasukkan perintah khusus (border tabel).
HASILNYA SEPERTI BERIKUT Ahmad
Alex
Joni
Doni
Jackson
Dio
50
94
80
Ok next listing ke 3 dan ke 4,
MAAF membosankan
Bung!!!
LISTING TABEL DENGAN SPANNING
STYLE BORDER
< ! DOCTYPE html><html><head>< /head><body><table><tr><th><span style=‘border : 1px solid black; ` >Bulan< /span>< / th><th><span style=‘border : 1px solid black; ` >Penghasilan< /span>< /th>< / tr><tr><td><span style=‘border : 1px solid black; ’ >Januari< /span>< / td><td><span style=‘border : 1px solid black; ’ >Rp100< /span>< / td>< / tr><tr><td><span style=‘border : 1px solid black; ` >Februari< / span>< / td><td><span style=‘border : 1px solid black; ` >rp100< / span>< / td>< / tr><td calspan=‘ 2 ` ><span style=‘ border : 1px solid black; ` >Sum: Rp 200< / span>< / td>< / tr>< /table>< /body>< /html>
HASIL LISTINGNYA Bulan
Januari
Februari
Sum: Rp 200
PenghasilanRp100
Rp100
LISTING TABEL
DENGAN PADDING
< ! DOCTYPE html><html><head><style>Table, th, td{border-collapse : collapse ;border : 1px solid black ;}Th, td{Padding : 15px ;
}< / style>< / head><body><table style=“width : 300px”><tr><td>Ali< /td><td>Hasan< /td><td>50< /td>< /tr><tr><td>Lutfi< /td><td>Hermas< /td><td>94< /td.< /tr><tr><td>Andri< /td><<td>Riri< /td><td>80< /td>< /tr>< /table><p>coba ubah padding mejadi 5px. < /p>< /body>< /html>
BERIKUT HASILNYA
Ali
Lutfi
Andri
Hasan
Hermas
Riri
50
94
80
Coba ubah padding mejadi 5px.
KELOMPOK 2ANA DWI ASTUTI
NUR ADILA PUSPITA ARSYAD
ANGGUN DESY SRI S.MUH. ALI ADZAN FAJAR
M.I.