Utilisation avancée des tableaux Couleur de fond

Transcription

23/01/2013
Utilisation avancée des tableaux
INF2005– Programmation web– A. Obaid
Couleur de fond
• On utilise l'attribut bgcolor.
– bgcolor=nombre|nom:
• La couleur donnée par son code hexadécimal ou son nom .
• On peut l'appliquer à la table, une ligne, une cellule ou un
en-tête.
<TITLE>Couleur de fond d'un tableau</TITLE>
<BODY>
<TABLE border="1" bgcolor="ffffcc">
<TH> Symbole <TH> Code HTML <TH> Entité HTML <TH> Nom
<TR>
<TD>£<TD>&#163;
<TD>&pound; <TD> pound
<TR>
<TD>¥ <TD>&#165;
<TD>&yen; <TD> yen
<TR>
<TD>€ <TD>&#8364;
<TD>&euro; <TD> euro
</TABLE>
CouleurTable.html
2
1
23/01/2013
Bordures
• On peut :
– spécifier la bordure du tableau (border)
– spécifier le cadres de la table (frames)
– modifier les lignes entres cellules que l'on veut tracer (rules).
• Attributs:
• border="nombre": largeur du cadre
• frame ="void|above|below|hsides| vsides|l hs| rhs "
• rules=none|rows|cols|all
<html><BODY>
<h2 align="center" > Exemple de tableau </h2>
<BODY>
<TABLE align=center frame="hsides" rules="cols">
<caption align=left> Exemple de tableau </caption>
<TR><TH> Nom </TH><TH>Test 1 (20%) </TH><TH>Test 2 (30%)</TH>
<TR><TD> Jean </TD><TD> 17 </TD><TD>25</TD>
<TR><TD> Annie </TD><TD> 14 </TD><TD>22</TD>
<TR><TD> Michel </TD><TD> 12 </TD><TD>27</TD>
</TABLE></BODY></html>
table3.html
3
Légendes
• <CAPTION> permet d'ajouter une légende à une table.
• On peut aussi spécifier sa position avec l'attribut align.
– align="top|bottom|left|right.
4
2
23/01/2013
Tableaux - Espacement
• On peut spécifier l'espacement inter-cellules et intra-cellule:
– cellspacing : espace entre cellules.
– cellpadding : espace entre le contenu d'une cellule et son bord.
<table border =1 cellpadding=20 cellspacing=20>
<td bgcolor=#B0CC99 >Cellule 1.1 <td bgcolor=#677E52>Cellule 1.2<tr>
<td bgcolor=#B7CA79 >Cellule 2.2<td bgcolor=#ff4444
>Cellule 2.2<tr>
</table>
espaTable.html
5
Étalement de lignes et colonnes
• On peut spécifier l'étalement de lignes ou de colonnes de
chaque élément (ou en-tête) de la table
• On utilise l'attribut:
– colspan =nombre: pour spécifier le nombre de colonnes.
– rowspan=nombre: pour spécifier le nombre de lignes
rowspan=3
• On peut ainsi construire des configurations complexes de
tables.
colspan=2
rowspan=2
rowspan=2
6
3
23/01/2013
<table border=1 cellpadding=5 cellspacing=5>
<td bgcolor=green rowspan=3>Cellule 1.1
<td bgcolor=grey> Cellule 1.2 <td bgcolor=blue colspan=2> Cellule 1.3<tr>
<td bgcolor=yellow> Cellule 2.2 <td bgcolor=red rowspan=2> Cellule 2.3
<td bgcolor=pink rowspan=2>Cellule 2.4<tr>
<td bgcolor=white rowspan=2> Cellule 3.2<tr>
etalTable.html
</table>
<table border=1 cellpadding=5 cellspacing=0>
<TR bgcolor=green> <TH colspan="2"> Test <TH colspan="2"> Notes
<TR bgcolor="grey"> <TH>Type <TH>Nom <TH>Note 1 <TH>Note2<TR>
<TD> Quizs (10%) <TD> Intrduction (Chap 1 - chap 4)
<TD> 4.1 <TD> 3.1
<TR>
<TD> Devoirs (20%)
<TD> Travaux de programmation
headTable.html
<TD> 8
<TD> 9.5
</table>
7
Tableaux imbriqués
• On peut placer un tableau dans le contenu d'une cellule
• On permet ainsi de construire des structures complexes
<TABLE border="0" cellspacing="20" cellpadding="20" width="200" bgcolor=green>
<TR>
<TD>
<TABLE border="1" cellspacing="0" width="100%" bgcolor=gray>
<TR align="center"><TD>1
</TABLE>
<TR>
<TD>
<TR align="center"><TD>1<TD>2<TD>3
</TABLE>
<TR>
ImbriqueTable.html
<TD>
<TR align="center"><TD>1<TD>2<TD>3<TD>4<TD>5
</TABLE>
</TABLE>
8
4
23/01/2013
Un joli cadre !
• On peut fabriquer de jolis cadres avec les tables imbriquées et
les attributs cellspacing et cellpadding.
<TABLE BGCOLOR="#990B00" BORDER="5" CELLPADDING="5" CELLSPACING="5">
<TR ALIGN="CENTER">
<TD>
<TABLE BGCOLOR="#000000" BORDER="0" CELLPADDING="10" CELLSPACING="10">
<TR ALIGN="CENTER">
<TD><IMG SRC="vache.jpg" WIDTH="127" HEIGHT="105" BORDER="0">
</TABLE>
</TABLE>
frameTable.html
9
Cellules vides
• On donner un contenu vide à une cellule:
– On utilise la largeur de cette cellule
• On peut avoir une cellule blanche:
– On peut utilise une balise dans effet imprimable (ex. <BR>)
<BODY>
<TABLE WIDTH=230 BORDER=1 BGCOLOR=#FF0000>
<TH BGCOLOR=#00FF00 COLSPAN=2 ALIGN=CENTER>
Table contenant des cellule vides ou blanches
<TR>
<TD WIDTH=115> Cellule avec texte </TD>
<TD WIDTH=115>
<TR>
<TD WIDTH=115>
<TD WIDTH=115> Cellule avec texte
<TR>
<TD WIDTH=115><BR>
<TD WIDTH=115> Cellule avec texte
</TABLE>
CellVideTable.html
10
5
23/01/2013
Backgrounds
• Il faut tenir compte du background dans la conception des
tables .
<BODY BACKGROUND="background.jpg">
<CENTER>
<TABLE WIDTH=90% BGCOLOR="#FFFFCC" CELLPADDING=20>
<TD>
<P><CENTER><FONT FACE="ARIAL"><H1>Bienvenue a ma page bizarre !</H1></CENTER>
<B> Tableau avec une couleur de fond.</B>
<P>
Un exemple de table avec une couluer de fond. Cette couleur ne va pas
necessairement avec l'image
de fond. Ce n'est pas un tres bon choix ! <P>
<HR>
<I>Conseil</I><BR>
On peut inclure le contenu de la page entiere dans la table ...!
backgroundTable.html
<P><I>Attention</I><BR>
Utilisez les bonnes valeurs de weight et width !<TR>
</TABLE>
11
Alignements
• On peut avoir des effets intéressants en ajustant les
attributs align et valign dans les cellules
– Remplacés par les styles.
alignTable.html
<TABLE BORDER="1" WIDTH="550">
<TR>
<TD>ALIGN</TD>
<TD>VALIGN=MIDDLE</TD>
<TD>VALIGN=TOP</TD>
<TD>VALIGN=BOTTOM</TD>
<TR>
<TD ALIGN=LEFT> ALIGN=LEFT <BR>Est-ce une petite fleur
<BR>dans une peau de vache<BR>ou une petite vache<BR> déguisee en fleur ?</TD>
<TD ALIGN="LEFT" VALIGN="MIDDLE"><IMG SRC="vache.jpg" width=100>
<TD ALIGN="LEFT" VALIGN="TOP"><IMG SRC="vache.jpg" width=100>
<TD ALIGN="LEFT" VALIGN="BOTTOM"><IMG SRC="vache.jpg" width=100>
</TD>
<TR>
<TD ALIGN=RIGHT> ALIGN=HIGHT <BR>Une petite fleur
<BR>dans une peau de vache<BR>Une petite vache<BR>
déguisee en fleur</TD>
<TD ALIGN="RIGHT" VALIGN="MIDDLE"><IMG SRC="vache.jpg" width=100>
<TD ALIGN="RIGHT" VALIGN="TOP"><IMG SRC="vache.jpg" width=100>
<TD ALIGN="RIGHT" VALIGN="BOTTOM"><IMG SRC="vache.jpg" width=100>
</TD>
12
6
23/01/2013
Tableaux et marges
• On peut utiliser l'attribut width avec des valeurs appropriées
de pourcentage pour avoir des marges appropriées.
– Ici, 80% centré laisse 10% de chaque coté.
<CENTER>
<h2> Impressions </h2>
<TABLE WIDTH="80%" >
<TR><TD> Une des premières choses que j’ai remarquée lors de mon arrivée à
Montréal c’est
que tout est beaucoup plus grand qu’en Europe. En France, il y a beaucoup de petites rues,
…
<P>
C’est sécurisant de savoir que je peux continuer de parler français
et que la majorité des gens me comprennent.
<P>
margeTable.html
…
</TABLE>
</CENTER>
<HR>
13
Tableaux multi-colonnes
• Avec le même outil, on peut concevoir pages multicolonnes.
<TABLE BORDER="0">
<TR>
<TD WIDTH="30%">
<b> Colonne 1</b><BR>
Avec des tables on peut faire des colonnes de texte! On sépare
ces colonnes par les colonnes vides d'une certaine (ex. 5%) (WIDTH="5%").
<TD WIDTH="5%">
<TD WIDTH="30%">
<b> Colonne 2 </b><BR> On divise les 3 colonnes selon des pourcentages
(WIDTH="30%"). On suppose que les trois colonnes sont d'egales longeuers.
<TD WIDTH="5%">
<TD WIDTH="30%">
<b>Colonne 3</b><BR>
Les separations de 10% laissent un reste de 30% pour cette
multicoltable.html
dernière colonne (WIDTH="30%"). .
</TABLE>
14
7
23/01/2013
Alignement des images
• Avec les attributs align et valign:
• align="top|bottom|middle|left|right " : spécifie
l'alignement de l' image selon le texte qui l'entoure
• vspace: espace au dessus et en bas de l'image
<h2> Histoire de la vache !</h2>
<IMG SRC="vache.jpg" HEIGHT=100 WIDTH=100 ALIGN=LEFT>
Il y avait autrefois sur les hauts plateaux de la Franche-Comté à
la lisière des sapins un petit village …
<p>
<IMG SRC="vache.jpg" HEIGHT=100 WIDTH=100 ALIGN=LEFT hspace=20>
alignImage.html
<IMG SRC="vache.jpg" HEIGHT=100 WIDTH=100 VSPACE=10 ALIGN=LEFT>
<p>
15
Tailles des images
• On peut créer un effet de perspective avec
différentes tailles de l'image.
<h2> Histoire de vaches !</h2>
<IMG SRC="vache.jpg" HEIGHT=10>
taillesImage.html
16
8

Utilisation avancée des tableaux Couleur de fond

Transcription

Documents pareils

HTML tableaux couleur HTML 32

Les principales balises Html

Le module EPG de Progdvb

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

Liste des principales balises Html

Fractionnement HTML Plugin à installer dans PhotoFiltre ou/et

La Fee Viviane

Comment insrer une image dans le forum

La maison de colonisation

Code et explications