Zawartość
- Utwórz tabelę w HTML
- Krok 1
- Krok 2
- Krok 3
- Krok 4
- Krok 5
- Dostosuj kalendarz
- Krok 1
- Krok 2
- thead calendar {
- Krok 3
- kalendarz,
- kalendarz td {
- Krok 4
- td span calendar {
Chociaż tabele wypadły z łask, jeśli chodzi o tworzenie układów stron internetowych, nadal dobrze sprawdzają się przy kodowaniu kalendarzy HTML. Kalendarze wyświetlają dane tabelaryczne w sposób zorganizowany w siatkę dat z nazwami kolumn, na przykład dni tygodnia. Dodatkowy kod CSS sprawi, że żmudna siatka z nazwami i numerami będzie bardziej przypominała kalendarz. Ponieważ wydarzenia w kalendarzu wymagają miejsca, zarówno na liczbę dat, jak i na wydarzenia, konieczne będzie również użycie CSS do sformatowania dat w sposób zapewniający czytelność obu informacji.
Utwórz tabelę w HTML
Krok 1
Utwórz tabelę, aby uporządkować kalendarz. Ta tabela wymaga nagłówka z siedmioma komórkami, po jednej na każdy dzień tygodnia. Konieczne jest również utworzenie sześciu wierszy zwykłych komórek tabeli. Skopiuj i wklej fragment na stronę internetową za pomocą Notatnika lub edytora kodu.
| niedziela | poniedziałek | wtorek | środa | czwartek | piątek | sobota |
|---|
Ten kod utworzy tabelę i tytuł. Tabela używa nazwy identyfikacyjnej zwanej „kalendarzem” w przypadku, gdy witryna korzysta z tabel na innych stronach.
Krok 2
Dodaj parę tagów body poniżej tagu „”:
Krok 3
Skopiuj poniższy kod i wklej go między „
" sześć razy:Ten kod utworzy każdy wiersz z siedmioma komórkami, dzięki czemu po dodaniu sześciu z nich kalendarz będzie zawierał wszystkie potrzebne miejsca na dane dla wszystkich miesięcy w roku.
Krok 4
Dodaj daty do kalendarza według miesiąca, który chcesz pokazać. Zajrzyj do prawdziwego kalendarza i uważaj, aby nie pominąć ani nie powtórzyć daty. Umieść każdą datę tagami „”, aby później dostosować liczby:
Krok 5
Zwróć uwagę na wydarzenia w komórkach, które zawierają odpowiednie daty. Zdarzenia muszą znajdować się poza tagami „”, ale wewnątrz „
’:
Impreza halloween'owa!
Ostatni dzień rejestracji.
Dostosuj kalendarz
Krok 1
Zlokalizuj „
Kontur jest opcjonalny, ale jest to najwłaściwszy sposób dodawania obramowań do tabel na bieżących stronach internetowych.
Krok 2
Dostosuj tytuł tabeli, dodając kolor liter i inny kolor tła:
thead calendar {
kolor: #ffffff; background-color: ciemnoniebieski; font-weight: pogrubienie; }
Możliwe jest użycie kodu szesnastkowego lub nazwy kolorów. Ten tytuł będzie wyświetlał biały tekst na granatowym tle.
Krok 3
Wypełnienie, obramowanie, szerokość i położenie względem komórek tabeli:
kalendarz,
kalendarz td {
wypełnienie: 20px; obramowanie: 1px jednolicie czarne; szerokość: 100px; pozycja: względna; }
Względne umieszczenie umożliwia programiście umieszczanie dat w postaci liczb w rogach komórek tabeli później. Nie ustawiaj wysokości, ponieważ ograniczy to ilość tekstu, którą możesz dodać do dowolnej daty.
Krok 4
Utwórz liczby, używając wypełnienia, koloru tła i pozycji bezwzględnej:
td span calendar {
font-weight: pogrubienie; pozycja: bezwzględna; dół: 0; po prawej: 0; Blok wyświetlacza; wypełnienie: 5px; background-color: #eeeeee; }
Musisz dołączyć "display: block", aby tagi "" działały jak pola na stronie internetowej, w przeciwnym razie nie będziesz w stanie ich wypełnić. Ten przykładowy kod tworzy wyblakłe szare pole w lewym dolnym rogu każdej przestrzeni dat, wyświetlające numer daty.