SlideShare a Scribd company logo
1 of 10
MATERI HTML
ELEMEN TABEL (TABLE)
PEMBIMBING OLEH :
DEKA M WILDAN
TAHUN PELAJARAN 2013/2014
Tabel adalah suatu kumpulan baris dan kolom terstruktur
pembentuk layout untuk menempatkan dan menata informasi
atau konten agar mudah dibaca, dipahami dan lebih rapi dalam
penyusunan dokumen web. Element TABLE befungsi untuk
membuat suatu data multidimensi yang terdiri atas kolom
dan baris. Element ini mempunyai attribute seperti align,
bgcolor, border, cellpadding (jarak antara tepi sel dengan isi
sel), cellspacing (jarak antara sel), width (lebar tabel),
height (tinggi
tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.
<table>
<caption>JUDUL TABEL</caption>
<tr>
<th>
ISI KONTEN
</th>
</tr>
<tr>
<td>
ISI KONTEN
</td>
</tr>
</table>
Sintaks:
<table
align="left"|"center"|"right“
//membuat perataan tabel
bgcolor="color“/background=“gambar” //membuat background
border="pixel“
//membuat ketebalan garis tepi
bordercolor=“color”
//memberi warna garis tepi
cellpadding="pixel“
//membuat lapisan pada garis tabel
cellspacing="pixel“
//memberi jarak pada garis tabel
width="pixel"|"%“
//membuat lebar tabel
height="pixel"|"%" >
//membuat tinggi tabel
........................
</table>
Element CAPTION berfungsi untuk membuat judul dari tabel.
Element ini harus berada di dalam element TABLE dan
mempunyai attribute align dengan nilai top (judul terletak di
atas tabel), dan bottom (judul terletak di bawah tabel).
Sintaks:
<caption align="top"|"bottom">
..........................
</caption>
Element TR mendefinisikan baris pada tabel dan element ini
harus berada di dalam element TABLE. Pada element TR terdapat
element TH dan TD. Attribute yang terdapat pada element ini
adalah align, valign (posisi ver tikal), dan bgcolor.
Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom“
bgcolor="color">
..........................
</tr>
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel
pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD
ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign,
bgcolor, colspan, rowspan
Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>
<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>
Buatlah file halaman web html dengan nama latihantabel.html dengan menggunakan
teks editor notepad, kemudian ketikkan kode seperti gambar di bawah ini :
Buatlah halaman web html dengan nama tugastabel.html menggunakan
teks editor notepad dengan hasil tampilan seperti gambar di bawah ini :

More Related Content

What's hot

Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarang
 Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarang Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarang
Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarangmohammadtomipratomo
 
169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...
169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...
169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...ruslansahropi1
 
Presentasi pkl
Presentasi pklPresentasi pkl
Presentasi pklsafitkafit
 
LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...
LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...
LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...Sutny_Wulan_Sary_Puasa
 
Laporan Prakerin Siswa SMK
Laporan Prakerin Siswa SMKLaporan Prakerin Siswa SMK
Laporan Prakerin Siswa SMKHengki Oktama
 
Contoh Interface Website yang baik
Contoh Interface Website yang baikContoh Interface Website yang baik
Contoh Interface Website yang baikLilik Maysarah
 
Analisa Website Traveloka - Makalah IMK
Analisa Website Traveloka - Makalah IMKAnalisa Website Traveloka - Makalah IMK
Analisa Website Traveloka - Makalah IMKMiftahul Muttaqin
 
2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....
2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....
2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....sekolahkitadotinfo
 
Sistem informasi-akademik-berbasis-web
Sistem informasi-akademik-berbasis-web Sistem informasi-akademik-berbasis-web
Sistem informasi-akademik-berbasis-web Moch Wirawan
 
Makalah seni rupa terapan
Makalah seni rupa terapanMakalah seni rupa terapan
Makalah seni rupa terapanWarnet Raha
 
Sistem rental motor
Sistem rental motorSistem rental motor
Sistem rental motorFerdi Daud
 
Makalah perusahaan
Makalah perusahaanMakalah perusahaan
Makalah perusahaanVinda Olshop
 
Evolusi Antarmuka Komputer
Evolusi Antarmuka KomputerEvolusi Antarmuka Komputer
Evolusi Antarmuka KomputerAndhi Pratama
 
Makalah Web Programming 1
Makalah Web Programming 1Makalah Web Programming 1
Makalah Web Programming 1Dwi Mardianti
 
Modul praktikum corel draw
Modul praktikum corel drawModul praktikum corel draw
Modul praktikum corel drawhairul anwar
 
Bab 5 pola pola hereditas kelas XII SMA IPA
Bab 5 pola pola hereditas kelas XII SMA IPABab 5 pola pola hereditas kelas XII SMA IPA
Bab 5 pola pola hereditas kelas XII SMA IPATezzara Clara Sutjipto
 
Makalah pembuatan es puter dan faktor lingkungannya
Makalah pembuatan es puter dan faktor lingkungannyaMakalah pembuatan es puter dan faktor lingkungannya
Makalah pembuatan es puter dan faktor lingkungannyaAchmad Agung Ferrianto
 
Tor PPI Belanda Goes to Campus 2014
Tor PPI Belanda Goes to Campus 2014Tor PPI Belanda Goes to Campus 2014
Tor PPI Belanda Goes to Campus 2014ppibelanda
 

What's hot (20)

Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarang
 Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarang Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarang
Proposal PKM-KC Mohammad Tomi Pratomo Politeknik Negeri Semarang
 
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
 
169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...
169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...
169974199 sistem-penjualan-tiket-pesawat-tugas-akhir-mata-kuliah-rekayasa-per...
 
Presentasi pkl
Presentasi pklPresentasi pkl
Presentasi pkl
 
LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...
LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...
LAPORAN MAGANG PRAKTEK KERJA LAPANGAN (PKL) PADA KANTOR PELAYANAN PERBENDAHAR...
 
Laporan Prakerin Siswa SMK
Laporan Prakerin Siswa SMKLaporan Prakerin Siswa SMK
Laporan Prakerin Siswa SMK
 
Contoh Interface Website yang baik
Contoh Interface Website yang baikContoh Interface Website yang baik
Contoh Interface Website yang baik
 
Analisa Website Traveloka - Makalah IMK
Analisa Website Traveloka - Makalah IMKAnalisa Website Traveloka - Makalah IMK
Analisa Website Traveloka - Makalah IMK
 
2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....
2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....
2 contoh surat lamaran hotel bahasa inggris - http://contohsurat.sekolahkita....
 
Sistem informasi-akademik-berbasis-web
Sistem informasi-akademik-berbasis-web Sistem informasi-akademik-berbasis-web
Sistem informasi-akademik-berbasis-web
 
Soal uas struktur data
Soal uas struktur dataSoal uas struktur data
Soal uas struktur data
 
Makalah seni rupa terapan
Makalah seni rupa terapanMakalah seni rupa terapan
Makalah seni rupa terapan
 
Sistem rental motor
Sistem rental motorSistem rental motor
Sistem rental motor
 
Makalah perusahaan
Makalah perusahaanMakalah perusahaan
Makalah perusahaan
 
Evolusi Antarmuka Komputer
Evolusi Antarmuka KomputerEvolusi Antarmuka Komputer
Evolusi Antarmuka Komputer
 
Makalah Web Programming 1
Makalah Web Programming 1Makalah Web Programming 1
Makalah Web Programming 1
 
Modul praktikum corel draw
Modul praktikum corel drawModul praktikum corel draw
Modul praktikum corel draw
 
Bab 5 pola pola hereditas kelas XII SMA IPA
Bab 5 pola pola hereditas kelas XII SMA IPABab 5 pola pola hereditas kelas XII SMA IPA
Bab 5 pola pola hereditas kelas XII SMA IPA
 
Makalah pembuatan es puter dan faktor lingkungannya
Makalah pembuatan es puter dan faktor lingkungannyaMakalah pembuatan es puter dan faktor lingkungannya
Makalah pembuatan es puter dan faktor lingkungannya
 
Tor PPI Belanda Goes to Campus 2014
Tor PPI Belanda Goes to Campus 2014Tor PPI Belanda Goes to Campus 2014
Tor PPI Belanda Goes to Campus 2014
 

Similar to HTML elemen tabel

Similar to HTML elemen tabel (20)

Modul HTML Lanjut
Modul HTML LanjutModul HTML Lanjut
Modul HTML Lanjut
 
Tabel HTML
Tabel HTMLTabel HTML
Tabel HTML
 
Materi3-Table & Frame Layout -SULHAN.pdf
Materi3-Table & Frame Layout -SULHAN.pdfMateri3-Table & Frame Layout -SULHAN.pdf
Materi3-Table & Frame Layout -SULHAN.pdf
 
Tabel HTML
Tabel HTMLTabel HTML
Tabel HTML
 
Format Tabel
Format TabelFormat Tabel
Format Tabel
 
Html 2
Html 2Html 2
Html 2
 
Tabel dalam html
Tabel dalam htmlTabel dalam html
Tabel dalam html
 
Pertemuan6
Pertemuan6Pertemuan6
Pertemuan6
 
Tugas Kelompok 2 - Pemrograman Web
Tugas Kelompok 2 - Pemrograman WebTugas Kelompok 2 - Pemrograman Web
Tugas Kelompok 2 - Pemrograman Web
 
WEB DESIGN PErt 4.pptx
WEB DESIGN PErt 4.pptxWEB DESIGN PErt 4.pptx
WEB DESIGN PErt 4.pptx
 
Modul Membuat Tabel pada HTML
Modul Membuat Tabel pada HTMLModul Membuat Tabel pada HTML
Modul Membuat Tabel pada HTML
 
6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
 
BAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEBBAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEB
 
Pelatihan website#1
Pelatihan website#1Pelatihan website#1
Pelatihan website#1
 
Pertemuan 05
Pertemuan 05Pertemuan 05
Pertemuan 05
 
Materi Web Statis
 Materi Web Statis Materi Web Statis
Materi Web Statis
 
Html
HtmlHtml
Html
 
Membuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepad
 
kopi
kopikopi
kopi
 

More from Deka M Wildan

Tutorial sistem informasi perpustakaan
Tutorial sistem informasi perpustakaanTutorial sistem informasi perpustakaan
Tutorial sistem informasi perpustakaanDeka M Wildan
 
Tutorial membuat system login database
Tutorial membuat system login databaseTutorial membuat system login database
Tutorial membuat system login databaseDeka M Wildan
 
Tutorial aplikasi toko online berbasis web dengan PHP
Tutorial aplikasi toko online berbasis web dengan PHPTutorial aplikasi toko online berbasis web dengan PHP
Tutorial aplikasi toko online berbasis web dengan PHPDeka M Wildan
 
Fungsi fungsi pada php - pemrograman php my sql
Fungsi fungsi pada php - pemrograman php my sqlFungsi fungsi pada php - pemrograman php my sql
Fungsi fungsi pada php - pemrograman php my sqlDeka M Wildan
 
Tutorial aplikasi bioskop berbasis web PHP
Tutorial aplikasi bioskop berbasis web PHP Tutorial aplikasi bioskop berbasis web PHP
Tutorial aplikasi bioskop berbasis web PHP Deka M Wildan
 
Project lanjutan database bioskop
Project lanjutan database bioskopProject lanjutan database bioskop
Project lanjutan database bioskopDeka M Wildan
 
Bab 2 php - Memasukkan Data
Bab 2 php  - Memasukkan DataBab 2 php  - Memasukkan Data
Bab 2 php - Memasukkan DataDeka M Wildan
 
Bab 2 php - memasukkan data ke tabel
Bab 2 php - memasukkan data ke tabelBab 2 php - memasukkan data ke tabel
Bab 2 php - memasukkan data ke tabelDeka M Wildan
 
Bab 1 php koneksi php ke mysql
Bab 1 php   koneksi php ke mysqlBab 1 php   koneksi php ke mysql
Bab 1 php koneksi php ke mysqlDeka M Wildan
 
Tutorial sistem informasi eksekutif web php
Tutorial sistem informasi eksekutif web phpTutorial sistem informasi eksekutif web php
Tutorial sistem informasi eksekutif web phpDeka M Wildan
 
Buku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascriptBuku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascriptDeka M Wildan
 
Variabel dan Operator PHP
Variabel dan Operator PHPVariabel dan Operator PHP
Variabel dan Operator PHPDeka M Wildan
 
Pemrograman visual - tipe data variabel dan operator
Pemrograman visual - tipe data variabel dan operatorPemrograman visual - tipe data variabel dan operator
Pemrograman visual - tipe data variabel dan operatorDeka M Wildan
 
Pengenalan ER-Diagram
Pengenalan ER-DiagramPengenalan ER-Diagram
Pengenalan ER-DiagramDeka M Wildan
 
Pengenalan pemrograman aplikasi visual desktop
Pengenalan pemrograman aplikasi visual desktopPengenalan pemrograman aplikasi visual desktop
Pengenalan pemrograman aplikasi visual desktopDeka M Wildan
 
Praktikum Pemrograman visual desktop
Praktikum Pemrograman visual desktopPraktikum Pemrograman visual desktop
Praktikum Pemrograman visual desktopDeka M Wildan
 
Pengantar Pemrograman WEB PHP
Pengantar Pemrograman WEB PHPPengantar Pemrograman WEB PHP
Pengantar Pemrograman WEB PHPDeka M Wildan
 
Modul Dbms mysql dan perintah dasar SQL
Modul Dbms mysql dan perintah dasar SQLModul Dbms mysql dan perintah dasar SQL
Modul Dbms mysql dan perintah dasar SQLDeka M Wildan
 
Modul basis data (database)
Modul basis data (database)Modul basis data (database)
Modul basis data (database)Deka M Wildan
 
Perintah bahasa Query (SQL)
Perintah bahasa Query (SQL)Perintah bahasa Query (SQL)
Perintah bahasa Query (SQL)Deka M Wildan
 

More from Deka M Wildan (20)

Tutorial sistem informasi perpustakaan
Tutorial sistem informasi perpustakaanTutorial sistem informasi perpustakaan
Tutorial sistem informasi perpustakaan
 
Tutorial membuat system login database
Tutorial membuat system login databaseTutorial membuat system login database
Tutorial membuat system login database
 
Tutorial aplikasi toko online berbasis web dengan PHP
Tutorial aplikasi toko online berbasis web dengan PHPTutorial aplikasi toko online berbasis web dengan PHP
Tutorial aplikasi toko online berbasis web dengan PHP
 
Fungsi fungsi pada php - pemrograman php my sql
Fungsi fungsi pada php - pemrograman php my sqlFungsi fungsi pada php - pemrograman php my sql
Fungsi fungsi pada php - pemrograman php my sql
 
Tutorial aplikasi bioskop berbasis web PHP
Tutorial aplikasi bioskop berbasis web PHP Tutorial aplikasi bioskop berbasis web PHP
Tutorial aplikasi bioskop berbasis web PHP
 
Project lanjutan database bioskop
Project lanjutan database bioskopProject lanjutan database bioskop
Project lanjutan database bioskop
 
Bab 2 php - Memasukkan Data
Bab 2 php  - Memasukkan DataBab 2 php  - Memasukkan Data
Bab 2 php - Memasukkan Data
 
Bab 2 php - memasukkan data ke tabel
Bab 2 php - memasukkan data ke tabelBab 2 php - memasukkan data ke tabel
Bab 2 php - memasukkan data ke tabel
 
Bab 1 php koneksi php ke mysql
Bab 1 php   koneksi php ke mysqlBab 1 php   koneksi php ke mysql
Bab 1 php koneksi php ke mysql
 
Tutorial sistem informasi eksekutif web php
Tutorial sistem informasi eksekutif web phpTutorial sistem informasi eksekutif web php
Tutorial sistem informasi eksekutif web php
 
Buku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascriptBuku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascript
 
Variabel dan Operator PHP
Variabel dan Operator PHPVariabel dan Operator PHP
Variabel dan Operator PHP
 
Pemrograman visual - tipe data variabel dan operator
Pemrograman visual - tipe data variabel dan operatorPemrograman visual - tipe data variabel dan operator
Pemrograman visual - tipe data variabel dan operator
 
Pengenalan ER-Diagram
Pengenalan ER-DiagramPengenalan ER-Diagram
Pengenalan ER-Diagram
 
Pengenalan pemrograman aplikasi visual desktop
Pengenalan pemrograman aplikasi visual desktopPengenalan pemrograman aplikasi visual desktop
Pengenalan pemrograman aplikasi visual desktop
 
Praktikum Pemrograman visual desktop
Praktikum Pemrograman visual desktopPraktikum Pemrograman visual desktop
Praktikum Pemrograman visual desktop
 
Pengantar Pemrograman WEB PHP
Pengantar Pemrograman WEB PHPPengantar Pemrograman WEB PHP
Pengantar Pemrograman WEB PHP
 
Modul Dbms mysql dan perintah dasar SQL
Modul Dbms mysql dan perintah dasar SQLModul Dbms mysql dan perintah dasar SQL
Modul Dbms mysql dan perintah dasar SQL
 
Modul basis data (database)
Modul basis data (database)Modul basis data (database)
Modul basis data (database)
 
Perintah bahasa Query (SQL)
Perintah bahasa Query (SQL)Perintah bahasa Query (SQL)
Perintah bahasa Query (SQL)
 

HTML elemen tabel

  • 1. MATERI HTML ELEMEN TABEL (TABLE) PEMBIMBING OLEH : DEKA M WILDAN TAHUN PELAJARAN 2013/2014
  • 2. Tabel adalah suatu kumpulan baris dan kolom terstruktur pembentuk layout untuk menempatkan dan menata informasi atau konten agar mudah dibaca, dipahami dan lebih rapi dalam penyusunan dokumen web. Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antara sel), width (lebar tabel), height (tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.
  • 4. Sintaks: <table align="left"|"center"|"right“ //membuat perataan tabel bgcolor="color“/background=“gambar” //membuat background border="pixel“ //membuat ketebalan garis tepi bordercolor=“color” //memberi warna garis tepi cellpadding="pixel“ //membuat lapisan pada garis tabel cellspacing="pixel“ //memberi jarak pada garis tabel width="pixel"|"%“ //membuat lebar tabel height="pixel"|"%" > //membuat tinggi tabel ........................ </table>
  • 5. Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top (judul terletak di atas tabel), dan bottom (judul terletak di bawah tabel). Sintaks: <caption align="top"|"bottom"> .......................... </caption>
  • 6. Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign (posisi ver tikal), dan bgcolor. Sintaks: <tr align="left"|"center"|"right" valign="top"|"middle"|"bottom“ bgcolor="color"> .......................... </tr>
  • 7. Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan Sintaks: <th align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color" colspan="number" rowspan="number"> .......................... </th> <td align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color" colspan="number" rowspan="number"> .......................... </td>
  • 8. Buatlah file halaman web html dengan nama latihantabel.html dengan menggunakan teks editor notepad, kemudian ketikkan kode seperti gambar di bawah ini :
  • 9.
  • 10. Buatlah halaman web html dengan nama tugastabel.html menggunakan teks editor notepad dengan hasil tampilan seperti gambar di bawah ini :