J'arrive pas a faire un beau tableau nikel.. (CSS inside)

J'arrive pas a faire un beau tableau nikel.. (CSS inside) - HTML/CSS - Programmation

Marsh Posté le 23-01-2003 à 10:35:23    

Yo les djeuns et les pas djeuns..
 
Heu en fait j'aimerais faire une beau tableau avec <table> qui soit tres simple tres sobre..
 
J'entend par la, plus precisement, un tableau qui ne laisse apparaitre que les arretes.. c'est a dire heu.. hop un tit dessin:
 
---------------------
|      |        |   |
---------------------
 
just avec des lignes fines qui soient toutes collés entre elles, sans espaces entre les ligne.. vous me comprenez?
 
De preference en css..
maoi j'ai fé ça :
 

Code :
  1. <table class="menu">
  2. <td class="casemenu"></td>
  3. <td class="casemenu"></td>
  4. <td class="casemenu"></td>
  5. </table>
  7. .menu
  8. {
  9. position: absolute;
  10. width: 800px;
  11. height: 27px;
  12. top: 10px;
  13. left: 50%;
  14. margin-left: -400px;
  15. border: 1px solid #CCCCCC;
  16. }
  17. .casemenu
  18. {
  19. cursor: hand;
  20. color: #FFFFFF;
  21. background-color: #000000;
  22. font-size: 13px;
  23. font-weight: bold;
  24. border: 0px solid #FFFFFF;
  25. vertical-align: middle;
  26. text-align: center;
  28. /*border-left-color: #FFFFFF;*/
  29. border-left-width: 1px;
  30. border-left-style: inset;
  32. border-left-style: solid;
  33. border-left-width: 1px;
  34. border-color: #FFFFFF;
  36. padding:0px;
  37. }


 
Mais c'est pas bo, il y a un espace entre les lignes verticales et horizontales, de plus, il y a une double ligne a gauche du menu... snif..
 
 [:pudukukilucru]


---------------
yvele n'est plus.
Reply

Marsh Posté le 23-01-2003 à 10:35:23   

Reply

Marsh Posté le 23-01-2003 à 10:49:41    

fo mettre des TR dans les tableaux!


---------------
mangez du mozilla c le futur, c votre DESTIN ! http://www.mozilla.org/releases/
Reply

Marsh Posté le 23-01-2003 à 10:56:47    

CSS :
 

Code :
  1. .tableau 
  2. {
  3. border-top: 1px solid black;
  4. border-left: 1px solid black
  5. }
  6. .cellule
  7. {
  8. border-right: 1px solid black;
  9. border-bottom: 1px solid black
  10. }


 
 
HTML :
 

Code :
  1. <table class="tableau" cellspacing="0" cellpadding="0">
  2. <tr>
  3.   <td class="cellule">1° cellule</td>
  4.   <td class="cellule">2° cellule</td>
  5.   <td class="cellule">3° cellule</td>
  6. </tr>
  7. <tr>
  8.   <td class="cellule">4° cellule</td>
  9.   <td class="cellule">5° cellule</td>
  10.   <td class="cellule">6° cellule</td>
  11. </tr>
  12. <tr>
  13.   <td class="cellule">7° cellule</td>
  14.   <td class="cellule">8° cellule</td>
  15.   <td class="cellule">9° cellule</td>
  16. </tr>
  17. </table>

Reply

Marsh Posté le 23-01-2003 à 11:14:14    

Hermes le Messager a écrit :

CSS :
 

Code :
  1. .tableau 
  2. {
  3. border-top: 1px solid black;
  4. border-left: 1px solid black
  5. }
  6. .cellule
  7. {
  8. border-right: 1px solid black;
  9. border-bottom: 1px solid black
  10. }


 
 
HTML :
 

Code :
  1. <table class="tableau" cellspacing="0" cellpadding="0">
  2. <tr>
  3.   <td class="cellule">1° cellule</td>
  4.   <td class="cellule">2° cellule</td>
  5.   <td class="cellule">3° cellule</td>
  6. </tr>
  7. <tr>
  8.   <td class="cellule">4° cellule</td>
  9.   <td class="cellule">5° cellule</td>
  10.   <td class="cellule">6° cellule</td>
  11. </tr>
  12. <tr>
  13.   <td class="cellule">7° cellule</td>
  14.   <td class="cellule">8° cellule</td>
  15.   <td class="cellule">9° cellule</td>
  16. </tr>
  17. </table>




 
merci..... jvé essayer...  :jap:


