[resolu]Tableau problème bordure

Bonjour je cherche à réaliser un tableau avec cet effet de rendu :
NB : je n'arrive pas à placer la bordure de droite dans l’éditeur de texte sur le site alsacréations. Mais sachez qu'elle doit être droite et que le problème se trouve à gauche sur le petit escalier que je souhaite obtenir.

               /---------------------------------\
               |      Average      |   Red              |     
               |                       |                      |
    |-----------------------------------------|
    |  Males   | 1.9               |   40%             |
    |-----------------------------------------|
    | Females  | 1.7              |    43%            |
    \-----------------------------------------/

Problème je n'arrive pas à m'en sortir et mes compétences en css sont limitées, j'ai bien une idée qui est
1. soit de créer une div qui contient "males et females" ou
2. de mettre des classes sur les cellules en bordure pour supprimer les border et en ajouter.

Si quelqu'un a une vrai idée et plus simple je suis preneur !
Modifié par Su4p (23 Sep 2012 - 13:25)

Un genre de truc comme ça ? :

http://dabblet.com/gist/3756393

Arrêtons de diaboliser le tableau HTML Pour ton cas de figure, c'est exactement ce qu'il faut vu que tu affiches des données tabulaires.

Une fois ton tableau fait, tu joues avec le CSS pour paramétrer le style de tes différentes bordures, pas besoin de div ici.

SuperMerguez : oui et non ce que tu me montres ne pose pas de problème cependant j’essaie de ne pas afficher les bordures sur la première case en haut à gauche.

MattBPA : je suis d'accord je ne diabolise pas les tableaux quand ils servent de tableau cependant pour le moment une div c plus simple que de mettre des classes sur la plupart des td ou th de mon tableau avec un style de bordure différend à chaque fois (ou presque).

Pour ma part je ne trouve pas ça plus simple de le faire en div, vu que tu devras quand même mettre des classes. L'avantage avec le tableau HTML c'est que ton positionnement et le comportement des cellules est déjà fait.

<table>
   <tr>
       <td class="blanc">&nbsp;</td>
       <td class="haut">Average</td>
       <td class="haut">Red</td>
   </tr>
   <tr>
        <td class="gauche">Males</td>
        <td class="data">1.9</td>
        <td class="data">40%</td>
   </tr>
   <tr>
        <td class="gauche">Females</td>
        <td class="data">1.7</td>
        <td class="data">43%</td>
   </tr>
</table>

Et pour ton CSS

table { propriété }

.blanc {
   border-bottom:1px dashed #000;
   border-right:1px solid #000;
}

.haut {
   border-top:1px dashed #000;
   border-right:1px solid #000;
   border-bottom:1px dashed #000;
}

.gauche {
   border-bottom: 1px dashed #000;
   border-right: 1px solid #000;
   border-left:1px solid #000;
}

.data {
   border-bottom:1px dashed #000;
   border-right:1px solid #000;
}

Parfait merci beaucoup c'est finalement cette solution que j'ai adapté.