Inhalt
- Erstellen Sie eine Tabelle in HTML
- Schritt 1
- Schritt 2
- Schritt 3
- Schritt 4
- Schritt 5
- Passen Sie den Kalender an
- Schritt 1
- Schritt 2
- Kopfkalender {
- Schritt 3
- th Kalender,
- td kalender {
- Schritt 4
- td span kalender {
Obwohl Tabellen beim Erstellen von Webseitenlayouts in Ungnade gefallen sind, eignen sie sich immer noch gut zum Codieren von HTML-Kalendern. Kalender zeigen tabellarische Daten auf eine Art und Weise an, sobald sie in einem Datumsraster mit Spalten organisiert sind, die beispielsweise mit den Wochentagen benannt sind. Zusätzlicher CSS-Code erzeugt ein langwieriges Raster mit Namen und Nummern, das eher einem Kalender ähnelt. Da die Ereignisse in einem Kalender sowohl für die Anzahl der Daten als auch für die Ereignisse Platz benötigen, muss CSS auch verwendet werden, um die Daten so zu formatieren, dass beide Informationen lesbar bleiben.
Erstellen Sie eine Tabelle in HTML
Schritt 1
Erstellen Sie eine Tabelle, um den Kalender zu strukturieren. Diese Tabelle erfordert eine Kopfzeile mit sieben Zellen, eine für jeden Wochentag. Es ist auch erforderlich, sechs Zeilen regulärer Tabellenzellen zu erstellen. Kopieren Sie den Auszug mit Hilfe von Notepad oder einem Code-Editor und fügen Sie ihn in eine Webseite ein.
Sonntag | Montag | Dienstag | Mittwoch | Donnerstag | Freitag | Samstag |
---|
Dieser Code erstellt die Tabelle und den Titel. Die Tabelle verwendet einen Identifikationsnamen namens "Kalender", falls die Website Tabellen auf anderen Seiten verwendet.
Schritt 2
Fügen Sie unter dem Tag "" ein Paar Body-Tags hinzu:
Schritt 3
Kopieren Sie den folgenden Code und fügen Sie ihn zwischen "
" sechsmal:Dieser Code erstellt jede Zeile mit sieben Zellen, sodass der Kalender durch Hinzufügen von sechs Zellen alle Datenbereiche enthält, die Sie für alle Monate des Jahres benötigen.
Schritt 4
Fügen Sie dem Kalender Daten entsprechend dem Monat hinzu, den Sie anzeigen möchten. Konsultieren Sie einen echten Kalender und achten Sie darauf, ein Datum nicht zu überspringen oder zu wiederholen. Schließen Sie jedes Datum mit den Tags "" ein, damit Sie die Zahlen später anpassen können:
Schritt 5
Beachten Sie die Ereignisse in den Zellen, die relevante Daten enthalten. Ereignisse müssen sich außerhalb der "" Tags befinden, aber innerhalb der "
’:
Halloween Party!
Letzter Tag für die Registrierung.
Passen Sie den Kalender an
Schritt 1
Suchen Sie die "
Gliederung ist optional, aber dies ist die am besten geeignete Methode, um Tabellen auf aktuellen Webseiten Rahmen hinzuzufügen.
Schritt 2
Passen Sie den Titel der Tabelle mit einer Farbe für die Buchstaben und einer anderen für den Hintergrund an:
Kopfkalender {
Farbe: #ffffff; Hintergrundfarbe: dunkelblau; Schriftdicke: fett; }}
Es ist möglich, Hexadezimalcode oder den Namen der Farben zu verwenden. Dieser Titel zeigt weißen Text auf einem dunkelblauen Hintergrund an.
Schritt 3
Füllung, Rahmen, Breite und Position relativ zu den Tabellenzellen:
th Kalender,
td kalender {
Polsterung: 20px; Rand: 1px festes Schwarz; Breite: 100px; Position: relativ; }}
Durch die relative Platzierung kann der Programmierer später Datumsangaben in Form von Zahlen in den Ecken der Tabellenzellen platzieren. Legen Sie keine Höhe fest, da dies die Anzahl der Texte einschränkt, die Sie einem Datum hinzufügen können.
Schritt 4
Erstellen Sie die Zahlen mit Füllung, Hintergrundfarbe und absoluter Positionierung:
td span kalender {
Schriftdicke: fett; Position: absolut; unten: 0; rechts: 0; Bildschirmsperre; Polsterung: 5px; Hintergrundfarbe: #eeeeee; }}
Sie müssen "display: block" einfügen, damit die Tags "" als Kästchen auf der Webseite fungieren, da Sie sie sonst nicht füllen können. Dieser Beispielcode erstellt ein schwaches graues Feld in der unteren linken Ecke jedes Datumsbereichs, in dem die Datumsnummer angezeigt wird.