Pertemuan 5 - Pemrograman Web

PEMROGRAMAN WEB
Total Jumlah Pertemuan: 14x (Sudah Termasuk UAS & UTS)

Topik Pertemuan 5 : Cara Membuat tabel di HTML (tag table)
Dosen: Ade Clinton Sitepu, S.Si., M.Kom.
Terakreditasi: SK BAN PT No. 413/AK/BAN-PT/Ak-PNB/PT/IX/2019

Kampus Milenial Medan: Jln. Setia Budi No. 20 Simpang Pemda. Tanjung Sari - Medan
Kampus Milenial Serdang Bedagai: Jln. Lintas Tebing Tinggi – Sei Rampah, Depan Bank BRI Kampung Pon – Sei Bamban
Program Studi: Teknik Informatika S1 – Sistem Informasi S1 – Teknik Industri S1 – Teknologi Informasi S1 – Akuntansi D3
Web: http:///milenial.itbi.ac.id
Pertemuan 5
Cara Membuat tabel di HTML (tag table)
Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Cara Membuat Tabel HTML dengan tag <table>,
<tr> dan <td>
■ Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag
<table>, tag <tr>, dan tag <td>:
■ Tag <table> digunakan untuk memulai tabel
■ Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari
tabel.
■ Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke
tabel.

Cara Membuat Tabel HTML dengan tag <table>,
<tr> dan <td>
■ Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
<!DOCTYPE html> <td>Baris 2, Kolom 2</td>
<html> <td> Baris 2, Kolom 3</td>
<head> </tr>
<title>Penggunaan Tag Tabel</title> <tr>
</head> <td> Baris 3, Kolom 1</td>
<body> <td> Baris 3, Kolom 2</td>
<h1>Belajar Tag Tabel</h1> <td> Baris 3, Kolom 3</td>
<table border="1"> Lanjut </tr>
<tr> <tr>
<td>Baris 1, Kolom 1</td> <td> Baris 4, Kolom 1</td>
</tr> </tr>
<tr> </table>
<td>Baris 2, Kolom 1</td> </body>
</html>
Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk
memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita
mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika
tidak ditambahkan, secara default tabel tidak memiliki garis tepi.
Cara Membuat Judul Tabel HTML (tag caption)
■ Tag caption berfungsi untuk membuat judul tabel di dalam HTML. Tag ini agak jarang
digunakan, namun sebenarnya sangat bermanfaat. Dengan mempelajari tag caption
ini, kita mengetahui bahwa HTML telah menyediakan tag khusus untuk membuat judul
tabel.
■ Tag caption digunakan untuk membuat judul maupun memberikan keterangan untuk
sebuah tabel HTML. Penulisan tag caption harus ditulis setelah tag pembuka tabel
(setelah tag table).
■ Kita langsung saja ke contoh penggunaan tag caption ini. Silahkan buka aplikasi text
editor, ketikkan kode berikut, dan savelah sebagai tabelcaption.html

Cara Membuat Judul Tabel HTML (tag caption)
■ Contoh penggunaan tag caption:

<!DOCTYPE html> <tr>
<html> <td>Baris 1, Kolom 1</td>
<head> Lanjut <td>Baris 1, Kolom 2</td>
<title>Cara Penulisan Tag Caption <td>Baris 1, Kolom 3</td>
Tabel HTML</title> </tr>
</head> <tr>
<body> <td>Baris 2, Kolom 1</td>
<h2>Belajar Tag caption untuk Tabel HTML</h2> <td>Baris 2, Kolom 2</td>
<table border="1"> <td>Baris 2, Kolom 3</td>
<caption>Contoh Caption Tabel</caption> </tr>
<tr> </table>
<th>Judul 1</th> </body>
<th>Judul 2</th> </html>
<th>Judul 3</th>
</tr>
Ketika dijalankan pada web browser, tag caption tersebut akan ditampilkan sebelum tabel, sehingga
cocok untuk membuat keterangan dari tabel.

Cara Mengatur dan Mengubah Lebar Tabel HTML
(atribut width)
■ Secara default bawaan HTML, setiap tabel akan diatur lebarnya secara otomatis dari
besar data yang ada didalam tabel tersebut, namun jika kita ingin ‘memaksakan’ web
browser untuk menampilkan tabel dengan lebar tertentu, kita bisa menambahkan
sebuah atribut width untuk mengatur lebar tabel.
■ Jika anda telah memahami CSS, disarankan menggunakan CSS untuk memanipulasi
tampilan dari tabel dibandingkan menggunakan atribut width secara langsung
didalam tag HTML.

