Gewusst wie: Erstellen Sie eine HTML-Eventkalender
Obwohl Tabellen in Ungnade fiel, wenn es um den Aufbau der gesamten Webseitenlayouts, arbeiten sie immer noch gut für Kalender in HTML zu codieren. Kalender zeigen tabellarische Daten in einer Weise, da sie in einem Raster von Datumsangaben mit benannten Spalten, z. B. die Wochentage angeordnet sind. Einige zusätzlicher CSS-Code einem langweiligen Raster mit Wochentag Namen und Nummern und stellen es eher wie ein Kalender. Da der Event-Kalender für Datumszahlen und Veranstaltungen Räume benötigen, sollten Sie auch CSS zum Formatieren von Datumsangaben in einer Weise verwenden, die beide Stücke von Informationen lesbar hält.
Anweisungen
HTML-Tabelle erstellen
1 Erstellen Sie eine Tabelle, um Ihren Kalender zu strukturieren. Diese Tabelle erfordert einen Header mit sieben Zellen, eine für jeden Tag der Woche. Sie benötigen außerdem sechs weitere Reihen von regulären Tabellenzellen. Kopieren Sie und fügen Sie diesen in Ihre Webseite mit Notepad oder einem Code-Editor:
< Tabellen-Id = "Kalender" >< Thead >
<th>Sunday</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th>
< / Thead >< / table >
Dieser Code erstellt die Tabelle und der Header. Die Tabelle verwendet den ID-Namen "Kalender" für den Fall, dass Ihre Website mithilfe von Tabellen auf anderen Seiten.
2 Fügen Sie eine Tabelle Body-Tags unterhalb des "< Thead >" Tags:
< Tbody >< / Tbody >
3 Kopieren Sie folgenden Code und fügen Sie ihn zwischen die Tags "< Tbody >" sechs Mal:
< tr >< td >< / td >< td >< / td >< td >< / td >< td >< / td >< td >< / td >< td >< / td >< td >< / td ></tr >
Dieser Code wird jede Zeile sieben Zellen, also wenn Sie sechs davon hinzufügen, Ihren Kalender alle Datum Räume muss es muss für jeden Monat des Jahres.
4 Fügen Sie Termine in Ihren Kalender je nach Monat, die, den Sie anzeigen möchten. Beziehen sich auf einen realen Kalender und achten Sie darauf, nicht zu überspringen oder wiederholen ein Datum. Wickeln Sie jedes Datum in "< span >" Markierungen, so dass Sie später die Zahlen formatieren können:
< td >< Span > 31 < / span-Element >< / td >
5 Schreiben Sie Ihre Veranstaltungen in die Zellen mit ihren relevanten Daten. Die Ereignisse müssen außerhalb der "< span >" Tags, aber innerhalb der Tags "< td >" gehen. Wenn eine Zelle mehr als ein Ereignis hinzufügen, wickeln Sie jeweils in ein paar "< p >" Tags:
< td >< Span > 31 < / Span >< p > Halloweenparty! </p >< p > Letzter Tag für die Einsendungen. </p ></td >
Stil-Kalender
6 Suchen Sie "< Style >"-Tags in den HTML-Code, oder zwischen den "< Head >" Tags hinzufügen. Schreiben Sie Ihre erste Stilregel, gezielt die gesamte Tabelle, zwischen den "< Stil >" Tags:
< Typ style = "Text/Css" >
Kalender {} border: 1px solid black;
}< / style >
Die Grenze ist optional, aber dies ist der richtige Weg zum Rahmen zu Tabellen in modernen Webseiten hinzufügen.
7 Stil Ihrer Tabellenkopf mit Schriftfarbe und Hintergrundfarbe:
Kalender-Thead {} Farbe: #ffffff;Hintergrund-Farbe: dunkelblau;Font-Weight: bold;}
Sie können entweder hexadezimal-Code oder benannten Farben. Dieser Header zeigt weißen Text auf einem marineblauen Hintergrund.
8 Polsterung, Rahmen, Breite und relative Positionierung Ihrer Tabellenzellen zu geben:
th, td {Kalender Kalender Padding: 20px;Border: 1px solid schwarz;Breite: 100px;Position: relative;}
Relative Positionierung können Sie die Datumszahlen in den Ecken der Tabellenzellen später zu platzieren. Setzen Sie Höhe, nicht, weil das wieviel Text einschränken wird Sie zu einem beliebigen Datum hinzufügen können.
9 Erstellen Sie die Zahlen mit Polsterung, eine Hintergrundfarbe und absolute Positionierung:
Kalender td Span-Element {} Font-Weight: bold;Position: absolute;unten: 0;rechts: 0;Display: block;Padding: 5px;Hintergrundfarbe: #eeeeee;}
Sie müssen einschließen "anzeigen: Block" um "< Span >" Markierungen wie Kästen auf der Web-Seite zu handeln, sonst Sie können nicht geben sie Polsterung. Dieses Codebeispiel erstellt ein leichtes graues Feld in der unteren rechten Ecke von jedem Raum Datum, Anzeige der Anzahl Datum.