WEB 4
TABEL
• Tabel adalah elemen yang berguna untuk menyusun data dalam
format baris dan kolom terstruktur. Ini memudahkan pembaca
untuk melihat dan menganalisis informasi. Dalam coding HTML,
tabel dibuat menggunakan tag <table>, dengan elemen-elemen
tertentu, seperti <tr> untuk baris, <td> untuk sel data,
dan <th> untuk header tabel.
• Tabel dapat digunakan untuk berbagai tujuan, mulai dari
menampilkan jadwal, daftar harga, hingga data statistik. Selain itu,
tabel juga dapat dipercantik menggunakan CSS untuk
meningkatkan tampilan dan keterbacaannya.
TABEL
Tabel bukanlah hal yang baru dalam HTML, tetapi ada beberapa tag
baru yang tersedia di HTML5. untuk menentukan tabel di HTML, kita
perlu menggunakan tag <table>. Tabel dibagi menjadi baris dengan
menggunakan tag <tr> dan kolom dengan tag <td>
TABEL
HTML menyediakan tag-tag untuk membuat tabel, yaitu:
Tag <table> : mendefinisikan sebuah tabel
Tag <tr> : mendefinisikan baris tabel
tag <th> : mendefinisikan judul kolom
Tag <td> : mendefinisikan isi kolom
Tag <thead> : megelompokan bagian kepala (header) sebuah tabel
Tag<tbody> : mengelompokkan bagian isi (body) dari sebah tabel
Tag <caption> : mendefinisikan judul atau keterangan tabel
TABEL
• Dasar Pembuatan Tabel
• Untuk membuat sebuah tabel, kita dapat menggunakan tag <table>. Setiap
baris tabel menggunakan tag <tr> dan setiap sel
menggunakan tag <td> (untuk data) atau <th> (untuk header).
<table border="1"
style="width:300px">
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
</tr>
</table>
TABEL
Menggabungkan Kolom (Colspan) dan Baris (Rowspan)
• Atribut colspan dan rowspan digunakan untuk menggabungkan beberapa
XHTML
kolom dan baris pada sebuah tabel.
<table border="1"
style="width:300px">
<tr>
<th colspan="2">Header
Tabel</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td rowspan="2">Data
Gabungan</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
</tr>
TABEL
COLSPAN dan ROWSPAN
Kita mulai dari COLSPAN. Atribut COLSPAN ini digunakan untuk
menggabung beberapa kolom.
TABEL
TABEL (clospan)
TABEL (rowspan)
Latihan
• Buatlah tampilan home page seperti dibawah ini, dengan ketentuan
• Background (latar belakang) warna kuning
• Buatlah teks “JADWAL PELAJARAN KELAS XI TJKT SMK KOMPUTAMA
MAJENANG” dengan posisi tengah, ukuran 5 dan warna biru.
• “jl. Yos Sudarso no.36A, Sindangsari, Majenang” warna merah
dengan menggunakan animasi berjalan ke kanan dan ke kiri dengan
ukuran 4.
• Buatlah sebuah garis untuk memisahkan teks judul dengan teks berikutnya
• Titik titik di bawah identitas siswa, isi dengan identitas anda masing-masing.
• Buatlah tabel dan order list seperti diawah ini
Output yang dihasilkan