Présentation
By www.dbmwebdesign.fr
| Pour télécharger les fichiers sources de ce module, c'est par ici |
Coté HTML
Pour la création de ce tableau, le raisonnement reste similaire à celui d'une <table>, la mise en place des éléments s'effectue ligne par ligne. Chacun se verra par la suite attribué une règle CSS définissant ses dimensions et ses caractéristiques d'affichage.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
...
<link type="text/css" rel="stylesheet" href="div-tb.css">
...
</head>
<body>
...
<div id="dbm-table">
<div id="dbm-header">
<span class="header-text">Tableau en <div> avec HTML5 et CSS3</span><br>
<a href="http://dbmwebdesign.fr">By www.dbmwebdesign.fr</a></div>
<div id="tb-top">
<div class="tb-top-cell1">Source</div>
<div class="tb-top-cell">Internet Explorer</div>
<div class="tb-top-cell">Firefox</div>
<div class="tb-top-cell">Chrome</div>
<div class="tb-top-cell" style="border:none;">Safari</div>
</div>
<div id="tb-corps">
<div class="tb-left-cell">Statcounter Monde</div>
<div class="tb-right-cell">31.40%</div>
<div class="tb-right-cell">22.33%</div>
<div class="tb-right-cell">35.58%</div>
<div class="tb-right-cell">7.74%</div>
<div class="tb-left-cell">Statcounter Europe</div>
<div class="tb-right-cell">25.20%</div>
<div class="tb-right-cell">29.64%</div>
<div class="tb-right-cell">33.08%</div>
<div class="tb-right-cell">7.89%</div>
<div class="tb-left-cell">Statcounter France</div>
<div class="tb-right-cell">27.47%</div>
<div class="tb-right-cell">29.94%</div>
<div class="tb-right-cell">31.57%</div>
<div class="tb-right-cell">9.03%</div>
<div class="tb-left-cell">Net Application</div>
<div class="tb-right-cell">54.23%</div>
<div class="tb-right-cell">19.99%</div>
<div class="tb-right-cell">18.55%</div>
<div class="tb-right-cell">5.21%</div>
<div class="tb-left-cell">Akamai</div>
<div class="tb-right-cell">52.80%</div>
<div class="tb-right-cell">14.90%</div>
<div class="tb-right-cell">18.10%</div>
<div class="tb-right-cell">9.90%</div>
<div class="tb-left-cell">AT Internet Institute</div>
<div class="tb-right-cell">34.80%</div>
<div class="tb-right-cell">24.00%</div>
<div class="tb-right-cell">22.20%</div>
<div class="tb-right-cell">13.40%</div>
<div class="tb-left-cell">W3Counter</div>
<div class="tb-right-cell">27.4%</div>
<div class="tb-right-cell">22.10%</div>
<div class="tb-right-cell">29.10%</div>
<div class="tb-right-cell">14.10%</div>
<div id="tb-bottom">
<div class="bottom-cell1">Developpeur</div>
<div class="bottom-cell">Microsoft</div>
<div class="bottom-cell">Mozilla</div>
<div class="bottom-cell">Google</div>
<div class="bottom-cell" style="border:none;">Apple</div>
</div>
</div>
<div id="tb-footer">
* Les informations de ce tableau sont fictives.
</div>
</div>
...
</body>
</html>
Coté CSS :
La grande majorité des éléments sont positionnés en utilisant la propriétés "float", de ce fait une mauvaise gestion des éléments ou contenu ajouté peut avoir des conséquences visuelles désastreuses.
N'oubliez pas de reporter toutes modifications de dimensions sur les autres éléments (n'oubliez pas les valeurs des bordures).
@charset "utf-8";
/* CSS Document */
/*règles des liens textes*/
a:link { text-decoration:none; color:#FFF; }
a:visited { text-decoration:none; color:#FFF; }
a:hover { text-decoration:underline; color:#CCC; }
a:active { text-decoration:none; color:#CCC }
#dbm-table { /*conteneur du tableau*/
margin:0;
padding: 4px;
width: 578px;
font: 11px Arial, Helvetica, sans-serif;
color:black;
}
#dbm-header { /*header du tableau*/
margin:0;
padding: 14px 0 0 24px;
width: 554px;
height: 55px;
color:#FFF;
font-size:13px;
background: #0c2c65;
}
.header-text { /*titre du tableau*/
font: bold 22px Arial, Helvetica, sans-serif;
}
#tb-top { /*ligne de titre - ligne 1 */
margin:0;
padding: 0;
width: 578px;
height: 46px;
border-bottom: 1px solid #b3c1db;
background:#EEE;
}
.tb-top-cell { /*cellules de titre - ligne 1*/
float:left;
padding: 15px 0 0 0;
text-align:center;
width:105px;
height: 31px;
border-right: 1px solid #ced9ec;
color:#1f3d71;
font: 13px Arial, Helvetica, sans-serif;
}
.tb-top-cell1 { /*cellules de titre de la colonne 1 - ligne 1*/
float:left;
padding-left: 24px;
padding-top: 15px;
text-align:left;
width:129px;
height: 31px;
border-right: 1px solid #ced9ec;
color:#1f3d71;
font: 13px Arial, Helvetica, sans-serif;
}
#tb-corps { /*corps du tableau*/
margin:0;
padding: 0;
width: 578px;
}
.tb-left-cell { /*cellules de titre - colonne 1*/
float:left;
margin:0;
padding: 10px 0 0 24px;
width: 129px;
text-align: left;
height: 25px;
border-right: 1px solid #ced9ec;
border-bottom: 1px solid #b3c1db;
color:#1f3d71;
font: 13px Arial, Helvetica, sans-serif;
background:#ccc;
}
.tb-right-cell { /*cellules de données*/
float:left;
margin:0;
padding: 11px 0 0 0;
width: 105px;
text-align:center;
height: 24px;
border-right: 1px solid #ced9ec;
border-bottom: 1px solid #b3c1db;
background:#999;
}
.tb-right-cell:hover { /*rollover des cellules de données*/
background:#CA6500;
}
#tb-bottom { /*ligne de resultats - derniere ligne*/
clear:both;
margin:0;
padding: 0;
width: 578px;
height: 48px;
border-bottom:1px solid #b3c1db ;
background:#EEE;
}
.bottom-cell { /*cellules de résultats - derniere ligne*/
float:left;
padding: 15px 0 0 0;
text-align:center;
width:105px;
height: 33px;
border-right: 1px solid #ced9ec;
color:#070707;
font: 13px Arial, Helvetica, sans-serif;
}
.bottom-cell1 { /*cellules de titre de la colonne 1 - ligne 1*/
float:left;
padding-left: 24px;
padding-top: 15px;
text-align:left;
width:129px;
height: 33px;
border-right: 1px solid #ced9ec;
color:#1f3d71;
font: 13px Arial, Helvetica, sans-serif;
}
#tb-footer { /* footer du tableau*/
font-size: 10px;
color:#8a8a8a;
margin:0;
padding: 8px 0 8px 12px;
width: 566px;
background:#EEE;
}