Semak ciri jadual dan susun atur tanpa teg lapuk

Tugasan web menyenaraikan ciri yang diperlukan, dan anda memperoleh markah dengan membuktikan setiap satu hadir. Kemahiran ini menggabungkan dua tabiat: menggunakan jadual untuk data sahaja, dan memindahkan penampilan daripada teg persembahan lama ke dalam CSS. Ia menutup modul pembinaan laman web kerana sebahagian besarnya tentang menyemak.

Bagaimanakah anda membina jadual?

Jadual terdiri daripada baris (tr), sel pengepala (th) dan sel data (td).

<table>
  <caption>Club timetable</caption>
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Portraits</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>Editing</td>
  </tr>
</table>

caption menamakan jadual. Sempadan, padding dan warna ditambah dengan CSS, seperti dalam pelajaran helaian gaya.

Bagaimanakah anda menyemak arahan langkah demi langkah?

1. Senaraikan setiap keperluan daripada arahan sebagai baris berasingan.
2. Cari baris kod dalam fail anda yang memenuhi setiap satu.
3. Tentukan sama ada kandungan ialah data dalam baris dan lajur; jika ya, guna jadual; jika tidak, guna elemen lain.
4. Pindahkan penampilan keluar daripada teg: warna, penjajaran dan fon berada dalam helaian gaya.
5. Buka laman dan lihat hasilnya, bukan kod sahaja.
6. Tandakan setiap baris hanya apabila anda boleh menunjukkan buktinya.

Contoh berlangkah

Arahan rekaan menyatakan: paparkan jadual waktu sebagai jadual dengan baris pengepala, beri sel pengepala latar belakang kelabu cerah, dan letakkan tajuk laman di tengah.

Langkah 1: jadual waktu mempunyai baris dan lajur data, jadi guna table, dengan sel th pada baris pertama.

Langkah 2: dalam helaian gaya, tambah:

th {
  background-color: lightgrey;
}

h1 {
  text-align: center;
}

Langkah 3: semak dengan senarai: baris pengepala ada, latar pengepala ditetapkan, tajuk di tengah. Setiap satu mempunyai baris bukti, jadi setiap satu boleh ditandakan.

Kesilapan yang perlu diawasi

Kesilapan lazim ialah bergantung pada tabiat lama daripada panduan yang sudah lapuk.

<center><font color="red">Sale</font></center>

Teg center dan font sudah lapuk, dan ia mencampurkan penampilan ke dalam kandungan. Versi kedua ialah menggunakan jadual tidak kelihatan untuk meletakkan menu di sebelah kiri laman, yang menyalahgunakan jadual. Pembetulannya ialah perenggan biasa dengan kelas, dan rupa dalam helaian gaya:

<p class="sale">Sale</p>

.sale {
  text-align: center;
  color: red;
}

Semak sendiri

1. Kandungan manakah patut berada dalam jadual: senarai harga empat item dengan harganya, atau perenggan yang menerangkan kelab?

2. Dalam jadual di atas, sel manakah th?

3. Pelajar mahu tajuk biru dan menulis <h2><font color="blue">Events</font></h2>. Berikan versi yang lebih baik.

Ke mana selepas ini

Tamatkan modul dengan set latihan pembinaan laman web, yang mencampurkan kelima-lima kemahiran. Kembali ke panduan modul jika sesuatu kemahiran terasa lemah, dan gunakan penyemak tugasan praktikal dan bukti untuk arahan anda sendiri.

Pelajar boleh membina jadual dengan betul tetapi terlepas satu baris arahan. Guru kami membantu anda menyemak setiap baris dalam tuisyen ICT dalam talian satu dengan satu.