- Codes HTML/CSS 2

Voilà un tableau très simple, vous l’avez compris <table> et </table> sont le début et la fin d’un tableau et <th></th> sont pour les ‘titres’ du tableau puis <td></td> en sont les composants (pensé à Web, lol ). <tr></tr> constituent la ligne. Puis vient ce fameux code CSS qui constitue la forme du tableau avec les lignes donc : border-collapse : collapse ; c’est que les bordures seront collées entres-elles, pour un début, pas d’espace (border = bord en français). Border : 1px solid black nous le veront plus tard, mais c’est pour indiqué une bordure de 1pixel de grosseur et en solid black (voir plus tard).
Enfin le plus important dans tout c’est d’essayer et de s’entrainer, et de refaire, et refaire, puis ça vient tout seul, et en comparant les codes et en ouvrant le dossier (page internet) vous remarqué que ceci est ceci, par rapport au code …
Pour un tableau beaucoup mieux et perfectionné utilisont du html mais surtout surtout du CSS. Voilà le code et on l’explique après :

Code:

<table>
<thead>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
</tfoot>

<tbody>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>Etats-Unis</td>
</tr>
<tr>
<td>Fabien</td>
<td>14 ans</td>
<td>France</td>
</tr>
<tr>
<td>Marie</td>
<td>18 ans</td>
<td>France</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 ans</td>
<td>Australie</td>
</tr>
<tr>
<td>Xu</td>
<td>19 ans</td>
<td>Chine</td>
</tr>
</tbody>
</table>
<style type="text/css">
caption
{
margin: auto;
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-bottom: 20px
}

table
{
margin: auto;
border: 4px outset green;
border-collapse: collapse;
}

