TECH-CRE Secrétariat 27|02

TECH-CRE > Secrétariat de cours

---

RE-CAP

27|02|14

HTML /Merci Nicolas !

Les tableaux

Les NEWSLETTERS fonctionnent avec des tableaux. « 

TD, TR, TH = balises de tableaux.

Pourquoi ?

Afin d’assurer la lecture des contenus car les navigateurs n’affichent pas tous les codes de la même manière.

De plus, la Newsletter … CSS intégré

Il existe des sites des plateformes comme MAILCHIMP qui offrent la possibilité d’une large palette de templates gratuits en ligne.

Comment ça marche les tableaux ?

Par ligne et par cellules :

Les lignes sont écrites <TR> et représentent la ligne dans toute sa longueur (horizontale).

Les cellules sont écrites <TD> et représentent le découpage de la ligne à la verticale.

Pour que le code soit correct, il faut commencer par annoncer la création d’un tableau <TABLE> (la refermer </TABLE>)

Débutons par un tableau simple :

<TABLE>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

</TABLE>

Application : réaliser un tableau de valeurs Héxa

<TD bgcolor = red></TD>

Exemples (Maxime et Mélina) :

Nom des couleurs	Couleurs	R	V	B	hexa
Orange		255	128	0	#	F	F	8	0	0	0
Bleu		100	200	180	#	6	4	C	8	B	4
Vert		20	250	112	#	1	4	F	A	7	0
Violet fonce		10	50	100	#	0	A	3	2	6	4
Bleu vert		12	224	136	#	0	C	E	0	8	8
Rose		240	32	108	#	F	0	2	0	6	C

Noms des couleurs :	Couleurs	R	V	B	hexa
Rouge cramoisi		160	8	8	#	A	0	0	8	0	8
Bleu marine		28	76	130	#	1	C	4	C	8	2
Jaune poussin		247	239	24	#	F	7	E	F	1	8
Rose barbie		247	24	234	#	F	7	1	8	e	a
Rose barbie		185	238	142	#	B	9	E	E	8	E

CSS intégré > Comment modifier les attributs ?

Les attributs se placent à l’intérieur de la blaise :

Border = «» épaisseur du cadre

bgcolor = «» couleur de la cellule ou de la ligne

height = …px hauteur

width = … px Largeur

align = left, right, center (align à l’intérieur du tableau).

cellpadding = «» = espace entre le bord et le contenu

cellspacing = «» = taille de la bordure entre les cellules

On peut également intervenir sur la structure du tableau (principalement pour la rendre invisible).

Exp, VOID signifie pas de cadre

<TABLE FRAME = « void » border = « 2 »>

None = aucun

Cols = entre les colonnes

Rows = entre les lignes

Alls = de partout

Changer les polices / tailles :

<td><font face=« arial » size=2>

"SPACE INVADER CONTEST"

Alors ? C'est qui le plus beau ?!

1 - Mickael C.:

SPACE INVADERS ARE BACK

2 - Mélina :

				_		_
				.		.

3 - Maxime :

4 - Juliette :

A			A
	A	A
	A	A
		o	A	A		A	A
		A	A	A		A
		A	A	A		A
	A	A	A	A	A	A

5 - Samantha :