Aller au contenu

HTML : bordures tableau

Noter ce sujet


Invité Gaetch

Messages recommandés

Invité Gaetch
Invités, Posté(e)
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.

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant
  • Réponses 56
  • Créé
  • Dernière réponse

Meilleurs contributeurs dans ce sujet

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
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
Lien à poster
Partager sur d’autres sites

Invité Gaetch
Invités, Posté(e)
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 !

Lien à poster
Partager sur d’autres sites

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
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
Lien à poster
Partager sur d’autres sites

Invité Gaetch
Invités, Posté(e)
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:

Lien à poster
Partager sur d’autres sites

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
Posté(e)

Ah bah tant pis :snif:

joli blog au passage :snif:

Lien à poster
Partager sur d’autres sites

Invité Gaetch
Invités, Posté(e)
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!

Lien à poster
Partager sur d’autres sites

Membre, 42ans Posté(e)
g_roseline Membre 205 messages
Baby Forumeur‚ 42ans‚
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 !!!!

Lien à poster
Partager sur d’autres sites

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

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

Lien à poster
Partager sur d’autres sites

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
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
Lien à poster
Partager sur d’autres sites

Membre, 42ans Posté(e)
g_roseline Membre 205 messages
Baby Forumeur‚ 42ans‚
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....

Lien à poster
Partager sur d’autres sites

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
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
Lien à poster
Partager sur d’autres sites

Invité Gaetch
Invités, Posté(e)
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;}

Lien à poster
Partager sur d’autres sites

Invité Gaetch
Invités, Posté(e)
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
Lien à poster
Partager sur d’autres sites

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
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
Lien à poster
Partager sur d’autres sites

Invité Gaetch
Invités, Posté(e)
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 !

Lien à poster
Partager sur d’autres sites

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
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
Lien à poster
Partager sur d’autres sites

Invité Gaetch
Invités, Posté(e)
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 ?

Lien à poster
Partager sur d’autres sites

Membre, 49ans Posté(e)
Ryo Membre 911 messages
Baby Forumeur‚ 49ans‚
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
Lien à poster
Partager sur d’autres sites

Annonces
Maintenant

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

Chargement

×