(atribut width)
■ Berikut adalah contoh tabel yang memiliki perbedaan panjang untuk baris:
<head> </tr>
<title>Contoh pemakaian attribut width <tr>
dalam Tabel HTML</title> <td>Data yang sangat panjang,
</head> sehingga merusak tampilan dari tabel</td>
<h2>Belajar atribut width dalam Tabel HTML</h2> <td>Baris 2, Kolom 3</td>
<table border="1"> </tr>
<caption>------------Tabel Tanpa Atribut <tr>
Width--------------</caption> <td>Baris 3, Kolom 1</td>
<tr> Lanjut <td>Baris 3, Kolom 2</td>
<th>Judul 1</th> <td>Baris 3, Kolom 3</td>
<th>Judul 2</th> </tr>
<th>Judul 3</th> </table>
</tr> </body>
<tr> </html>
<td>Baris 1, Kolom 1</td>
Dapat dilihat bahwa web browser menampilkan tabel sesuai dengan panjang data yang terdapat
pada baris terpanjang, dan jika anda mencoba mengecilkan jendela web browser, tampilan tabel
akan bergeser menyesuaikan dengan lebar web browser. Inilah tampilan default dari tabel HTML.

(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 “memaksa” web browser menampilkan lebar tabel sesuai dengan yang
diinginkan, kita dapat menambahkan atribut width pada tag table, seperti contoh
berikut:

(atribut width)
■ Contoh penggunaan atribut width tabel HTML, tabelwidth.html
<head> </tr>
<title>Contoh pemakaian attribut width <tr>
dalam Tabel HTML</title> <td>Data yang sangat panjang,
</head> sehingga merusak tampilan dari tabel</td>
<table border="1" width="600px"> </tr>
<caption>------------Lebar Tabel <tr>
600px--------------</caption> <td>Baris 3, Kolom 1</td>
<tr> Lanjut <td>Baris 3, Kolom 2</td>
<th>Judul 1</th> <td>Baris 3, Kolom 3</td>
<th>Judul 2</th> </tr>
<th>Judul 3</th> </table>
</tr> </body>
<tr> </html>
<td>Baris 1, Kolom 1</td>
Jika anda mencoba mengubah kembali ukuran web browser, tampilan tabel akan tetap, sesuai dengan nilai dari
atribut width.

Mengatur Lebar Kolom Dengan Atribut width
■ Pada contoh tabelwidth.html sebelumnya, walaupun kita telah mengatur lebar dari
tabel, namun lebar masing-masing kolom akan ‘dibagi’ secara proporsional oleh web
browser. Untuk mengatur lebar kolom tabel secara individu, maka atribut width harus
diletakkan pada tag kolom (tag th, td, maupun tag col).
■ Namun syarat agar kita bisa mengatur lebar masing-masing kolom, lebar tabel juga
telah ditentukan terlebih dahulu melalui atribut width pada tag table.

Mengatur Lebar Kolom Dengan Atribut width
■ Berikut adalah contoh tabel yang menggunakan atribut width pada tag th.
<head> </tr>
<title>Contoh pemakaian attribut width dalam <tr>
Tabel HTML</title> <td>Data yang sangat panjang,
</head> sehingga merusak tampilan dari
<body> tabel</td>
<table border="1" width="600px"> <td>Baris 2, Kolom 3</td>
<caption>------------Lebar Tabel Lanjut </tr>
600px--------------</caption> <tr>
<tr> <td>Baris 3, Kolom 1</td>
<th width="300px">Judul 1 (width=300px)</th> <td>Baris 3, Kolom 2</td>
<th width="200px">Judul 2 (width=200px)</th> <td>Baris 3, Kolom 3</td>
<th width="100px">Judul 3 (width=100px)</th> </tr>
</tr> </table>
<tr> </body>
<td>Baris 1, Kolom 1</td> </html>
Sebagai catatan, seandainya total lebar dari seluruh kolom (atribut width pada tag th) melebihi lebar tabel (atribut
width pada tag table), maka lebar masing-masing kolom akan ‘disesuaikan’ agar tidak melebihi lebar tabel.
Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total lebar kolom tidak melebihi nilai
width tabel.
Sekian dan Terima Kasih

Pertemuan 5 - Pemrograman Web

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

Pertemuan 5 - Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB

Total Jumlah Pertemuan: 14x (Sudah Termasuk UAS & UTS)

Terakreditasi: SK BAN PT No. 413/AK/BAN-PT/Ak-PNB/PT/IX/2019

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

■ Contoh penggunaan tag caption:

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Anda mungkin juga menyukai