Innehåll
- Skapa en tabell i HTML
- Steg 1
- Steg 2
- Steg 3
- Steg 4
- Steg 5
- Anpassa kalendern
- Steg 1
- Steg 2
- huvudkalendern {
- Steg 3
- kalendern,
- td kalender {
- Steg 4
- td span kalender {
Även om tabeller har fallit i favör när det gäller att bygga webbsidlayouter fungerar de fortfarande bra för kodning av HTML-kalendrar. Kalendrar visar tabelldata på ett sätt, när de väl är organiserade i ett rutnät med datum med kolumner med namnet till exempel veckodagarna. Extra CSS-kod kommer att göra ett tråkigt rutnät med namn och nummer mer som en kalender. Eftersom händelserna i en kalender behöver utrymme, både för antalet datum och för händelserna, kommer det också att vara nödvändigt att använda CSS för att formatera datumen på ett sätt som håller båda informationerna läsbara.
Skapa en tabell i HTML
Steg 1
Skapa en tabell för att strukturera kalendern. Denna tabell kräver en rubrik med sju celler, en för varje veckodag. Det är också nödvändigt att skapa sex rader med vanliga tabellceller. Kopiera och klistra in utdraget på en webbsida med hjälp av Anteckningar eller en kodredigerare.
| Söndag | Måndag | Tisdag | Onsdag | Torsdag | fredag | Lördag |
|---|
Den här koden skapar tabellen och titeln. Tabellen använder ett identifieringsnamn som kallas "kalender" om webbplatsen använder tabeller på andra sidor.
Steg 2
Lägg till ett par kroppstaggar under taggen "":
Steg 3
Kopiera följande kod och klistra in den mellan "
" sex gånger:Den här koden skapar varje rad med sju celler, så att genom att lägga till sex av dem kommer kalendern att ha alla datautrymmen du behöver för alla månader på året.
Steg 4
Lägg till datum i kalendern enligt den månad du vill visa. Konsultera en riktig kalender och var försiktig så att du inte hoppar över eller upprepar ett datum. Bifoga varje datum med taggarna så att du kan anpassa siffrorna senare:
Steg 5
Notera händelserna i cellerna som innehåller relevanta datum. Händelser måste vara utanför taggarna "" men inuti "
’:
Halloween-fest!
Sista dagen för registrering.
Anpassa kalendern
Steg 1
Leta upp "
Kontur är valfritt, men detta är det lämpligaste sättet att lägga till gränser i tabeller på nuvarande webbsidor.
Steg 2
Anpassa tabellens titel med en färg för bokstäverna och en annan för bakgrunden:
huvudkalendern {
färg: #ffffff; bakgrundsfärg: mörkblå; font-vikt: fet; }
Det är möjligt att använda hexadecimal kod eller namnet på färgerna. Denna titel visar vit text på en marinblå bakgrund.
Steg 3
Fyllning, ramar, bredd och position i förhållande till tabellcellerna:
kalendern,
td kalender {
stoppning: 20px; kant: 1px fast svart; bredd: 100px; position: relativ; }
Relativ placering gör det möjligt för programmeraren att placera datum i form av siffror i hörnen på bordscellerna senare. Ställ inte in en höjd, eftersom detta begränsar hur mycket text du kan lägga till valfritt datum.
Steg 4
Skapa siffrorna med fyllning, bakgrundsfärg och absolut positionering:
td span kalender {
font-vikt: fet; position: absolut; botten: 0; höger: 0; display: blockera; stoppning: 5px; bakgrundsfärg: #eeeeee; }
Du måste inkludera "display: block" för att få taggarna "" att fungera som rutor på webbsidan, annars kommer du inte att kunna fylla dem. Denna exempelkod skapar en svag grå ruta i det nedre vänstra hörnet av varje datumutrymme som visar datumnumret.