Bonjour,

Tel que conseillé que W3C, j'essaie de remplacer mes tables par des css grid. Pas de souci quand il s'agit de structurer la page mais pour afficher un tableau avec bordures, ça se complique.

Voici ce que j'ai déclaré dans mon CSS:

.gridclassement { display: grid; grid-template-columns: 4fr repeat(21, 1fr) 2fr 1fr; margin: 0 auto; }
.cellbordgras {font-weight: bold; border: 1px; }
.cellbordgrasgauche {font-weight: bold; border: 1px; text-align: left;}
.cellbordgrasdroite {font-weight: bold; border: 1px; text-align: right;}
.imgdrapclass { width: 27px; height: 18px; }
.imgtendance { height: 18px; }

Et sur ma page:

<div class="gridclassement">
	<div class="cellbordgras">NOM</div>
	  <?php $reponse = mysql_query("SELECT nomclass FROM course order by no");
	while ($donnees = mysql_fetch_array($reponse) )
	{?>
	<div><img src="<?php echo $donnees['nomclass'];?>.jpg" class="imgdrapclass" alt="<?php echo $donnees['nomclass'];?>"></div><?php }?>
	  <div class="cellbordgras">PTS</div>
	  <div>&nbsp;</div>
	<?php $i=1;
	// récupération des pilotes dans la table des statistiques des pilotes en faisant un tri décroissant sur le nombre de points
	$reponse = mysql_query("SELECT * FROM classementpil ORDER BY total DESC,egalite DESC"); 
	while ($donnees = mysql_fetch_array($reponse) )
	{ $num = $donnees['no']; //copie du numéro dans une variable
	  $total = $donnees['total'];
	  //récupération du nom du pilote dans la table pilote via son numéro
	  $reponse2 = mysql_query("SELECT no,nom FROM pilote WHERE no=$num");
	  while ($donnees2 = mysql_fetch_array($reponse2) )
	  { $nom = $donnees2['nom'];}?>
	  <div class="cellbordgrasgauche"><?php 
	  mysql_query("update statspilote set classement = $i where no=$num");
	  echo $i; ?>)<a href="pilote-<?php echo strtolower($nom).'-'.$num; ?>.html" class="lien1"><?php echo $nom; ?></a></div>
	  <?php $reponse3 = mysql_query("SELECT nomclass FROM course order by no"); 
	while ($donnees3 = mysql_fetch_array($reponse3) )
	{$course='pts'.$donnees3['nomclass'];?>
	  <div class="cellbordgrasdroite"><?php echo $donnees[$course]; ?></div><?php }?>
	  <div class="cellbordgrasdroite"><?php echo $total; 	  
	  mysql_query("update statspilote set points = $total where no=$num");?></div>
	  <div><img src="<?php echo $donnees['tendance']; ?>" alt="<?php echo $donnees['tendance']; ?>" class="imgtendance" />
	 <?php $i++; } ?>
	</div><br />
</div>

Le résultat est très moche: http://www.superf1.be/design2018/classements.html#classpil

Non seulement, je n'ai pas les bordures et il n'y a que la 1ère ligne qui est un peu alignée. J'ai refait le compte et j'ai bien 24 colonnes comme déclaré dans le CSS. Néanmoins, mon nombre de colonnes pourra être variable et il faudra que je n'ai pas encore compris à ce niveau-là, ce qui était bien géré par les table.

A une époque, on me conseillait de conserver les table dans ces cas-là. Visiblement, la norme a changé donc comment puis-je procéder?

Merci pour votre aide.

Bonjour,

Je ne veux pas trop m'avancer, mais à mon avis dans ton cas un tableau serait plutôt conseillé.

Qu'est ce qui te fait dire que ton tableau ne serait pas valide ?

Pour optimiser ton code il faut surtout arrêter d'utiliser mysql qui est complètement HAS BEEN.

Renseignes toi sur PDO, ton code est complètement illisible...

Ce guide est juste génial pour grid sinon: https://css-tricks.com/snippets/css/complete-guide-grid/

Pour les bordures tu dis "border:1px".

Il faut donner le style de bordure et la couleur. "border: 1px solid black".

Hello,

En effet mysql_query() est obsolète, oublies-le...

Voir le Manuel PHP en ligne -> http://php.net/manual/fr/function.mysql-query.php 

Merci pour vos réponses.

Encore un truc de plus à changer^^ Et vous me confirmez que les table, c'est complètement obsolète aussi?

Bonjour,

> Et vous me confirmez que les table, c'est complètement obsolète aussi?

Pour la mise en page, oui. Mais comme le faisait florianthierry1, ici on a des pilotes et des courses, et ça paraîtrait pertinent d'avoir effectivement un tableau à double entrée.

Ok et donc un tableau à double entrée, le standard est toujours html table?

Oui, parce que sémantiquement c'est correct.

Mais pour être sûr : tu peux nous faire un schéma de ce que tu veux au final avec tes données ?

Voici le résultat: http://www.superf1.be/design2018/classements.html#classpil

-
Edité par raks 19 juillet 2018 à 7:09:40

Alors, j'ai des propositions d'améliorations :

• la cellule avec "Nom" dedans devrait pour moi être un <th>, et il faudrait lui ajouter scope="col", pour indiquer qu'il concerne sa colonne
• idem pour toutes les cellules avec des drapeaux
• pour les images des drapeaux : mets une majuscule au nom de pays dans le alt
• toujours pour les drapeaux : pas de "px" dans les attributs width et height
• et surtout, recrée des images de la bonne taille, inutile de faire charger des gros fichiers si c'est pour n'en avoir que des miniatures affichées
• les cellules avec les noms des pilotes doivent être des <th>, avec scope="row", pour indiquer que c'est leur ligne qu'elles "dirigent"
• si tout ton tableau doit être en gras, inutile de donner une classe "cellgras" à toutes les cellules, cible directement le tableau
• pas d'attribut align : si tu veux aligner, c'est en CSS
• et, mais ça c'est une question d'esthétique, je ne te conseille pas de mettre l'attribut border sur ta table, passe par du CSS pour faire un design un peu plus fin, moins mastoc.

Merci pour les remarques. Je suis parvenu à mettre tout à jour sauf pour mettre une majuscule aux nom des drapeaux. La valeur de la DB est en minuscule et le nom de l'image aussi. Donc je devrais faire une manipulation de string pour y arriver, est-ce que ça en vaut vraiment la peine?