Tableau HTML, au secour

Bonjour à tous,

j'ai un petit souci avec mon tableau, je sais par avance que je risque de me faire houspillé par les avertis du codage mais je tiens à signaler que ce n'est pas mon domaine et que je n'y connais rien du tout, mais vraiment rien (et si quelqu'un peut m'expliquer je pense que cela m'aiderait beaucoup..)

Voila sur cette page la : http://fredoutillage.com/goujons/

j'ai inséré mon tableau avec un million de td en tout genre, et je n'arrive pas à mettre en forme la derniere colonne pour que tout rentre sur une seule ligne

J'ai essayé ça

<td style="text-align: center;" width="60%"><span style="color: #778899;"><span style="font-size: 80%; line-height: 2em;">Inox A4 (316)</span></span></td>

en me disant que si je mettais width="60%" ça fonctionnerai mais en fait non
Pourtant j'ai l'impression que ça a marché sur les deux d'avant..

Je ne vous mettrai pas le code complet parce que ce serait trop long..

Merci par avance !!

Bonjour !

D'abord ne suis pas une spécialiste ès tableaux mais... que voilà un tableau bigrement compliqué... et utilisé pour des données tabulaires... étonnant.

Si vous voulez que la dernière colonne soit sur une ligne, pourquoi ne pas utiliser sur le span : "white-space : pre"...

La balise td peut avoir comme attribut width ? Je ne savais pas... en tout cas Firefox n'a pas l'air de le prendre en compte.


Modifié par Zelena (23 Jun 2016 - 17:49)

Bonjour Eleana,

Surpris par le message de Zelena, je suis allé jeter un oeil au code source du tableau.
J'ai été surpris en fait que Zelena ne souligne que le fait à propos de width.

Par contre, je suis parfaitement d'accord avec elle sur le fait qu'il soit très compliqué. Il est tout autant compliqué qu'il est encombrant et ce dans tous les sens du terme.

