HTML : bordures tableau

Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

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 :snif: ) mais si quelqu'un a la solution cash comme ça se serait simpa de faire tourner ! Merci d'avance.

Partager ce message


Lien à poster
Partager sur d’autres sites
Annonces
Maintenant

Messages recommandés

Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)

Hello,

quelque chose comme ça ?

<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 ;)

Il est préférable d'utiliser les bloc <div> avec une feuille de style ccs :snif:

Edit : saloperie de mise en page :snif:

Modifié par Ryo

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

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 !

Partager ce message


Lien à poster
Partager sur d’autres sites
Méthylbro VIP 1 038 messages
Ours des Pyrénées 100% AOC‚
Posté(e)

Utilise une image d'arrière plan sur tes lignes.

Partager ce message


Lien à poster
Partager sur d’autres sites
Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)
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 :snif: (bon c'est sûr il existe le chercher/remplacer ;) )

Dans ce cas, en html, tu remplaces :

<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 :o

	   <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) :

	 .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:

<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 :o

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:

.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> :snif:

Modifié par Ryo

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

Ho merci beaucoup à toi tu t'es défoncé... mais j'ai pas accès au CSS je crois c'est pour mon blog :snif:

Partager ce message


Lien à poster
Partager sur d’autres sites
Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)

Ah bah tant pis :snif:

joli blog au passage :snif:

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

merci merci :snif: j'essaye de faire un truc simple et clair suis content si ça plaît!

Partager ce message


Lien à poster
Partager sur d’autres sites
g_roseline Membre 205 messages
Forumeur activiste‚ 36ans
Posté(e)
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 :snif: (bon c'est sûr il existe le chercher/remplacer :snif: )

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 !!!!

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

G_Roseline > Et bien pourquoi tu n'utilises pas le CSS toi ?

Partager ce message


Lien à poster
Partager sur d’autres sites
Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)
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 :snif: (bon c'est sûr il existe le chercher/remplacer ;) )

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 !!!!

Le bloc-note bug souvent quand tu as un long fichier avec le chercher/remplacer

Utilise NotePad++ :snif: ou Dreamweaver, c'est comme ça que j'ai conçu mon site :o

Modifié par Ryo

Partager ce message


Lien à poster
Partager sur d’autres sites
g_roseline Membre 205 messages
Forumeur activiste‚ 36ans
Posté(e)

c'est ce que j'ai fait.....je conçois mon site sur dream !!! mais tu sais il fait quasiment 2000 pages ce site, toute basée sur un modele similaire, alors, quand j'ai une connerie à changer, je fais un chercher/remplacer sur une centaine de pages...parfois meme sur tout le site.....du coup parfois...ça bugouille un peu !!!c'est normal je pense....

Partager ce message


Lien à poster
Partager sur d’autres sites
Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)

Tout dépend comment tu as crée ton site, statique ou dynamique.

Apparemment tu as conçu un site statique :snif: Vu que tu changes tout en chercher/remplacer.

Mon site doit contenir quelque chose comme 2 700 pages dynamiques, en fait je n'ai qu'une seule page en php qui

couplée avec une base de données, donc lorque j'ai une modif au niveau design à faire, je le fais en général dans la feuille de style,

puis une petite modif sur la page, et c'est tout :o Un seule modif se répercute sur les autres pages.

D'où l'intérêt de la feuille de style, du php et une base de données. ;)

Au fait sympa ton site g_roseline :o Tout en noir j'adore :snif:

Modifié par Ryo

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

Pfa j'essaye je comprendre leur feuille de style mais je crois que j'aurais pas du sécher les cours de web j'y comprends pas grand chose. En fait je sais pas a quoi correspndent les éléments.