th
{
background-color: #006600;
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td
{
border: 1px solid black;
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
}
</style>

Alors, dans le html, on à déjà tout vu, ce qui constitue le tableau sauf, thead-tfoot-tbody, thead (head = tête) c’est la première ligne en haut, tfoot(foot=pied), celle d’en bas, tbody (body = corps) c’est au milieu, le corps du tableau ce qui le constitue. Sinon dans le CSS (quand je dis dans le CSS c’est ce qu’il y a dans entre <style type="text/css"> et </style> . "Caption" est pour le titre du tableau et ces effets sont ceux en dessous de lui c'est-à-dire :

Code:

margin: auto;
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-bottom: 20px;

Margin : auto ; La marche se met automatiquement adapté pour le tableau.
Font-family : Arial, "Times New Roman ", serif ; La police de caractère, à noter on met toujours Arial en défault au début, et quand un mot a des espaces on met des guillemets, et quand plusieurs mots doivent être placés au même endroit, une virgule puis un espace puis le mot.
Fond-weight : bold ; Encore pour l’écriure du texte en bold.
Color : #009900 ; On peut utiliser soit en anglais red..soit avec un dièse devant et son hexa, numéro de code couleur adapté.
Margin-bottom : 20px ; La marge d’en bas est écarté de 20 px, enfin plûtot l’écriture est écartée.

"Table" est le tableau, ce qu’il y a en dessous de lui entre guillemets, ces effets sont pour lui. C'est-à-dire :

Code:

margin: auto;
border: 4px outset green;
border-collapse: collapse;

Margin : auto ; Marge automatique
Border : 4px outset green ; Une bordure en relief de 4 px de grosseur en vert.
Border-collapse : collapse ; Bordure collée

"th" les effets pour th (th = haut du tableau la première ligne) sont :

Code:

background-color: #006600;
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;

Background-color: #006600; Font de couleur #006600 (code couleur, je ne les connais pas par coeur )
Color : white ; Couleur du texte d’en haut en blanc.
Font-family : Arial … Comme tout à l’heure.

Et enfin "td" les lignes au milieu du tableau, le corps du tableau ont ces effets :

Code:

border: 1px solid black;
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;

Border: 1px solid black; Une bordure de 1 pixel de grosseur en solid black ( on vera qu’il existe autre que solid black comme “forme”)
Font-family : … Comme tout à l’heure.
Text-align : center ; Le texte est centré
Padding : 5px ; Marge de 5 pixels sur tout les côtés.

Voilà pour le tableau après c’est à vous d’essayer un peu pour mieux comprendre, il faut utiliser, essayer, y toucher un peu aux codes, les recopiers et tout pour bien que ça rentre. Maintenant voyons comment mettre un texte dans un carré, un encadré. Recopier ce code dans le bloc notes, comme toujours :

Code:

<p>Tout ce paragraphe est dans un encadré lorsque vous l’essaierai, car il est entouré d’une bordure de 1px en solid black, mais il est possible qu’il soit entouré d’autres formes de traits, des poitillés ..On vera ça tout à l’heure. Blabla bla bla bla bla bla bla bla. Il nous faut une marge entre les côtés des traits sinon tout le texte est collé aux traits et c’est moche, alors mettons une marge sur tout les côtés, utilisons le CSS avec padding</p>
<style type= "text/css">
P
{
Border: 2px solid black;
Padding : 5px;
}
</style>

Voilà vous avez compris.
border: none; Pas de bordures

border: 2px solid black; Bordure en traits simple noirs

border: 2px dotted green; En pointillés verts

border: 2px dashed red; Petits tirets rouges

border: 4px double maroon; Double traits en marrons

border: 4px groove teal; Relief différent

border: 4px ridge fuchsia; Relief différent

border: 3px inset black; Relief différent

border: 3px outset black; Relief différent

Voilà pour les bordures quand vous voulez en ajouter, vous avez un bon petit choix.

Vous avez dû comprendre la pluspart de ces codes, si non, refaites, réessayer, relisez …

Une image en lien ? alors il nous faut le lien + le lien image :

Code:

…Mais ya une bordure toute moche ! qui montre le lien, alors avec le CSS, qui modifie et donne les effets … Enlevons-la, copiez ce code avec celui-ci-dessus :

Code:

(+ le code

Code:

Voilà, border none qui signifie pas de bordure.

Mettre une couleur ou une image de fond, utilisons ce code :

Code:

On va tout résumer dans un grand code que je vous met ici :

Code:

<title>Web-composant</title>
<h1 align="center">GRAND TITRE CENTRE</h1>
<h2 align="left">Plus petit titre et à gauche</h2>
<h3 align="right">Plus petit encore et à droite</h3>
<br /><br />

<a href=http://web-composants.tonempire.net>Le forum Web-composant</a>

<p>Je vais faire mes courses, j’ai besoins d’une liste avec mes puces à moi.</p>

<ul>
<li>Des fruits</li>
<li>Un gel douche</li>
<li>Un gâteau au chocolat</li>
<li>De l’eau</li>
</ul>

<em>Ce texte est en italic</em><br />
<strong>Celui-ci en gras</strong></br />
<marquee>Ce texte défile, on l’avais pas vu, mais maintenant on le voit, grâce à la balise marquee </marquee></br />
<u>Ce texte est souligné, on peut l’utiliser en titre</u></br />

<p>Des personnes à l’aéroport sont perdu, on les recherche voici leur nom …</p>

<table>
<thead>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
</tfoot>

<tbody>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>Etats-Unis</td>
</tr>
<tr>
<td>Fabien</td>
<td>14 ans</td>
<td>France</td>
</tr>
<tr>
<td>Marie</td>
<td>18 ans</td>
<td>France</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 ans</td>
<td>Australie</td>
</tr>
<tr>
<td>Xu</td>
<td>19 ans</td>
<td>Chine</td>
</tr>
</tbody>
</table>
<a href="http://nos-amis-les-animaux.fr.gd"><img src=" http://www.smh.com.au/ffximage/250koala,0.jpg" /></a>
<style type="text/css"> */On indique que l’on met du code CSS */
caption
{
margin: auto;
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #FF0000;
margin-bottom: 20px
}

table
{
margin: auto;
border: 4px outset red;
border-collapse: collapse;
}

th
{
background-color: #FF0000;
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td
{
border: 1px solid black;
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
}
Body
{
Background-color: #00FF00 ;
}
ul
{
list-style-image: url("caddie.gif");
}
Img
{
Border : none ;
}
</style>

Voilà, après c’est à vous de toucher un peu, essayer …