4 colonnes en tableau sans tableau
© . Document créé le 19 avril 2007 , mis à jour le 1er février 2011.
On n'est jamais heureux que dans le bonheur qu'on donne. Donner, c'est recevoir. Abbé Pierre
Accueil du site > Astuces > CSS > 4 colonnes en tableau sans tableau
Tableau / CSS 2
- Personnaliser le curseur pour son site web
- Marges d’un bloc par défaut
- Changer de classe à la volée
- Centrer un bloc dans la page
- 4 colonnes en tableau sans tableau
- Contourner le code CSS avec des hacks
- Interprétation de em et ex
- Fond et image de fond (motif)
- Forcer font-weight pour IE 6
- Les propriétés CSS respectées sur PIE 2003
- Fontes Explorer, Firefox et PDA
- Dessiner un triangle en CSS
- Rappel sur le style
- Un éditeur de style
- Effets de style, filtres graphiques
L’interprétation des float/clear en CSS est parfois bien complexe à appréhender. Et s’il n’est pas trop compliqué de placer quelques float dans une page, cela devient nettement plus complexe lorsque certains clear:none dans un élément profondément enfoui destructure l’ensemble.
Une alternative est la construction de tableau sans tableau. Un ensemble de div simulant la construction d’un tableau, le tout défini par des feuilles de styles.
Voici un exemple CSS que je vous propose de tester/valider, proposant la construction d’un tableau de 4 colonnes, sans passer par les tags consacrés (table).
Vous remarquerez au passage l’utilisation des commentaires conditionnels pour Internet Explorer. En effet, ce dernier, malheureusement, est quelque peu réticent à interpréter correctement certains attributs CSS.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Table display</title>
<style type="text/css">
body, html {
margin:0;
}
div.table {
display:table;
/* Joindre les bords des cellules */
border-collapse:collapse;
/* Forcer le tableau à prendre la largeur écran */
width:100%;
border:2px solid red;
}
div.caption {
/* Ffox n'affiche pas le caption dans la table
il faut le déclarer bloc */
display:block;
/* Si déclaré bloc, lui donner la largeur des
td cumulés */
width:400%; /* 100 % x 4 colonnes */
/* Aligner le titre au centre */
text-align:center;
}
/* tbody optionnel */
div.tbody {
display:table-row-group;
}
div.tr {
display:table-row;
}
div.td {
display:table-cell;
border:1px solid red;
padding:5px;
width:24.5%;
}
div.end {
width:auto;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.table {
/* 100 % fait sortir le tableau de la fenêtre */
width:auto;
}
div.caption {
/* table-caption est reconnu/interprété par IE */
display:table-caption;
width:auto;
}
div.td {
/* table-cell ne passe pas pour IE, obligé bloc et float */
display:block;
border:thin solid blue;
float:left;
}
div.end {
/* dernière cellule */
width:auto;
float:none;
}
</style>
<![endif]-->
</head>
<body>
<div class="table">
<div class="caption">Titre du tableau</div>
<div class="tbody">
<div class="tr">
<div class="td">Première cellule</div>
<div class="td">Seconde cellule</div>
<div class="td">Troisième cellule</div>
<div class="td end">Dernière cellule</div>
</div>
</div>
</div>
</body>
</html>Comme vous pouvez le voir ici, pas de tableau déclaré en HTML. Pourtant, le résultat affiché est un tableau, qui prend toute la largeur de l’écran, avec titre et 4 colonnes.
Validé sur Firefox 2 et Internet Explorer 7.
A noter:
Plussoyez !
Les forums sont fermés.
RSS 2.0