---------------
yvele n'est plus.
Reply

Marsh Posté le 23-01-2003 à 11:30:18    

Et comme ca, c'est pas plus simple ?
 
CSS :
 

Code :
  1. TABLE.tableau 
  2. { 
  3. border-top: 1px solid black; 
  4. border-left: 1px solid black 
  5. }
  6. TABLE.tableau TD
  7. {
  8. border-right: 1px solid black;
  9. border-bottom: 1px solid black 
  10. }


 
 
HTML :
 

Code :
  1. <table class="tableau" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td>1° cellule</td>
  4. <td>2° cellule</td>
  5. <td>3° cellule</td>
  6. </tr>
  7. <tr>
  8. <td>4° cellule</td>
  9. <td>5° cellule</td>
  10. <td>6° cellule</td>
  11. </tr>
  12. <tr>
  13. <td>7° cellule</td>
  14. <td>8° cellule</td>
  15. <td>9° cellule</td>
  16. </tr>
  17. </table>


Message édité par Kristoph le 23-01-2003 à 11:30:39
Reply

Marsh Posté le 23-01-2003 à 11:39:44    

Kristoph a écrit :

Et comme ca, c'est pas plus simple ?
 
CSS :
 

Code :
  1. TABLE.tableau 
  2. { 
  3. border-top: 1px solid black; 
  4. border-left: 1px solid black 
  5. }
  6. TABLE.tableau TD
  7. {
  8. border-right: 1px solid black;
  9. border-bottom: 1px solid black 
  10. }


 
 
HTML :
 

Code :
  1. <table class="tableau" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td>1° cellule</td>
  4. <td>2° cellule</td>
  5. <td>3° cellule</td>
  6. </tr>
  7. <tr>
  8. <td>4° cellule</td>
  9. <td>5° cellule</td>
  10. <td>6° cellule</td>
  11. </tr>
  12. <tr>
  13. <td>7° cellule</td>
  14. <td>8° cellule</td>
  15. <td>9° cellule</td>
  16. </tr>
  17. </table>




 
 
Ah ouèè pas mal... je connaissais pas ça..
trop merci  :jap:  
 
Mais hei... et le WC3? hein?


---------------
yvele n'est plus.
Reply

Marsh Posté le 23-01-2003 à 11:47:35    

Warcraft III ?
 
Normallement, c'est du CSS valide et aux normes. Peut-etre bien que c'est la norme CSS2 et pas la 1.

Reply

Marsh Posté le 23-01-2003 à 12:14:59    

Kristoph a écrit :

Warcraft III ?


 
 :lol:  
 
heu encore une question...
je comprend pas..
cellspacing et cellpadding n'existent pas en CSS?


---------------
yvele n'est plus.
Reply

Marsh Posté le 23-01-2003 à 13:31:47    

Mr yvele a écrit :


 
 :lol:  
 
heu encore une question...
je comprend pas..
cellspacing et cellpadding n'existent pas en CSS?


 
Si, mais si tu veux pas avoir de mauvaises surprises avec certains nav.  je te conseille de la laisser dans le html. (D'autant que c'est permis en XHTML 1.1, donc on a le temps de voir venir...)

Reply

Marsh Posté le 24-01-2003 à 12:33:44    

encore merci... c'est impec! [:zjk]


---------------
yvele n'est plus.
Reply

Marsh Posté le 24-01-2003 à 12:33:44   

Reply

Marsh Posté le 24-01-2003 à 17:25:48    

sinon yavais peut etre un truc dans ce genre a mettre :
 

Citation :

border-collapse:separate;

 
 
sau que c'est pas separate mais l'inverse ...( m'en rappele plus  )

Reply

Marsh Posté le 27-01-2003 à 14:38:35    

jolly a écrit :

sinon yavais peut etre un truc dans ce genre a mettre :
 

Citation :

border-collapse:separate;

 
 
sau que c'est pas separate mais l'inverse ...( m'en rappele plus  )


 
Avec border-collapse: vous influencez la façon de réagir des bordures distinctes de cellules mitoyennes de tableau. Les mentions suivantes sont permises:
 
separate = les différentes bordures de cellules de tableau ne coïncident pas.
collapse = les différentes bordures de cellules de tableau coïncident.
 
 
COOL.. merci!!!  :jap:  
tout nikel en CSS...
 
(http://forum.hardware.fr/icones/icon4.gif Netscape 6.(1) n'interprète pas encore cette mention.)


---------------
yvele n'est plus.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed