Tables, applications suite

     Les tables permettent d'effectuer des mises en pages en colonnes comme cette page que nous allons réaliser.
    Nous avons une première table, Table 1, de 2 lignes et de 3 colonnes,
        Les 3 cellules de la première ligne sont fusionnées, vous y mettrez le titre, taille +4, Gras, Italique, centré,
        Seconde ligne,
        Cellule 1, largeur 16%
        Cellule 2, largeur 42%
        Cellule 3, largeur 42%
    Exercice,
        Réalisez cette table dans la forme ci-dessous, mettez quelque chose dans les cellules, (a,b,c), sinon elles n'apparaîtront pas, vous devez obtenir quelque chose comme ceci,

*Dolore*
a	b	c

Corrigé.

Créez dans les cellules b et c, deux autres tables de chacune trois lignes, comme dans le schéma ci-dessous,
Schématique de cette page,

    Nous aurions pu créez une table de 4 lignes et fusionner les lignes de la cellule a, mais nous allons mettre dans les cellules b et c du texte et des images. le fait d'avoir deux tables séparées permet de mettre dans ces cellules en vis à vis des contenus de hauteur différentes avec une bonne esthétiques sans ajustages compliqués.
    Les textes, à part les titres seront en taille "+1".
    Dans la cellule a, mettre un sommaire, titre et quelques éléments.
    Dans la cellule du haut de la table 2, mettre l'image "PagesExemples/images/daisy1.jpg", centrée la, dans les deux autres cellules de cette table mettre du texte, (Texte de remplissage sur lequel vous pouvez faire un copier-coller).
    Dans la cellule du milieu de la table 3 mettre l'image "PagesExemples/images/hibiscus1.jpg", centrée la, dans les deux autres cellules de cette table mettre du texte.
    Pour créer un espace entre les textes programmer l'espace entre cellule, (10 par exemple) et décaler le texte par rapport au bord de cellule pour créer un effet de paragraphe, (10 par exemple).
    Corrigé

    Pour faire mieux ressortir ce texte, nous pouvons mettre la table sur un fond comme "Textures/remous.jpg", tout en ayant le texte sur fond blanc pour une bonne lisibilité.
    Les tables ayant normalement un fond transparent par défaut, nous voyons donc le fond de la page, ici en blanc.
    Exercice, dans la forme ci-dessous,
        Changer le fond de la page en "Textures/remous.jpg"
    Corrigé, dans la forme ci-dessous
    Nous remarquons deux choses, le texte n'est plus sur un fond blanc, par contre les images le sont toujours,
        le texte n'est plus sur un fond blanc, nous voyons le fond par transparence. remède programmer une couleur de fond pour les cellules concernées.
        les images le sont toujours, nous avons vus que seules les images gif peuvent avoir une couleur de fond transparente, mais ces images sont relativement volumineuses. On peut obtenir le même effet avec un jpg, moins volumineux, si on choisit une couleur ou un motif de fond image identique à celui/celle de la page. Ici sur un fond blanc les images avait le même. Ces deux images ont été mises sur un fond remous.jpg, ce sont respectivement, "PagesExemples/images/daisy0.jpg" et "PagesExemples/images/hibiscus0.jpg". Ce procédé ne fonctionne bien que sur les fonds du genre granuleux comme remous.
    Exercice, dans la forme ci-dessous,
        Changer le nom des images,
        Programmer un fond blanc, couleur #FFFFFF, dans les cellules concernées.
    Corrigé, dans la forme ci-dessous

    Nous voyons que dans la cellule "Sommaire" le fond blanc couvre toute la cellule, alors que nous aimerions le limiter au texte. Pour obtenir cet effet, il faut englober le texte de ce sommaire dans une table, qui ne comportera qu'une seule cellule.
    Exercice,
        Créez dans la cellule sommaire, (première cellule de la deuxième ligne), une table englobant le texte.
        Déplacer le fond blanc, de la cellule englobante à cette table, dans le tag <table.
        On peut programmer un espacement entre cellule, (cellspacing), pour amincir cette colonne.
        Vous devez programmer un espacement entre le bord de cellule et le contenu.
    Corrigé, dans la forme ci-dessus

    Fioritures diverse.
    On peut créer une lettrine comme le f de la ligne précédente en englobant cette lettre dans un tag font et en donnant une taille plus grande à cette lettre.
    <font size="+3">F</font>
    Cette lettrine doit être la première lettre du texte et d'un paragraphe, car vous changez en même temps la hauteur de ligne.
    Exercice,
    Changer la première lettre, le L de Lorem, dans la cellule du haut de la table 3, en lettrine.
    On peut changer la couleur et les attributs de la lettre, gras, italique, etc...
    Vous pouvez aussi remplacer une lettre par une image, comme,

orem ou

éatificat omnès,
    Exercice,
    Remplacer le L de Lorem dans la deuxième case de la table 2 par "PagesExemples/images/L.gif".
    On peut rajouter une signature à la fin du texte, comme un monogramme,

    Exercice,
        Rajouter à la fin du texte de la dernière cellule de la table 3 l'image, "PagesExemples/images/sign.gif".
    Corrigé, dans la forme ci-dessus

	Sommaire
Précédent		Suivant