6 Pages V   1 2 3 > »   

> HTML : bordures tableau
Invité_Gaetch_*
posté samedi 28 juin 2008 à 17:36
Message #1











Bonjour j'aimerais que dans mon tableau, il y ait une bordure dashed entre les lignes, mais seulement à l'intérieur (pas de bordures sur le contour du tableau).

J'ai fait ça :
<table style="border-style:dashed" border="1" width="90%" frame="void" rules="rows" align="center">
mais ça met met des bordures autour (si j'enlève l'attribut style c'est bon les bordures sont où je veux mais pleines évidemment).

Je vais chercher un peu dans les tuto sur le net (pas la peine de m'en poster en réponse, je sais utiliser Google tongue.gif ) mais si quelqu'un a la solution cash comme ça se serait simpa de faire tourner ! Merci d'avance.
Go to the top of the page
+Quote Post
Tags Ce contenu n'a pas encore de Tag
Sponsors
À l'instant



Retour en haut de page
Ryo
posté samedi 28 juin 2008 à 17:57
Message #2


Forumeur accro
*******

Messages : 919
Inscrit : 27/05/2008
Lieu : Calvados
homme
34
fr
Hello,

quelque chose comme ça ?
Code
<table width="90%" border="0" align="center">
      <tr>
          <td style="border-bottom:1px dashed #000000;">ligne 1</td>
      </tr>
      <tr>
          <td style="border-bottom:1px dashed #000000;">ligne 2</td>
      </tr>
      <tr>
          <td style="border-bottom:1px dashed #000000;">ligne 3</td>
      </tr>
</table>


y'a longtemps que je n'ai pas utiliser de table biggrin.gif
Il est préférable d'utiliser les bloc <div> avec une feuille de style ccs laugh.gif

Edit : saloperie de mise en page wallbash.gif

Ce message a été modifié par Ryo - samedi 28 juin 2008 à 18:02.


--------------------
Go to the top of the page
+Quote Post
Invité_Gaetch_*
posté dimanche 29 juin 2008 à 00:14
Message #3











Merci Ryo toujours là quand on a besoin ! Ca fait chier qu'il faille répéter pour chaque cellule. De plus j'ai finalement voulu mettre du dotted 3 px et ça me fait une séparation pour chaque colonne du coup les points sont coupés lol bref le chipote mais en tout cas merci à toi !
Go to the top of the page
+Quote Post
Méthylbro
posté dimanche 29 juin 2008 à 06:55
Message #4


Ours des Pyrénées 100% AOC
Icône de groupe

Messages : 895
Inscrit : 09/06/2005
Lieu : 65000 Tarbes
21
fr
Utilise une image d'arrière plan sur tes lignes.


--------------------
Méthylbro, Développeur Web
N'oubliez pas de lire mon Tutoriel sur la POO avec PHP : Introduction à la POO avec PHP
Adopte un Mec
-----------------------

-----------------------
Go to the top of the page
+Quote Post
Ryo
posté dimanche 29 juin 2008 à 08:05
Message #5


Forumeur accro
*******

Messages : 919
Inscrit : 27/05/2008
Lieu : Calvados
homme
34
fr
Citation (Gaetch @ dimanche 29 juin 2008 à 00:14) *
Merci Ryo toujours là quand on a besoin ! Ca fait chier qu'il faille répéter pour chaque cellule. De plus j'ai finalement voulu mettre du dotted 3 px et ça me fait une séparation pour chaque colonne du coup les points sont coupés lol bref le chipote mais en tout cas merci à toi !
De rien. Oui c'est chiant de répèter, d'où l'intérêt d'utiliser les bloc div et un feuille de style en css.

En effet, toi quand tu veux changer par exemple le dashed en dotted, tu es obligé ici de le faire 3 fois.
Avec une feuille de style, tu le change qu'une seule fois dans la feuille de style. Sans changer ton code html.
Alors imagine si tu avais 50 lignes whistling1.gif (bon c'est sûr il existe le chercher/remplacer biggrin.gif )

Dans ce cas, en html, tu remplaces :
Code
<table width="90%" border="0" align="center">
                    <tr>
                        <td style="border-bottom:1px dashed #000000;">ligne 1</td>
                    </tr>
                    <tr>
                        <td style="border-bottom:1px dashed #000000;">ligne 2</td>
                    </tr>
                    <tr>
                        <td style="border-bottom:1px dashed #000000;">ligne 3</td>
                    </tr>
              </table>


par ce code html biggrin.gif
Code
       <div class="tableau">
                      <div class="ligne">
                              ligne 1
                      </div>
                      <div class="ligne">
                              ligne 2
                        </div>
                        <div class="ligne">
                              ligne 3
                        </div>
                    </div>


La feuille de style appelée par exemple style.css (dans la même racine ou pas) :
Code
     .tableau {
                // ceci est un commentaire
                    width:90%;                // largeur
                    text-align:center;    // alignement au centre -> équivalent à align="center"
                }
                .ligne {
                    text-align:left;
                    border-bottom:1px dashed #000000;     // 1 bordure en bas de 1px d'épaisseur de couleur noir
            }
Il y a bien un point devant tableau et ligne -> ça signifie que c'est une classe

Tu places ce code entre les balises <head></head> pour déclarer ta feuille de style:
Code
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
href-> indiquant le chemin vers ta feuille de style

Ce genre de code est plus apprécié que le tableau biggrin.gif

Citation (Méthylbro @ dimanche 29 juin 2008 à 06:55) *
Utilise une image d'arrière plan sur tes lignes.
Oui on peut ajouter des images d'arrière-plan
en css ça donne quelque chose comme ça:
Code
.ligne {
                  text-align:left;
                  border-bottom:1px dashed #000000;     // 1 bordure en bas de 1px d'épaisseur de couleur noir
                  background:#CCCCCC url(/images/images.jpg) center;     // image centrée sur un fond gris
          }


Edit : bon je laisse comme ça, j'arrive pas à aligner le code entre <code> et </code> wallbash.gif

Ce message a été modifié par Ryo - dimanche 29 juin 2008 à 08:14.


--------------------
Go to the top of the page
+Quote Post
Invité_Gaetch_*
posté dimanche 29 juin 2008 à 13:55
Message #6











Ho merci beaucoup à toi tu t'es défoncé... mais j'ai pas accès au CSS je crois c'est pour mon blog sad.gif
Go to the top of the page
+Quote Post
Ryo
posté dimanche 29 juin 2008 à 18:38
Message #7


Forumeur accro
*******

Messages : 919
Inscrit : 27/05/2008
Lieu : Calvados
homme
34
fr
Ah bah tant pis biggrin.gif

joli blog au passage thumbsup.gif


--------------------
Go to the top of the page
+Quote Post
Invité_Gaetch_*
posté lundi 30 juin 2008 à 00:39
Message #8











merci merci smile.gif j'essaye de faire un truc simple et clair suis content si ça plaît!
Go to the top of the page
+Quote Post
g_roseline
posté lundi 30 juin 2008 à 00:44
Message #9


Forumeur activiste
****

Messages : 207
Inscrit : 22/06/2008
Lieu : Toulouse
femme
27
fr
Citation (Ryo @ dimanche 29 juin 2008 à 08:05) *
En effet, toi quand tu veux changer par exemple le dashed en dotted, tu es obligé ici de le faire 3 fois.
Avec une feuille de style, tu le change qu'une seule fois dans la feuille de style. Sans changer ton code html.
Alors imagine si tu avais 50 lignes whistling1.gif (bon c'est sûr il existe le chercher/remplacer biggrin.gif )


Voui mais le chercher/remplacer a hélas ces limites et ces petits bug de temps en temps...ça va que tu l'utilise sur une ou deux page (c'est rapide de vérifier que le taf a bien été fait) mais sur un site comme le mien...même si c'est bien utile et que je l'utilise souvent...je me demande parfois si je ne ferai mieux pas de tout changer à la mano, tant les corrections des oublis me prend du temps !!!!


--------------------
Go to the top of the page
+Quote Post
Invité_Gaetch_*
posté lundi 30 juin 2008 à 02:24
Message #10











G_Roseline > Et bien pourquoi tu n'utilises pas le CSS toi ?
Go to the top of the page
+Quote Post
 

6 Pages V   1 2 3 > » 



 

RSS Version bas débit Nous sommes le : dimanche 12 octobre 2008 à 19:38