body	{margin:0px;font-family: Arial, sans-serif;font-size:12px; background:#F3FEFF;color: #202E3A;}
a		 { color:#01426F; } 
a:hover { text-decoration:underline; color:#202E3A;}

#top	{
border-bottom: 7px solid #62CBED;
padding: 10px 10px 0 10px;
color: #016AC3;
margin-bottom: 3px;
padding: 10px 10px 0 10px;
font-size: 24px;
font-weight: bold;
text-align: left; 
}

#footer   {
color: #62CBED;
clear:both;
padding: 5px;
text-align:center;
}

.contenuArticle {
background-color: #E6FCFF;
border-left: 15px solid #C8E7FF;
border-bottom: 1px solid #E6FCFF; /* IE creepy text BUG FIX */
}

.divTitreArticle h2 {
border-bottom: 5px solid #269CFF;
}
.titreArticle		{ color:#269CFF; } 
.titreArticle:hover	{ color:#016AC3;}	


.box-titre {
border-bottom: 1px solid #F3FEFF;
background-color:#62CBED;
}

.box {
background-color: #C8E7FF;
border-bottom: 2px dotted #DDF2FF;
}

.box-content {
border-top: 5px solid #011FFF;
}

.date	 {color: #62CBED;}

.commentMessage  {
border-left: 15px solid #E6FCFF;
border-bottom: 1px solid #F3FEFF; /* IE creepy text BUG FIX */
}
.commentOption   {
border-bottom: 2px dotted #DDF2FF;
color: #5FA3C5;
}

.extraitArticle	{margin-top: 10px;margin-bottom: 20px;}

.extrait {margin-top: 2px;padding: 5px 5px 5px 15px;}
.plusExtrait {padding: 2px 5px 2px 5px;text-align: right;font-size: 10px;}
.plusExtrait a			 { text-decoration:none; color:#016AC3; } 
.plusExtrait a:hover	{ text-decoration:underline; color:#01426F;}

#cl_1_1 { background-color: #C8E7FF; }

.pageContent {
background-color: #E6FCFF;
border-left: 15px solid #C8E7FF;
border-bottom: 1px solid #E6FCFF; /* IE creepy text BUG FIX */
}

.divPageTitle h2 {
border-bottom: 5px solid #269CFF;
}
.divPageTitle h2		{ color:#269CFF; } 
.divPageTitle h2:hover	{ color:#016AC3;}

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

Oubliez le message d'avant ayé j'ai compris !

Donc maintenant j'essaye de remplacer mes mises en forme par du CSS.

Et donc pour en revenir au tableau, je voudrais savoir s'il est possible en CSS de définir une classe tableau où on aurait une mise en forme différente pour la ligne d'en-tête du tableau et le reste du tableau ?

Faut que ça ressemble à ça :

sanstitredy5.jpg

donc la première ligne en fond bleu et les autres avec une bordure basse bleue solid 1px. SAUF la dernière :snif:

J'émets toutefois des doutes quand à la possibilité de faire ça en CSS...

Modifié par Gaetch

Partager ce message


Lien à poster
Partager sur d’autres sites
Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)

ça donnerait ça Tableau Gaetch avec bloc div

t'as plus qu'à voir la source :snif:

la feuille de style utilisée est celle-ci

;)

Edit :

Bon comme je m'emmerde et que je n'ai rien d'autre à foutre,

je t'ai mis le texte avec :snif:

Modifié par Ryo

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

Je m'incline et je te tire mon chapeau bien bas tu est trop indulgent avec moi en tout cas un très grand merci. Je vais mettre ça dans mon blog dès ce soir !

Ha oui en effet lol c'était une image que je t'ai donnée ça veut dire que tu t'es fait chier à retaper le texte rhoo t'assures trop !

Partager ce message


Lien à poster
Partager sur d’autres sites
Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)
Je m'incline et je te tire mon chapeau bien bas tu est trop indulgent avec moi en tout cas un très grand merci. Je vais mettre ça dans mon blog dès ce soir !

Ha oui en effet lol c'était une image que je t'ai donnée ça veut dire que tu t'es fait chier à retaper le texte rhoo t'assures trop !

Euh non, copier/coller sur ton blog :snif:

As-tu compris les codes au moins ? :snif:

Modifié par Ryo

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Gaetch
Invité Gaetch Invités 0 message
Posté(e)

Oui j'ai compris, par contre je capte pas si y'a un quelconque moyen de spécifier la taille des colonnes ?

Partager ce message


Lien à poster
Partager sur d’autres sites
Ryo Membre 911 messages
Forumeur accro‚ 43ans
Posté(e)

En principe, la taille des colonnes va s'ajuster automatiquement à la taille du conteneur tableau

si tu as 2 colonnes, la largeur de tableau va être divisée par 2, etc ...

Mais tu peux toujours mettre cela,

si tu souhaites mettre 2 colonnes :

.col {
		 width:50%;  
		 float:left;
 }

Si tu en mets 3 : width:33%;

Si tu en mets 4 : width:25%;

mais bon ça t'oblige à changer à chaque fois

Modifié par Ryo

Partager ce message


Lien à poster
Partager sur d’autres sites
Annonces
Maintenant

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant