Kandungan
- Buat jadual dalam HTML
- Langkah 1
- Langkah 2
- Langkah 3
- Langkah 4
- Langkah 5
- Sesuaikan kalendar
- Langkah 1
- Langkah 2
- kalendar thead {
- Langkah 3
- takwim,
- kalendar td {
- Langkah 4
- kalendar rentang td {
Walaupun jadual tidak disukai ketika membina susun atur halaman web, mereka tetap berfungsi dengan baik untuk mengekod kalendar HTML. Kalendar memaparkan data tabel dengan cara, setelah disusun dalam kisi tarikh dengan lajur bernama, misalnya, dengan hari dalam seminggu. Kod CSS tambahan akan menjadikan grid yang membosankan dengan nama dan nombor lebih seperti kalendar. Oleh kerana acara pada kalendar memerlukan ruang, baik untuk jumlah tarikh dan untuk acara tersebut, juga perlu menggunakan CSS untuk memformat tarikh dengan cara agar kedua-dua maklumat dapat dibaca.
Buat jadual dalam HTML
Langkah 1
Buat jadual untuk menyusun kalendar. Jadual ini memerlukan tajuk dengan tujuh sel, satu untuk setiap hari dalam seminggu. Anda juga perlu membuat enam baris sel jadual biasa. Salin dan tempelkan petikan ke laman web dengan bantuan Notepad atau penyunting kod.
| Ahad | Isnin | Selasa | Hari Rabu | Khamis | Jumaat | Sabtu |
|---|
Kod ini akan membuat jadual dan tajuk. Jadual menggunakan nama pengenalan yang disebut "kalendar" sekiranya laman web menggunakan jadual di halaman lain.
Langkah 2
Tambahkan sepasang teg badan di bawah teg "":
Langkah 3
Salin kod berikut dan tampal di antara "
" enam kali:Kod ini akan membuat setiap baris dengan tujuh sel, sehingga dengan menambahkan enam daripadanya, kalendar akan mempunyai semua ruang data yang anda perlukan untuk semua bulan dalam setahun.
Langkah 4
Tambahkan tarikh ke kalendar mengikut bulan yang ingin anda tunjukkan. Rujuk kalendar sebenar dan berhati-hati untuk tidak melangkau atau mengulang tarikh. Lampirkan setiap tarikh dengan tanda "" supaya anda dapat menyesuaikan nombor kemudian:
Langkah 5
Perhatikan peristiwa di sel yang mengandungi tarikh yang relevan. Acara mesti berada di luar tanda "" tetapi di dalam "
’:
Pesta Halloween!
Hari terakhir untuk pendaftaran.
Sesuaikan kalendar
Langkah 1
Cari "
Garis besar adalah pilihan, tetapi ini adalah kaedah yang paling tepat untuk menambahkan sempadan ke jadual di laman web semasa.
Langkah 2
Sesuaikan tajuk jadual dengan warna huruf dan lain untuk latar belakang:
kalendar thead {
warna: #ffffff; warna latar: darkblue; font-weight: tebal; }
Anda boleh menggunakan kod heksadesimal atau nama warnanya. Tajuk ini akan memaparkan teks putih pada latar belakang biru laut.
Langkah 3
Isi, sempadan, lebar dan kedudukan relatif dengan sel jadual:
takwim,
kalendar td {
pembalut: 20px; sempadan: 1px hitam pejal; lebar: 100px; kedudukan: saudara; }
Penempatan relatif membolehkan pengaturcara meletakkan tarikh dalam bentuk nombor di sudut sel jadual kemudian. Jangan tetapkan ketinggian, kerana ini akan mengehadkan berapa banyak teks yang dapat anda tambahkan pada tarikh apa pun.
Langkah 4
Buat nombor menggunakan isian, warna latar dan kedudukan mutlak:
kalendar rentang td {
font-weight: tebal; kedudukan: mutlak; bawah: 0; betul: 0; paparan: blok; pembalut: 5px; warna latar: #eeeeee; }
Anda mesti memasukkan "display: block" untuk menjadikan tag "" berfungsi sebagai kotak di laman web, jika tidak anda tidak dapat mengisinya. Contoh kod ini membuat kotak kelabu samar di sudut kiri bawah setiap ruang tarikh, memaparkan nombor tarikh.