Scribd
Unggah
41 tayangan15 halaman

Praktik 4 - Membuat Tabel HTML

Dokumen ini menjelaskan cara membuat tabel di HTML, termasuk tag yang digunakan seperti <table>, <tr>, dan <td>, serta atribut untuk mengatur tampilan tabel seperti border, cellpadding, dan bgcolor. Selain itu, dokumen juga membahas cara menggabungkan sel dengan atribut colspan dan rowspan, serta menyisipkan elemen lain ke dalam sel. Praktik dan tugas terkait pembuatan tabel juga disertakan untuk memperdalam pemahaman.

Diunggah oleh

muktiwidodo41
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
41 tayangan15 halaman

Praktik 4 - Membuat Tabel HTML

Dokumen ini menjelaskan cara membuat tabel di HTML, termasuk tag yang digunakan seperti <table>, <tr>, dan <td>, serta atribut untuk mengatur tampilan tabel seperti border, cellpadding, dan bgcolor. Selain itu, dokumen juga membahas cara menggabungkan sel dengan atribut colspan dan rowspan, serta menyisipkan elemen lain ke dalam sel. Praktik dan tugas terkait pembuatan tabel juga disertakan untuk memperdalam pemahaman.

Diunggah oleh

muktiwidodo41
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

Membuat Link untuk Menghubungkan Halaman Web

Membuat Tabel di HTML


Tabel menjadi bagian tak terpisahkan dalam kehidupan sehari-hari; mulai dari jadwal
kereta, laporan keuangan, sampai kalender event, semuanya sering disajikan dalam
format tabel.

Tabel terdiri dari 4 unsur utama:


1. Baris
2. Kolom
3. Sel
4. Garis

Tag untuk Membuat Tabel di HTML


Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
1. Tag <table> untuk membungkus tabelnya
2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header

Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag
yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

Untuk menambahkan garis pada tabel dengan menambahkan atribut border pada tabelnya.
Agar Tabelnya memiliki garis, silakan tambahkan atribut border="1" di dalam tag
<table>.

Mengatur Jarak Sel dengan Cellpadding


Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.
Atribut ini dapat kita berikan kepada tag <table>.

Menambahkan Warna pada Sel dan Baris


Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor
di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Menggabungkan Sel Tabel


Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:
 colspan untuk menggabungkan kolom.
 rowspan untuk menggabungkan baris;
Atribut ini bisa kita berikan kepada tag <td> atau <th>.

Colspan
Dengan atribut colspan, kita akan mengubah tabel seperti ini:
Rowspan
Sedangkan dengan atribut rowspan, kita bisa mengubah tabel seperti ini:

Gabungan Antara Rowspan dan Colspan


Berikutnya kita bisa membuat tabel yang lebih kompleks lagi dengan menggabungkan
antara rowspan dan colspan.
Sehingga tabel yang awalnya terlihat seperti ini:
Menyisipkan Elemen yang Lain ke dalam Sel
Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti
gambar, link, video, list, dsb.

Menampilkan Gambar di HTML


Menambahkan Gambar di HTML
Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>. Tag ini memiliki
atribut wajib, yakni src.
Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan.

Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag
<img> harus ditutup dengan menambahkan garis miring.
Contoh:

Praktik 4
HTML Dasar membuat tabel

praktik4.1.html – membuat tabel tanpa garis


praktik4.2.html – membuat tabel dengan garis
praktik4.3.html – Memberi Jarak Antar Sel dan Konten (padding)
praktik4.4.html – Memberi Jarak Antar Satu Sel dan Sel Lain (Cell Spacing)
Bagian Footer Table
Berikutnya kita bisa menambahkan footer pada suatu table dengan menambahkan tag
<tfoot>.
Tag <tfoot> hampir sama dengan tag <thead>, hanya saja ia ditempatkan di bagian
paling bawah.

praktik4.5.html – Footer tabel

Mengatur panjang tabel


Berikutnya kita bisa memanfaatkan atribut width untuk mengatur panjang tabel.
Kita bisa mengaturnya dengan berbagai macam satuan semisal pixel, atau juga bisa
menggunakan persentase.
Berikut ini contoh mengubah tabel dengan atribut width:
praktik4.6.html – mengatur panjang tabel
praktik4.7.html – menggabungkan sel – colspan
praktik4.8.html – menggabungkan sel – rowspan
praktik4.9.html - Gabungan Antara Rowspan dan Colspan

TUGAS 4
Buatlah tabel seperti dibawah dengan HTML
tugas1.html
(tugas2.html)
Buatlah tabel jadwal pelajaran sebagai berikut, desain bebas.

(tugas3.html)
Buatlah tabel jadwal piket kelas

Anda mungkin juga menyukai