Module 3 - Les tableaux

Coucou !

Cette fois, ce sont les tableaux que nous allons découvrir et décortiquer

Tout d'abord, note bien dès maintenant que l'utilisation des tableaux pour une mise en page de Panneau d'accueil, de catégories, ou toute autre chose du genre est vraiment à éviter le plus possible, voir à proscrire. Mais pour réussir à les maitriser de A à Z, on va quand même s'entraîner sur une PA... Surtout garde bien en tête que ce n'est que pour l'exercice final

A la fin de ce module, tu seras capable de réaliser ceci :


Mais pas de panique ! Nous allons y aller étape par étape sous forme de petits exercices. Voici notre programme :

1. La structure en tableau : la théorie
2. Créer un tableau simple
3. Ajouter des en-têtes de colonne
4. Ajouter un titre au tableau
5. Fusionner des lignes et des colonnes
6. Fusionner plusieurs lignes & colonnes en même temps
7. Exercice final

Tu peux passer directement à l'exercice final si tu te sens à l'aise, mais tu peux aussi faire les exercices intermédiaires avant, afin de t'assurer que tu maîtrises bien le tout.


On commence dès maintenant avec la théorie : je t'invite à aller lire ce tutoriel qui regroupe tout ce que tu dois savoir sur les tableaux.


Si tu as le moindre souci avec le tutoriel ou la moindre question, n'hésite pas à poser la question dans ton sujet de copie et nous viendrons t'éclairer avant que tu n'entames les exercices

---

Si tout est OK pour toi : je t'invite à passer au message suivant avec le premier exercice intermédiaire !

Le tutoriel est clair ? Tu penses que tu as tout compris ? C'est donc parti pour les manipulations !
Si ce n'est pas clair jusqu'ici, n'hésite pas à nous le dire dans ton sujet de formation avant de continuer, nous sommes là pour répondre à toutes tes questions


On va donc créer une nouvelle page HTML, comme tu l'as vu dans les exercices précédents. On va l'appeler mon-premier-tableau.html et on va pouvoir passer aux exercices


Pour commencer, j'aimerai que tu codes un tableau "tout simple" à 4 lignes et 4 colonnes, comme ceci :

La couleur des bordures n'est pas obligatoire, elle permet simplement que tu vois mieux les choses.

A n'ouvrir que si tu es bloqué(e):

Facile ? Alors on continue : j'aimerai que tu ajoutes des en-têtes à chaque colonne, comme ceci :

A n'ouvrir que si tu es bloqué(e):

Bien ! Maintenant, j'aimerai que tu ajoutes un titre à ton tableau :

A n'ouvrir que si tu es bloqué(e):

---

Pour nous rendre l'exercice, il va falloir te rendre dans ton sujet de rendu ici, nous donner le lien de cet exercice, à savoir :

Code:

[url=https://tambouille-raleuses.forumactif.com/t1197-module-3-les-tableaux#21100]Module 3 - Manipulation 1[/url]

Ensuite, tu peux choisir de nous rendre les 3 exercices en même temps ou faire un exercice à la fois

En cas de question ou blocage, n'hésite pas à nous le dire Ce n'est pas toujours évident de se lancer ^^

Comme on manipule du code, ton rendu d'exercice est à nous fournir entre balise code

Bon courage

Ça y est, on a notre tableau "basique" : on va pouvoir le complexifier un peu ! Ben oui, sinon ça sert pas à grand chose  

Ne fais pas la suite si une question te trotte dans la tête ou si un point n'est pas clair. Viens plutôt poser tes questions dans ton sujet d'auto-formation.


Toujours sur le même tableau que précédemment, on va maintenant fusionner des lignes et des colonnes, parfois les deux en même temps. C'est parti !!


On commence par fusionner des lignes et des colonnes. J'aimerai que tu aies ce rendu :

La couleur du texte n'est pas obligatoire, elle permet simplement que tu vois mieux les choses. Mais tu peux la mettre sans souci.

A n'ouvrir que si tu es bloqué(e):

Bien ! Maintenant on mélange les deux : j'aimerai que tu fusionnes à la fois des lignes et des colonnes :

A n'ouvrir que si tu es bloqué(e):

---

Pour nous rendre l'exercice, il va falloir te rendre dans ton sujet de rendu ici, nous donner le lien de cet exercice, à savoir :

Code:

[url=https://tambouille-raleuses.forumactif.com/t1197-module-3-les-tableaux#21101]Module 3 - Manipulation 2[/url]

Ensuite, tu peux choisir de nous rendre les 2 exercices en même temps ou faire un exercice à la fois

En cas de question ou blocage, n'hésite pas à nous le dire

Comme on manipule du code, ton rendu d'exercice est à nous fournir entre balise code

Bon courage

Si tu as fait les exercices précédents, tu as tout en tête. Si tu te sens assez à l'aise sans ces exercices, tu peux passer directement à ce "tableau final" pour valider tes acquis.
Cet exercice est obligatoire pour valider le module et passer au suivant.

Ne fais pas la suite si une question te trotte dans la tête ou si un point n'est pas clair. Viens plutôt poser tes questions dans ton sujet d'auto-formation et, si tu ne les as pas encore fait, tu peux faire les exercices précédents.


On va créer une nouvelle page HTML, comme tu l'as vu dans le premier module. On va l'appeler exercice-final-tableaux.html.

  Je le redis, faire une en-tête, des catégories, un QEEL ou toute autre partie de forum ou de site en tableau est fortement déconseillé, même à proscrire ! Ici on le fait simplement pour s'exercer de manière complète sur les tableaux. Les tableaux HTML doivent servir uniquement à faire de réels tableaux, ne l'oublie pas.

Allez, on y va sur l'exercice ! Voilà un aperçu du rendu :


• la largeur globale est de 98%, et la hauteur maximale de l'en-tête est de 350 pixels
• On a un tableau avec un titre de tableau, des lignes et colonnes et des titres de colonnes.
• Les "news" et les liens de navigation sont sous forme de liste, comme nous ne les avons pas encore vues, met simplement des retours à la ligne entre chaque news ou chaque lien.
• Les images sont ici et pour cet exercice on ne va mettre que les images (pas d'effets)
• Tous les titres sont en "Comic sans ms"
• La couleur de fond générale de la PA est #A7C553
• La couleur de fond des cases est #cae385
• La couleur du texte des titres est #43570f
• La couleur des dates est #4a5c1a
• La couleur des liens est #232E05
• La couleur des bordures est : #1c2603

bon courage !!

---

Pour nous rendre l'exercice, il va falloir te rendre dans ton sujet de rendu ici, nous donner le lien de cet exercice, à savoir :

Code:

[url=https://tambouille-raleuses.forumactif.com/t1197-module-3-les-tableaux#21102]Module 3 - Exercice final[/url]

En cas de question ou blocage, n'hésite pas à nous le dire

Comme on manipule du code, ton rendu d'exercice est à nous fournir entre balise code

Bon courage