Scribd
Unggah
53 tayangan3 halaman

Panduan Membuat Tabel HTML Sederhana

Dokumen ini adalah jobsheet untuk mata pelajaran Pemrograman Web Dasar yang menjelaskan cara membuat tabel di HTML. Terdapat tujuan pembelajaran, dasar teori mengenai tag tabel, alat dan bahan yang diperlukan, serta langkah kerja untuk membuat tabel sederhana dan tabel nilai. Tugas akhir mencakup pembuatan tabel jadwal pelajaran dengan kriteria tertentu dan penilaian berdasarkan struktur HTML dan kreativitas.

Diunggah oleh

agungdwifadwa26052009
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 DOCX, PDF, TXT atau baca online di Scribd
53 tayangan3 halaman

Panduan Membuat Tabel HTML Sederhana

Dokumen ini adalah jobsheet untuk mata pelajaran Pemrograman Web Dasar yang menjelaskan cara membuat tabel di HTML. Terdapat tujuan pembelajaran, dasar teori mengenai tag tabel, alat dan bahan yang diperlukan, serta langkah kerja untuk membuat tabel sederhana dan tabel nilai. Tugas akhir mencakup pembuatan tabel jadwal pelajaran dengan kriteria tertentu dan penilaian berdasarkan struktur HTML dan kreativitas.

Diunggah oleh

agungdwifadwa26052009
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 DOCX, PDF, TXT atau baca online di Scribd

JOBSHEET

Mata Pelajaran : Pemrograman Web Dasar

Materi : Tag untuk Membuat Tabel di HTML

1. Tujuan Pembelajaran
1. Menjelaskan fungsi tag dasar pembuatan tabel di HTML.
2. Menggunakan atribut tabel seperti border, cellpadding, rowspan, colspan, dan bgcolor.
3. Membuat tabel sederhana sesuai instruksi.
4. Mengembangkan tabel dengan tambahan elemen HTML lain (link, gambar, dll).

2. Dasar Teori
 <table> : Membuat tabel.
 <tr> : Membuat baris tabel (table row).
 <td> : Membuat sel data (table data).
 <th> : Membuat sel judul (table header).
 <thead> : Membungkus bagian kepala tabel.
 <tbody> : Membungkus isi tabel.
 Atribut penting: border, cellpadding, bgcolor, rowspan, colspan.

3. Alat & Bahan


 Laptop/komputer dengan browser (Chrome/Firefox).
 Text editor (Notepad, VS Code, Sublime, dsb).
 File HTML kosong ([Link]).

4. Langkah Kerja
 A. Latihan 1: Membuat Tabel Sederhana

1. Buat file [Link].

2. Tulis kode berikut:

<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<table border="1" cellpadding="8">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>

3. Simpan lalu buka di browser.

 B. Latihan 2: Membuat Tabel Nilai

Tambahkan kode tabel dengan header:

<table border="1" cellpadding="8" cellspacing="0">


<thead>
<tr bgcolor="lightgrey">
<th rowspan="2">NO</th>
<th rowspan="2">Nama</th>
<th colspan="2">Nilai</th>
</tr>
<tr bgcolor="lightgrey">
<th>P. WEB</th>
<th>P. Bergerak</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Adi</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>89</td>
<td>91</td>
</tr>
<tr>
<td colspan="2" align="center"><b>Rata-rata nilai</b></td>
<td colspan="2" align="center"><b>90</b></td>
</tr>
</tbody>
</table>

 C. Latihan 3: Menambahkan Elemen Lain

Tambahkan ke halaman:

Link: <a href='[Link] target='_blank'>Belajar


HTML Table</a>

Gambar: <img src='[Link] alt='Contoh Gambar'>

5. Tugas
5. Buat tabel jadwal pelajaran menggunakan HTML dengan minimal 5 baris dan 5 kolom.
6. Gunakan rowspan dan colspan minimal satu kali.
7. Tambahkan elemen gambar/logo sekolah di atas tabel.
8. Sertakan link menuju website sekolah.

6. Penilaian
 Struktur HTML benar (20%)
 Tag tabel lengkap (20%)
 Penggunaan atribut (rowspan, colspan, dll) (20%)
 Kreativitas (warna, tambahan gambar/link) (20%)
 Kerapian kode & hasil (20%)

Anda mungkin juga menyukai