Indique le type de marqueur list-item
Vous allez voir dans ce cours: des tableaux simple , des tableaux plus complexes, décoration avec du CSS designe d'un site avec des tableaux
Et voila vous êtes maintenant en mesure de pouvoir créer une page Web.
Donc vous pouvez créer un site. Il ne vous reste plus grandes choses pour terminer avec les bases du langage HTML.
Dans cette partie du cours nous allons parler des tableaux qui sont des éléments très important dans la conception de sites. Je crois que tout le monde sait ce qu'est un tableau.
Un tableau est constitué de linges et de colonnes, et donc de cellules.
Pour créer un tableau en HTML nous avons besoin de trois balises principales qui sont :
Première balise: <table> </table>. C'est cette balise qui permet d'indiquer le début et
la fin d'un tableau
Cette balise est de type block, il faut la mettre en dehors d'un paragraphe.
Exemple :
Code : HTML
Exemple : Copier le code
<p>C'est un paragraphe qui se trouve avant le tableau.</p> <table>. <!-- Ici, on mettra le contenu du tableau --> </table>. <p>C'est un paragraphe qui se trouve après le tableau.</p>
puis deux importantes nouvelles balises :
* <tr> </tr> : indique le début et la fin d'une ligne du tableau.
* <td> </td> : indique le début et la fin d'une cellule.
En XHTML, on construit le tableau ligne par ligne. Dans chaque ligne (<tr>),
on indique le contenu des différentes cellules (<td>).
Par exemple, si je veux faire un tableau à deux lignes, avec 4 cellules par lignes
(donc 4 colonnes), je devrai taper ceci :
Code : HTML
Exemple : Copier le code
<table> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> </table>
Ajouter des bordures, vous connaissez déjà le code CSS qu'il faut écrire !
Code : CSS
Exemple : Copier le code
td /* Toutes les cellules des tableaux... */{
border: 1px solid black; /* ... une bordure de 1px */
}
Il existe une propriété CSS spécifique aux tableaux : border-collapse, qui signifie "coller les
bordures entre elles".
Elle peut prendre 2 valeurs :
* collapse : les bordures seront collées entre elles, c'est ce qu'on recherche.
* separate : les bordures seront dissociées (valeur par défaut)
Code : CSS
Exemple : Copier le code
table{
border-collapse: collapse; /* Les bordures du tableau seront collées */
}
td{
border: 1px solid black;
}
Maintenant que l'on a ce qu'on veut, on va ajouter la ligne d'en-tête du tableau.
Dans notre exemple, les en-têtes sont "Produit", "quantité", "prix unitaire en €" et "Total".
La ligne d'en-tête se crée aussi avec un <tr> , mais les cellules à l'intérieur
sont des <th> et non pas des <td> !!!
Code : HTML
Exemple : Copier le code
<table> <tr> <th> Produit </th> <th> Quantité </th> <th> Prix unitaire en € </th> <th>Total </th> </tr> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> </table>
Et le code CSS:
Exemple : Copier le code
td, th /* Mettre une bordure sur les td ET les th */{
border: 1px solid black;
}
Le tableau peut avoir un titre qui renseigne le visiteur sur le contenu du tableau.
La balise <caption> . Cette balise se met au début du tableau. C'est elle qui indique le
titre du tableau :
Code : HTML
Exemple : Copier le code
<table> <caption>Liste de produits</caption> <tr> <th> Produit </th> <th> Quantité </th> <th> Prix unitaire en € </th> <th>Total </th> </tr> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> </table>
Ces petits tableaux suffisent dans la plupart des cas, mais il se peut que vous ayez besoin de
tableaux plus... complexes.
Nous allons voir 2 techniques particulières :
Pour les gros tableaux, il est possible de les diviser en 3 parties :
En-tête
Corps du tableau
Pied de tableau
Pour certains tableaux, on peut avoir besoin de fusionner des cellules.
Si vous avez un très grand tableau, il faut le découper en plusieurs parties. Pour cela, il existe
des balises XHTML qui permettent de définir
les 3 parties du tableau :
L'en-tête en haut: les balises <thead></thead>
Le corps au centre: les balises <tbody></tbody>
Le pied du tableau en bas: les balises <tfoot></tfoot>
Il faut mettre les balises dans l'ordre suivant :
1. <thead>
2. <tfoot>
3. <tbody>
Voici donc le code à écrire pour faire le tableau en 3 parties :
Code : HTML
Exemple : Copier le code
<table> <caption>Passagers du vol 377</caption> <thead> <!-- En-tête du tableau --> <tr> <th> Produit </th> <th> Quantité </th> <th> Prix unitaire en € </th> <th>Total </th> </tr> </thead> <tfoot> <!-- Pied de tableau --> <tr> <td> Total </td> <td> </td> <td> </td> <td> 650</td> </tr> </tfoot> <tbody> <!-- Corps du tableau --> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> </tbody> </table>
Il n'est pas obligatoire d'utiliser ces 3 balises (thead, tbody, tfoot) sur un tableau. sauf si
votre tableau est assez gros et que vous voulez l'organiser plus clairement.
Pour les petits tableaux garder l'organisation qu'on a vu au début.
Sur des tableaux complexes, on a souvent besoin de "fusionner" des cellules entre elles.
Exemple de fusion:
Pour fusionner des cellules, on ajouter un attribut à la balise <td>.
Il existe 2 types de fusion :
* La fusion horizontale : c'est la fusion qui s'effectue horizontalement sur des colonnes.
On utilise l'attribut colspan.
* La fusion verticale de lignes : deux lignes seront groupées entre elles. La fusion
s'effectuera verticalement.
On utilisera l'attribut rowspan.
Il faut donner une valeur à l'attribut (colspan ou rowspan).
C'est le nombre de cellules à fusionner entre elles. Pour deux cellules :
On écrira donc: <td colspan="2">
On a dit que c'est la fusion qui s'effectue horizontalement sur des colonnes.
On utilise l'attribut colspan.
<td colspan="2"> FUSION DE DEUX CELLUES
On peut fusionner plus de cellules à la fois (3, 4, 5... comme vous voulez).
Code : HTML
Exemple : Copier le code
<table> <caption>Liste de produits</caption> <tr> <th> Produit </th> <th> Quantité </th> <th> Prix unitaire en € </th> <th>Total </th> </tr> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td> Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> <tr> <td colspan="3">Total</td> <td>225</td> </tr> </table>
C'est un petit peu compliqué.
Prenons notre tableau de tout à l'heur ce lui avec 6 lignes et où il y a sur la première colonne
une répétition de stylo si on veut fusionner les deux
cellules stylo qui se suivent .
Lisez bien cet exemple pour comprendre.
Code : HTML
Exemple : Copier le code
<table> <caption>Liste de produits</caption> <tr> <th> Produit </th> <th> Quantité </th> <th> Prix unitaire en € </th> <th>Total </th> </tr> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td rowspan="2">Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> <tr> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> <tr> <td> cahier</td> <td> 50</td> <td> 2,50 </td> <td>125 </td> </tr> <tr> <td rowspan="2">Stylo </td> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> <tr> <td> 50 </td> <td> 2 </td> <td> 100 </td> </tr> </table>
Et avec le CSS on peut rendre nos tableaux plus beaux...
La plupart des propriétés CSS dont nous aurons besoin vous les connaissez .
Un rappelle :
Pour modifier la bordure des cellules, on utiliser border.
Pour modifier la couleur de fond d'une cellule, on utilise background-color.
Pour modifier l'image de fond d'une cellule, on utilisera background-image
Mais on modifie aussi la taille (font-size) et la police (font-family) du texte des cellules
d'en-tête, en appliquant les propriétés aux balises <th>
On agrandit aussi le tableau tout entier (width), le centrer (margin:auto et oui le tableau est
un block).
On peut centrer le texte à l'intérieur des cellules (text-align:center), modifier les marges
intérieures des cellules (padding).
Code : CSS
Exemple : Copier le code
caption /* Titre du tableau */
{
margin: auto; /* Centre le titre du tableau */
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 150%;
color: #CC8800;
margin-bottom: 20px; /* Pour éviter que le titre ne soit collé au tableau en dessous */
}
table /* Le tableau lui-même */
{
margin: auto; /* Centré le tableau */
border: 4px outset blue; /* Bordure du tableau avec effet 3D (outset) */
border-collapse: collapse; /* Colle les bordures entre elles */
}
th /* Les cellules d'en-tête */
{
background-color: #000066;
color: white;
font-size: 1.2em;
font-family: Arial, "Arial Black", Times, serif;
}
td /* Les cellules normales */
{
border: 1px solid black;
font-family: Times, "Times New Roman", serif;
text-align: center; /* Tous les textes des cellules seront centrés*/
padding: 5px; /* marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
Et en fin voila le desinge d'une page web avec des tableaux.
Changez le comme vous voulez ou l'utiliser comme il est vous êtes libre c'est offert en cadeau.
Code HTML à enregistrer dans le dossier mon site sous le nom que vous voulez ( page_desinge.html par
exemple)
Exemple : Copier le code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="author" content="monsite.com" lang="fr" /> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>mon site </title> </head> <body class="site"> <div class="div_principal"><!--ce div contient toute la page--> <table class="tableau_haut" cellspacing="0"> <tbody><tr><!-- un tableau pour l'entete de la page--> <td class="haut_1"> <a href="index.php"><img src="images/banniere.png" alt="banniére" border="0"/></a> </td> <td class="haut_2"> <h1 class="entete1">Apprendre le code du designe avec des tableaux</h1> </td> </tr> </tbody> </table> <div class="menu"><!-- un div pour le menu--> <a href="index.php" class="menu" title="Aller à l'accueil">Accueil</a> <span class="separateur_menu">|</span> <a href="" class="menu">news</a> <span class="separateur_menu">|</span> <a href="" class="menu">Forum</a> <span class="separateur_menu">|</span> <a href="" class="menu">autre menu</a> <span class="separateur_menu">|</span> <a href="" class="menu">A Propos</a> </div> <table class="tableau_principal" cellspacing="0"><!-- un tableau pour le corps--> <tr> <td rowspan="3"class="principal_1"><!-- espace pour la publicité--> (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) (!-- ici vous mettez la publicité si vous en avez --) </td> <td class="principal_6hg"></td> <td class="principal_3"></td> <td class="principal_6hd"></td> </tr> <tr> <td class="principal_2"> </td> <td class="corp"> <table class="secod1"><tr><td class="secod11"> <!-- ici vous mettez ce que vous voulez --> (!-- ici vous mettez ce que vous voulez --)<br /> (!-- ici vous mettez ce que vous voulez --) (!-- ici vous mettez ce que vous voulez --)<br /> (!-- ici vous mettez ce que vous voulez --) (!-- ici vous mettez ce que vous voulez --)<br /> (!-- ici vous mettez ce que vous voulez --)<br /> (!-- ici vous mettez ce que vous voulez --) </td> <td class="secod11"><!-- ici vous mettez ce que vous voulez --> (!-- ici aussi vous mettez ce que vous voulez --) (!-- ici aussi vous mettez ce que vous voulez --) (!-- ici aussi vous mettez ce que vous voulez --) (!-- ici aussi vous mettez ce que vous voulez --) (!-- ici aussi vous mettez ce que vous voulez --)</td> </tr> <tr><td colspan="2" class="secod11"> <!-- ici vous mettez ce que vous voulez --> (!--de meme ici vous mettez ce que vous voulez --) (!-- de meme ici vous mettez ce que vous voulez --) (!-- de meme ici vous mettez ce que vous voulez --)<br /> (!-- de meme ici vous mettez ce que vous voulez --) (!-- de meme ici vous mettez ce que vous voulez --) (!-- de meme ici vous mettez ce que vous voulez --) (!-- de meme ici vous mettez ce que vous voulez --) (!-- de meme ici vous mettez ce que vous voulez --) (!-- de meme ici vous mettez ce que vous voulez --)<br /> (!-- de meme ici vous mettez ce que vous voulez --) </td> </tr> <tr><td colspan="2" class="secod11">< !-- ici vous mettez ce que vous voulez --> (!--la aussi vous mettez ce que vous voulez --)<br /> (!-- la aussi vous mettez ce que vous voulez --) (!--la aussi vous mettez ce que vous voulez --) (!-- la aussi vous mettez ce que vous voulez --) (!--la aussi vous mettez ce que vous voulez --) (!-- la aussi vous mettez ce que vous voulez --)<br /> (!--la aussi vous mettez ce que vous voulez --) (!-- la aussi vous mettez ce que vous voulez --) </td> </tr> </table> </td> <td class="principal_5"></td> </tr> <tr> <td class="principal_6bg"></td> <td class="principal_4"></td> <td class="principal_6bd"></td> </tr> </table> <div class="div_bas"> <!-- bas de page--> </div> </div> </body> </html>
Et le code CSS qui va avec à enregistrer dans le dossier mon site sous le nom "style.css" par exemple
Exemple : Copier le code
body.site{
margin:5px;
background:#6B9BBF;
text-align:left;
font:normal arial;
}
div.div_principal{
width:100%;
height:100%;
margin:auto;
padding:0px;
border:0px solid #000000;
background:#0066cc;
font:normal 11px arial;
color:#000000;
}
div.menu{
width:auto;
height:15px;
margin:05px;
padding:0px;
border:01px solid #FFFFFF;
font:bold 11px arial;
clear:both;
text-align:center;
}
table.tableau_haut{
width:100%;
height:110px;
margin:0px;
padding:0px;
border:0px;
background:url("/images1/fond.gif") repeat-x;
color:#FFFFFF;
}
td.haut_1{
width:250px;
height:90px;
padding:0px;
border:0px;
text-align:center;
vertical-align:middle;
}
td.haut_2{
width:auto;
height:auto;
padding:0px;
border:0px;
text-align:center;
vertical-align:middle;
}
table.tableau_principal{
width:100%;
height:auto;
margin:0px;
padding:0px;
border:0px;
}
td.corp{
width:auto;
height:auto;
padding:0px;
border:0px;
background:#FFFFFF;
vertical-align:top;
}
td.principal_1{
color:#FFFFFF;
width:130px;
height:auto;
padding:5px;
border:0px;
text-align: left;
vertical-align:top;
}
td.principal_2{
width:20px;
height:auto;
padding:0px;
border:1px;
background:url("../images1/bord_gauche.png")repeat-y;
}
td.principal_3{
width:auto;
height:20px;
padding:0px;
border:0px;
background:url("../images1/bord_haut.png") repeat;
}
td.principal_4{
width:auto;
height:20px;
padding:0px;
border:0px;
background:url("../images1/bord_bas.png") repeat-x;
}
td.principal_5{
width:auto;
height:20px;
padding:0px;
border:0px;
background:url("../images1/bord_droit.png") repeat-y;
}
td.principal_6hg{
width:20px;
height:20px;
padding:0px;
border:0px;
background:url("../images1/coin_haut_gauche.png") ;
}
td.principal_6hd{
width:20px;
height:20px;
padding:0px;
border:0px;
background:url("../images1/coin_haut_droit.png") ;
}
td.principal_6bg{
width:20px;
height:20px;
padding:0px;
margin:0px;
border:0px;
background:url("../images1/coin_bas_gauche.png") repeat-x;
}
td.principal_6bd{
width:20px;
height:20px;
padding:0px;
border:0px;
background:url("../images1/coin_bas_droit.png") repeat-x;
}
h1.enete{
color:#FFFFFF;
}
h2.enete1{
margin:10px;
color:#FFFFFF;
}
h2.forme{
margin:10px;
color:#0000FF;
text-align:center;
}
span.separateur_menu{
color:#FFFFFF;
}
a{
color:#0000FF;
text-decoration:none;
font-weight: bold;
}
a:hover{
color:#FF0000;
text-decoration:underline;
}
a:active{
color:#FF9900;
text-decoration:none;
}
a.menu{
color:#ccffdd;
text-decoration:none;
}
a.menu:hover{
color:#FFFF00;
text-decoration:underline;
}
a.menu:active{
color:#FFFFFF;
text-decoration:none;
}
div.div_bas{
height:90px;
margin:0px;
padding:0px;
border:0px solid #000000;
background:#0066cc;
font:normal 11px arial;
text-align:center;
color:#FFFFFF;
}
table.secod1{
width:100%;
height:auto;
margin:0px;
padding:0px;
border:1px solid #0066cc;
}
td.secod11{
width:50%;
height:auto;
margin:0px;
padding:5px;
border:1px solid #0066cc;
font:12px arial;
vertical-align:top;
}
td:first-letter /* Je veux que la première lettre de mes cellules... */{
float: left; /* Flotte à gauche */
font-size: 1.5em; /* Fasse une hauteur de 3 lignes */
font-weight: bold;
}
.font_bleu{
color: #0000FF;
}
Avant de quitter cette partie du cours je tiens à vous dire que certaines images mensionnées dans le code CSS sont manquantes exprès remplacez les par des images de votre choix à condition que la taille de l'image soit 20x20px. Ces images sert à la decoration seullement.
Par carabde 10 mars 2014chapitre précédent chapitre suivant