Alors je comprends bien le fait que ce genre de données ne puisse être présenté de façon éclatée (plusieurs petits tableaux à la place d'un gargantuesque) ; en fait je ne connais rien du tout au domaine présenté donc je te laisse seule juge.

Par contre au niveau du code en lui même il y une sacrée épuration à faire punaise de boudiou d'boudiou !

Les données en elles-mêmes
Pour chaque donnée, celle-ci est enclavée dans 2 spans. Span eux-mêmes enclavés dans un TD (table data). La balise TD s'auto-suffit largement.

Alors tu vas me dire "Oui mais ça me permet de mettre du style".
Oublie, une TD est tout aussi personnalisable !

du style en ligne
Tu l'as lus, j'en suis sûr mais a priori ça t'embête alors tu garde ton style en ligne. Que sur ce point j'ai raison ou non importe peu dans la mesure où dans ton cas la redondance prolifère. Stoppe nette ce cancer, sers-toi de Css ! (en vrai !)
Le Css, tu peux l'intégrer dans ton en-tête html si tu désire ne pas l'avoir trop loin de tes données, mais vire le style en ligne sinon l'export dans un fichier externe reste la solution la plus pérenne.

A ce stade ton code source a déjà subit une cure d'amaigrissement drastique. A vue de nez 75% de masse corporelle en moins.

Pépé, qu'est-ce tu fais là ?
Pépé alias de <p></p>, qu'est-ce que tu fous dans une TD ?
Pépé, tu le vire sans préavis, pas besoin de ça, je te le garantis.

Grosso merdo. Oups. Grosso modo, dans un tableau: uniquement du balisage tableau.
Sinon ? Sinon c'est que t'utilise une table pour faire du graphisme. Et là encore ce n'est pas une bonne pratique (je pense que Quentin confirmerait ces dires, non ?)

Distinction entre-éléments
A ce stade on a tellement nettoyé que le tableau ne devrait plus tout à fait ressembler à ce qu'il est présentement. On a nettoyé le balisage et mis le style à sa place. Il est tout propre, il brille ! Certes mais reste uniforme.
Alors écoute bien :
Les éléments de ton tableau qui ont besoin de l'application de style qui est différent du style global du tableau... Jusque là tu suis ? tu les personnalise en utilisant les classes css.

Un petit exemple qui décrit une vue de ce à quoi devrait ressembler:

<table>
 <tbody>
  <tr>
   <td>data</td>
   <td class="special">data</td>
  </tr>
  <tr>
  </tr>
</tbody>
/* PS je la fais courte, ok? */

Côté css (dans HEAD ou en fichier):

table {
 padding: x x x x;
 margin: y y y y;
 color: jolie;
 font-size: lisible;
}
td {
 propriétés...
}

/* Et maintenant le cas particulier 'special' */
.special {
 font-weight: watchers;
 font-style: cool;
 color; agressive;
}

Alors c'est qu'un exemple et probablement pas le meilleur. Mais l'important est dans les principes énoncés plus haut. Quand ton tableau sera bien propre, les problèmes devraient s'amenuiser et devenir plus faciles à résoudre.

Bon courage et n'hésite pas à nous faire part de ton état d'avancement.
Modifié par Greg_Lumiere (24 Jun 2016 - 11:27)

J'oubliais.

Une TD est personnalisable mais c'est aussi valable pour toutes les balises d'une table (table, tbody, tr), n'hésite pas regrouper les propriétés en tenant compte de ce facteur.

Par exemple si toutes les cellules d'une ligne ont une propriétés particulière, applique une classe à TR plutôt qu'à chaque TD.

<!-- PRIVILEGIER -->
<tr class="special">
 <td></td>
 <td></td>
 <td></td>
</tr>

<!-- AU LIEU DE -->
<tr>
 <td class="special"></td>
 <td class="special"></td>
 <td class="special"></td>
</tr>

Conseils d'ami
Modifié par Greg_Lumiere (24 Jun 2016 - 11:08)

Ha oui puis j'avais pas vu ça

bgcolor="#778899"

.
Cette propriété est dépréciée depuis près de 10 piges (je me demande même si ce n'est plus).

Il existe ceci en lieu et place: background
Accompagné par quelques suffixes comme color (background-color: #778899)


Hé béh, avec tout ça t'as du boulot !
Modifié par Greg_Lumiere (24 Jun 2016 - 11:08)

Bonjour, Greg_Lumiere !

Greg_Lumiere a écrit :

J'ai été surpris en fait que Zelena ne souligne que le fait à propos de width.

Ah, c'est parce que Eleana n'a pas demandé : "aidez-moi à rendre mon tableau sémantique !" ou "aidez-moi à simplifier mon tableau !" mais :

eleana a écrit :
je n'arrive pas à mettre en forme la derniere colonne pour que tout rentre sur une seule ligne

Et comme en plus je n'ai jamais vu de tableau HTML où on utilisait à la fois des colspan et des rowspan... je me suis sentie comme un goujon hors de l'eau...


Modifié par Zelena (24 Jun 2016 - 11:12)

Zelena a écrit :
Bonjour, Greg_Lumiere !

C'est un bon jour, je le sens !

Zelena a écrit :
Et comme en plus je n'ai jamais vu de tableau HTML où on utilisait à la fois des colspan et des rowspan...

La syntaxe des table est très lourde je trouve et à l'oeil les fusions rendent difficile la représentation mentale du code.

Zelena a écrit :
je me sentais comme un goujon hors de l'eau...

Grimpe dans mon épuisette ma belle, je vais te trouver un coin tranquille.

@Zelena: la référence vis-à-vis de ton message n'est qu'un petit clin d’œil sympathique dont je me suis servis en guise d'introduction. En fait je me suis dis qu'il y avait tellement de nettoyage à faire qu'il serait plus sage de mettre tout ceci au carré avant de se pencher sur le fond du problème. Ce qui évitera l'application d'une rustique(voir Edit) là où il vaudra mieux changer le pneu (dans le cas qui nous occupe c'est même la jante avec les étriers et suspattes lol).
Edit : C'est l'application d'une rustine et non pas rustique qui dans ce contexte n'a aucun sens.


Ce tableau est comme un diable. Plus j'y regarde plus j'y vois le mal. Malgré le fait que je m'y suis repris à trois fois pour essayer de détailler tous les points dérangeants, à la énième lecture j'en trouve encore à dire. Je le garde pour plus tard sinon on risque de prendre ceci pour de l'acharnement. Ce n'en est pas ! Je vous l'assure !

Eleana tu as encore bien du travail devant toi mais rassure-toi le plus dur est derrière car tu as la structure du tableau en main et tu connais les données à y insérer.
Par contre si tu t'obstine dans cette voie, ta table, telle que présentée et au vu du chemin que tu suis, je doute que tu ne puisse à arriver à tes fins c'est pourquoi tu dois te lancer dans cette opération "nettoyage de printemps".

Edit : Je ne t'ai même pas souhaité le bonjour Zelena. Trop pris par mes bêtises
Bonjour Zelena.
Modifié par Greg_Lumiere (24 Jun 2016 - 14:18)

Un immense merci pour vos réponse,

Zelena ce que tu m'as donné fonctionne à merveille !
Greg c'est sur que je dois nettoyer ce tableau, comme je l'ai dit dans mon premier post je n'y connais rien du tout et j'ai du m'y mettre malgré moi, grâce à vous je vais pouvoir simplifier tout ça parce que je commençais à m'y perdre !

Le css j'étais persuadée qu'il fallait le mettre dans un fichier à part et l'enregistrer je ne sais où par la quite, j'avais donc quelque peu abandoné..

Une immense merci encore une fois, je vais pouvoir finir ce site dans les temps grâce à vous !!

eleana a écrit :
Greg c'est sur que je dois nettoyer ce tableau, comme je l'ai dit dans mon premier post je n'y connais rien du tout et j'ai du m'y mettre malgré moi, grâce à vous je vais pouvoir simplifier tout ça parce que je commençais à m'y perdre !

Aucun problème. Quand tu penseras avoir terminé ce nettoyage n'hésite pas à nous montrer le résultat, peut-être qu'on trouvera encore quelques (bons) conseils à te donner.
Et puis si ça bloque, on est encore là, t'inquiète !

Eleana a écrit :
Le css j'étais persuadée qu'il fallait le mettre dans un fichier à part et l'enregistrer je ne sais où par la suite

Ce n'est pas faux. Ce que tu décris correspond à l'externalisation du style.

Une autre méthode (je l'utilise quand la partie du style ne concerne que cette page) est de l'introduire entre les balises head comme ceci:

<html>
 <head>
   <style>
     table {
      propriétés...
     }
   </style>
 </head>
 <body>

Eleane a écrit :
Une immense merci encore une fois, je vais pouvoir finir ce site dans les temps grâce à vous !!

Mais de rien. Un merci fait toujours plaisir (d'autant plus s'il est immense).
Que demande le peuple ? ...
Modifié par Greg_Lumiere (24 Jun 2016 - 11:41)

Greg_Lumiere a écrit :
...
Ce qui évitera l'application d'une rustique là où il vaudra mieux changer le pneu (dans le cas qui nous occupe c'est même la jante avec les étriers et suspattes lol)
...

Moi je demande un tutoriel en ligne !

Rhoooo mais qué couillon ! Merci 6l20, je m'applique à corriger.

Greg_Lumiere a écrit :
Rhoooo mais qué couillon ! Merci 6l20, je m'applique à corriger.

J'aurai préféré un tuto, mais bon
Fin de pollution de topic, mes confuses pour ce moqueur passage

De retour..

Merci encore pour votre aide précieuse !

Alors j'ai tout fait comme vous m'avez dit et du coup j'ai téléchargé un truc pour me mettre au CSS, c'est Sublimetext (faut vraiment que j'arrete de prendre des initiatives informatiques..)

Je bloque sur un tout pitit truc..
Quand vous dites
Padding x x x x
margin: y y y y

Je dois le remplacer par quoi ?

Parce que la du coup ca donne ça

table {
 	padding: x x x x;
	margin: y y y y;
	font-size: 80%;
	}

.td {
	text-align: center;
	background-color: #FFFFFF;
	font-size: 80%; 
	line-height: 2em;
	}

.header {
	font-weight: normal;
	background-color: #C0C0C0;
	font-size: 80%; 
 	}

.dimension {
	font-weight: normal;
	background-color: #E6E6FA;
	}

.p {
	font-size: 60%;
}

et ca

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="C:\Users\Fred\Desktop\site" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>
		<body>
 			<tr class="header">
				<td rowspan="2">Ø Goujon et Filetage</td>
				<td rowspan="2">Longueur du Goujon</td>
				<td rowspan="2">Marquage Tête</td>
				<td rowspan="2">Ø écrou</td>
				<td rowspan="2">Ø rondelle</td>
				<td rowspan="2">Longueur du filetage <p>(mm)</p></td>
				<td rowspan="2">Ø perçage dans la pièce à fixer <p>(mm)</p></td>
				<td colspan="3">Implantations standard</td>
				<td colspan="3">Implantations réduite</td>
				<td rowspan="2">Couple de serrage rec.<p>(Nm)</p></td>
 				<td colspan="3">Code produit</td>
 				<td rowspan="2">Prof. mini de perçage<p>(mm)</p></td>
 				<td>Épaisseur maxi à fixer</td>
				<td>Prof. mini de perçage<p>(mm)</p></td>
 				<td>Prof. d'ancrage effective<p>(mm)</p></td>
				<td>Épaisseur maxi à fixer<p>(mm)</p></td>
 				<td>Acier Zingué</td>
				<td>Acier Galvanisé à chaud</td>
				<td>Inox A4 (316)</td>
 			</tr>
			<tr class="header">
				<td><p>(d)</p></td>
				<td><p>(dt)</p></td>
				<td><p>(l)</p></td>
				<td><p>(Sw)</p></td>
				<td><p>(Dw)</p></td>
				<td><p>(lG)</p></td>
				<td><p>(df)</p></td>
				<td><p>(b0)</p></td>
				<td><p>(bef)</p></td>
				<td><p>(Tfix)</p></td>
 				<td><p>(b0)</p></td>
				<td><p>(bef)</p></td>
				<td><p>(Tfix)</p></td>
 				<td><p>(Tinst)</p></td>
 			</tr>
		</body>
</html>

Est ce que je suis dans le bon ? Histoire d'arrêter de vous empatouiller avec mes histoires ?

Les 'x' et les 'y' sont à remplacer par une dimension.

/* Par exemple la propriété margin (émargements) : */
.laclasse {
  margin: 1px 2em 3rem 40%;
}

/* équivaut à => */
.laclasse {
  margin-top: 1px;
  margin-right: 2em;
  margin-bottom: 3rem;
  margin-left: 40%;
}

La même chose est valable pour les espacements (padding)

Ici le lien vers la W3Schools - Margin property (in english)

En tout cas, mise à part l'erreur de recopiage (il manque ta balise table, suppose d'un oubli), c'est propre et épuré et ça semble fonctionnel

Merciiiiii

Et pourquoi

  <td><p>(d)</p></td>
  <td><p>(dt)</p></td>

et non pas

  <th>(d)</th>
  <th>(dt)</th>

?!


Edit : Vu que là tu n'as pas mis tout ton tableau (ouf) sache tout de même si ce n'est aps le cas que les en-têtes de colonnes se définissent suivant ce schéma de balise:

<thead><!-- au lieu de tbody -->
  <tr>
   <th><!-- un 'h' et non un 'd' pour dire header --></th>
   <th></th>
  </tr>
</thead>

Après tu enchaines avec un ou plusieurs <tbody>
Modifié par Greg_Lumiere (27 Jun 2016 - 18:36)

Je sais pas ce qui est le plus génial, le fait que m'aidiez autant, le fait que ce super top moumoute (je sais cette expression est aussi dépassée que bg-color) ou le fait que je commence à comprendre à peu près tout !

Je m'y mets dès demain !