Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
2 mai 2014 5 02 /05 /mai /2014 10:33
1. Un texte lisible
 
* des caractères pas trop petits,
* des polices de caractère .....
2. un affichage rapide Ne surchargez pas vos pages ...
3. Une bonne organisation Un article clair, pouvant ...
4. Une architecture simple
 
Vos visiteurs ne passeront pas de temps à ...
5. l'esthétique
 
L'esthétique est important ...



Vous avez vu que j'utilise assez souvent les tableaux quand je fournis des listes assez longues, avec des explications sur les éléments de la liste.

J'ai repris en haut de cet article un résumé du tableau paru dans l'article

"Les 5 règles d'Or pour construire votre site".

 


 

1. A quoi sert un tableau ?

1.1 Ranger ses informations

Mettre des informations sous forme de tableau est parfois utile si on souhaite qu'elles apparaissent clairement à nos visiteurs.
Elles sont alors "rangées" et plus faciles à lire

1.2 Avoir un visuel graphique, et pas seulement du texte

Cela permet d'avoir une représentation "graphique" et ordonnée de différents textes ou images relatifs à un même sujet.

1.3 Faire des alignements

Enfin, c'est un moyen simple de réaliser des alignements : En utilisant un tableau, vous mettez facilement 2 informations (ou 2 images) l'une à côté de l'autre, par exemple.
Dans ce cas, le tableau n'est qu'un support qui sera transparent (pas de bordure) et qui n'est utilisé que pour aligner vos données.
J'utilise ce procédé en bas de mes articles, pour aligner sur une même ligne le bouton de retour à l'index des articles et celui du vote pour l'article.


 


 

2. Construire un tableau

2.1 Balises HTML pour faire un tableau

La balise de définition d'un tableau est TABLE.

Il faudra donc "ouvrir" cette balise en début de code <table> et la refermer en fin de code
</table>


2.2 Paramétrer son tableau

la balise <th> définit la cellule d'en-tête d'un tableau
la balise <tr>sert à créer une ligne dans un tableau. Cette balise est encadrée par la balise <table>.
la balise <td>sert à créer une nouvelle cellule dans un tableau. Cette balise est encadrée par <tr>

l'argument border définit la taille de la bordure
la largeur est définie par width

 


 

3. Syntaxe complète d'un tableau

3.1 Code html

<table style="width: 300px;" border="1" align="center">
<tbody>
<tr>
<td><strong>Ligne 1 colonne 1</strong></td>
<td><strong>Ligne&nbsp;1 colonne 2</strong></td>
</tr>
<tr>
<td>Ligne 2 colonne 1</td>
<td>Ligne 2 colonne 2</td>
</tr>
</tbody>
</table>



3.2 Explications

<table Ouverture de la balise pour tableau
style="width: 300px;"largeur du tableau de 300 pixels
border="1" bordure épaisseur 1 pixel
align="center"> centrage du tableau et fermeture balise
<tr> <td><strong>Ligne 1 colonne 1</strong></td>  1ère ligne, avec texte en gras
<td><strong>Ligne&nbsp;1 colonne 2</strong></td> nouvelle cellule, donc seconde colonne
...
</table> fin du tableau



3.3 Visualisation du tableau

Ligne 1 colonne 1 Ligne 1 colonne 2
Ligne 2 colonne 1 Ligne 2 colonne 2


 



 

                               Rendez-vous sur Hellocoton !

Partager cet article

Repost 0

commentaires

Jean-Pierre 02/05/2014 16:10

Merci pour cet article, direct en marque page ! Je n'arrive jamais à me rappeller des quels vont ou, je me perds toujours entre les td et les tr et th ..

Windows Vista help now 27/03/2014 13:18

How to make a table (HTML) is very impressive and i am happy that you have taken the effort and necessary steps to share this vital updates. very good share and help for the users like me and i will visit the site again for more. good work and keep on updating.

nadia-vraie 03/03/2011 21:09



C,est très intéressant mais je ne suis pas capable avec le css.J'ai vu tous les votes en bas,je vais voter pour toi et je vais regarder tes jeux.Ton site est très intéressant.


À bientôt Aurélie.



Vanina 15/01/2011 22:26



Bonjour
Vous devriez aussi lire ce billet, qui explique comment se servir de la solution SocialCompare pour créer de jolis tableaux évolués ( avec images, vidéos,votes, notes...) et collaboratifs qu'on
inclut ensuite dans un blog:
http://blog.socialcompare.com/fr/2011/01/15/creer-et-inserer-des-tableaux-sous-blogger-overblog-canalblog-skyrock-wordpress/
Si vous aimez cet outil, n’hésitez pas a en faire un billet a part entière pour le présenter a vos lecteurs.
Merci



Jo' 04/07/2010 14:59



Super comme idée ce blog d'aide :) Merci a toi ;)



Fanfan 29/06/2010 11:48



Bonjour Aurélie,


Ton blog est une mine d'informations ; merci de nous faire partager tes connaissances.


Pour les tableaux, au hasard de ma navigation sur le Web, j'ai aussi découvert un lien très utile, qui permet de convertir des feuilles réalisées sous Excel -> lien.


Excellente journée,


Fanfan



Aurelie 29/06/2010 15:51



Merci pour cette info !!



chacha 25/06/2010 16:11



merci pour les codes des tableaux bonne journée



itachi 25/06/2010 08:46



hello!!


je viens te souhaiter un bon vendredi!


@ demain!


bises              



ema2100 24/06/2010 18:56




Bonsoir,

Excellent article merci !!!!
bon blog et bonne soirée .
ema2100



CANNELLE 24/06/2010 18:02



Merci beaucoup. Bises


Christiane



Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation