voici un exemple qui illustre cooment donner du style a une table html
explication entre lignes css
<html>
<head>
<title>Text stylyng with css</title>
<style type="text/css">
body{
padding:100px;
font-family:helvetica;
}
h1{
color:purple;
}
span{
margin-left:100px;
}
a:link{
text-decoration:none;
color:orange;
}
a:hover{
text-decoration:underline;
color:red;
}
a:visited{
text-decoration:underline;
color:red;
}
/* le style de la table commence ici*/
/* j'attribue a la table une largeur de 650px*/
/* ensuite je lui donne une bordure fine de 1px et une couleur grise legere*/
table{
width:650px;
border:1px solid #eee;
}
/* ici je cible seulement l'entete de la table (th= table header)*/
/* je lui donne une couleur de fond orange*/
/* ensuite le padding-top :definit une espace de 2px entre le text et le bord de l'element*/
/* enfin j'attribue a l'entete une hauteur de 50px .*/
table tr th{
background-color:orange;
padding-top:5px;
height:50px;
}
/* ici le vertical-align:top signifie que le text commence en haut*/
/* par defaut il ya une espace de marge dans le th . on l'enleve pour un bon rendement*/
/* remarquez ici que le padding definit une espace entre le contenu de la colonne(td) et ses 4 bord*/
/*pour definir l'espace seulment a gauche utilisez padding-left , a droite padding-right,*/
/* au dessus padding-top et en bas padding-bottom*/
table tr td{
background-color:#eee;
vertical-align:top;
height:20px;
padding:2px;
}
/* ici je donne une action de changer de couleur lorsque la souri parcour une colonne (td)*/
table tr td:hover{
background-color:#ccc;
}
</style>
</head>
<body>
<h1 >Philemon.com <span><a href="#1">About</a> | <a href="#2">contact</a> | <a href="#3">Blog</a></span></h1>
<br>
<p style="color:#000;font-family:helvetica;">Bienvenu sur mon site web cher visiteur<br>
sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>
<h2>Program</h2>
<table>
<tr>
<th>Day1</th><th>Day2</th><th>Day3</th><th>Day4</th>
</tr>
<tr>
<td>html intro</td><td>html text</td><td>html paragraph</td><td>html tables</td>
</tr>
<tr>
<td>css3 intro</td><td>css3 text</td><td>css3 paragraph</td><td>css3 tables</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment