Contenu
- Créer un tableau en HTML
- Étape 1
- Étape 2
- Étape 3
- Étape 4
- Étape 5
- Personnalisez le calendrier
- Étape 1
- Étape 2
- le calendrier {
- Étape 3
- calendrier,
- calendrier td {
- Étape 4
- calendrier span td {
Bien que les tableaux soient tombés en disgrâce lorsqu'il s'agit de créer des mises en page de pages Web, ils fonctionnent toujours bien pour coder des calendriers HTML. Les calendriers affichent les données tabulaires d'une certaine manière, une fois qu'ils sont organisés dans une grille de dates avec des colonnes nommées, par exemple, avec les jours de la semaine. Un code CSS supplémentaire fera une grille fastidieuse avec des noms et des nombres plus comme un calendrier. Étant donné que les événements d'un calendrier ont besoin d'espace, à la fois pour le nombre de dates et pour les événements, il sera également nécessaire d'utiliser CSS pour formater les dates de manière à ce que les deux informations soient lisibles.
Créer un tableau en HTML
Étape 1
Créez un tableau pour structurer le calendrier. Ce tableau nécessite un en-tête avec sept cellules, une pour chaque jour de la semaine. Il est également nécessaire de créer six lignes de cellules de tableau régulières. Copiez et collez l'extrait dans une page Web à l'aide du Bloc-notes ou d'un éditeur de code.
| dimanche | Lundi | Mardi | Mercredi | Jeudi | Vendredi | samedi |
|---|
Ce code créera le tableau et le titre. Le tableau utilise un nom d'identification appelé «calendrier» au cas où le site Web utilise des tableaux sur d'autres pages.
Étape 2
Ajoutez une paire de balises de corps sous la balise "":
Étape 3
Copiez le code suivant et collez-le entre le "
" six fois:Ce code créera chaque ligne avec sept cellules, de sorte qu'en ajoutant six d'entre elles, le calendrier aura tous les espaces de données dont vous avez besoin pour tous les mois de l'année.
Étape 4
Ajoutez des dates au calendrier en fonction du mois que vous souhaitez afficher. Consultez un vrai calendrier et veillez à ne pas sauter ou répéter une date. Insérez chaque date avec les balises "" pour pouvoir personnaliser les chiffres ultérieurement:
Étape 5
Notez les événements dans les cellules qui contiennent des dates pertinentes. Les événements doivent être en dehors des balises "" mais à l'intérieur du "
’:
Fête d'Halloween!
Dernier jour d'inscription.
Personnalisez le calendrier
Étape 1
Localisez le "
Le contour est facultatif, mais c'est la manière la plus appropriée d'ajouter des bordures aux tableaux sur les pages Web actuelles.
Étape 2
Personnalisez le titre du tableau avec une couleur pour les lettres et une autre pour l'arrière-plan:
le calendrier {
couleur: #ffffff; couleur de fond: bleu foncé; poids de la police: gras; }
Il est possible d'utiliser le code hexadécimal ou le nom des couleurs. Ce titre affichera du texte blanc sur un fond bleu marine.
Étape 3
Remplissage, bordures, largeur et position par rapport aux cellules du tableau:
calendrier,
calendrier td {
rembourrage: 20px; bordure: 1px noir uni; largeur: 100px; position: relative; }
Le placement relatif permet au programmeur de placer des dates sous forme de nombres dans les coins des cellules du tableau plus tard. Ne définissez pas de hauteur, car cela limitera la quantité de texte que vous pouvez ajouter à n'importe quelle date.
Étape 4
Créez les nombres en utilisant le remplissage, la couleur d'arrière-plan et le positionnement absolu:
calendrier span td {
poids de la police: gras; position: absolue; bas: 0; droite: 0; bloc de visualisation; rembourrage: 5px; couleur de fond: #eeeeee; }
Vous devez inclure "display: block" pour que les balises "" agissent comme des cases sur la page Web, sinon vous ne pourrez pas les remplir. Cet exemple de code crée une zone grise pâle dans le coin inférieur gauche de chaque espace de date, affichant le numéro de date.