28173 sujets

CSS et mise en forme, CSS3

CSS pour une fonction tableau

Bonjour,

Je recherche quelqu'un pouvant m'aider à affiner la mise en page de mes tableaux (j'ai bien dit mes car c'est une série de tableaux que je construis grâce à une fonction) ... je n'ai qu'une très petite expérience en CSS !

Voici la fonction permettant de créer les tableaux:
function tableau($list, $entete, $restriction, $habillage, $accessibilite){
	echo '<table summary="' . $accessibilite[summary] . '"' . $habillage . '>' . "\n";
	echo '<caption>' . $accessibilite[caption] . '</caption>' . "\n";

	//l'entete du tableau
	echo '<tr>';
	$i = 1;
	foreach($entete as $libelle){
		echo '<th id="t' . $i . '">' .$libelle . '</th>';
		$i ++;
		}
	echo '</tr>';

	//les donnees
	//les lignes
	while(list(, $objet) = each($list)){
		echo '<tr>';
		
		//les colonnes à partir de l'entête
		$i = 1;
		foreach($objet as $name => $value) {
			if(!in_array($name, $restriction)) {
				echo '<td headers = "t' . $i .'">' . $value . '</td>';
				$i ++;
				}
			}
	
		//les colonnes à partir de l'entête
		/*foreach($entete as $nom_champ => $libelle_entete) {
			echo '<td>' . $objet[$nom_champ] . '</td>';
			} */
	
		echo '</tr>';
		}
	echo '</table>';
	}

Comme on peut voir, j'en profite pour essayer de rendre mes tableaux accessibles aux personnes ayant une déficience visuel mais, déjà là, j'ai un petit soucis avec <caption> que j'aimerai ne pas voir sur ma page (1)!

Ensuite, il faut savoir que je construis un composant pour Joomla qui affichera des promo de courses à pieds, des classements, un calendrier, des fiches d'identité coureur, ...
Parlons du calendrier
J'ai un fichier PHP qui reprend toutes les requêtes nécessaires pour le bon fonctionnement que l'on peut voir ici et, pour l'affichage, la fonction proprement dite qui fera appel à la fonction plus haute:

function calendrier($mosConfig_lang, $link, $link2, $courseList, $class_Config) {
?>
<style type="text/css">
h1{
	color: <?php echo $class_Config['c_entete'];?>;
	font-size: 1.2em;
	border-bottom: 1px solid <?php echo $class_Config['c_entete'];?>;
	padding: 0 0 2px 5px;
	}

h2{
	color: <?php echo $class_Config['c_entete'];?>;
	font-size: 1.5em;
	padding: 0 0 2px 5px;
	}
</style>
if ($courseList != '') {
	echo '<br/><br/>';
	$restriction = array('course_id', 'pat_chal', 'epreuve_id', 'c_public', 'id', 'publier');
		
	$entete = array(
		date=>'<h2>' . constant('_PREFIXdate') . '</h2>',
		lieu=>'<h2>' . constant('_PREFIXlieu') . '</h2>',
		course=>'<h2>' . constant('_PREFIXcourse') . '</h2>',
		kilometrage=>'<h2>' . constant('_PREFIXkilometrage') . '</h2>',
		'<h2>' . constant('_PREFIXresultat') . '</h2>');
		
	$accessibilite = array(
		summary=>'Liste des évenements de l\'année',
		caption=>'Calendrier');
	$habillage = 'width="100%" border="1" cellspacing="0" cellpadding="2"';
	classement_html::tableau($courseList, $entete, $restriction, $habillage, $accessibilite);
	}// fin du if
}

Ensuite (2), je voudrai savoir comment m'y prendre pour coloriser les cellules ? Dans le tableau du bas (coder en 'dur'), j'avais fait en truc comme '<tr bgcolor="' . $bgcolor . '">' mais là je dois faire passer des class mais je n'arrive à les faire passer sans que ce soit tout le template qui en hérite !

Enfin (3), c'est peut-être plus dans ce forum mais au cas où quelqu'un sait, l'objectif final est de faire une classification par moi, en dur, j'avais su faire cela mais là via la fonction, je bloque Smiley bawling

Merci
Modifié par sebe (02 Mar 2008 - 13:40)
Administrateur
Bonjour,

est-ce qu'on peut voir le résultat de ta fonction PHP quelque part? Le code PHP lui-même ne nous est pas très utile, seul le code généré (HTML) l'est pour pouvoir le styler en CSS Smiley cligne (on ne sait pas à quoi ressemblent les variables avec lesquelles est appelée la fonction, le code HTML est fragmenté et disséminé au milieu d'instructions PHP et il faut suivre pas-à-pas les boucles pour comprendre ce que fait la fonction: autant regarder le résultat directement!)

Pour ne pas afficher le caption, autant ne pas le générer. Tu peux rajouter une option ou bien un test (si la variable caption est non vide alors générer <caption>$caption</caption> sinon ... rien.

Pour (3), tu peux trier avant l'appel à la fonction tes données. Ou bien les trier dans la fonction si c'est systématiquement à trier, au choix. Regarde du côté des fonctions sort et des nombreuses variantes. Si tes données sont stockées dans une base de données (MySQL au hasard), alors autant le faire faire directement par la BDD, c'est nettement plus efficace.
Salut,

Oui on peut voir ici la fonction calendrier en action ... c'est le tableau du haut
J'ai changé quelques bricoles (enfin je fais des essaies car je n'y connais pas grand chose en css !)

<style type="text/css">
caption{
	visibility: hidden;
	}
.table{
	/*width:100%;*/
	/*background-color: #ffffff;*/
	border : 2px solid;
	border-collapse:collapse;
	spacing: 0px;
	padding: 2px;
	/*border-width:1px; 
border-style:solid; 
border-color:black;*/
	}
.th{
border:2px solid;
spacing: 10px;

}
.td{
border:1px solid;
spacing: 10px;

}

</style>

<?php

//http://forum.alsacreations.com/topic-4-33136-1-CSS-pour-une-fonction-tableau.html#copy
	$habillage= '';
	echo '<table summary="' . $accessibilite[summary] . '" class="table">';
	//echo '<table summary="' . $accessibilite[summary] . '"' . $habillage . '>' . "\n";
	echo '<caption>' . $accessibilite[caption] . '</caption>' . "\n";

	//l'entete du tableau
	echo '<tr class="table">';
	$i = 1;
	foreach($entete as $libelle){
		echo '<th id="t' . $i . '" class="th">' . $libelle . '</th>';
		$i ++;
		}
	echo '</tr>';

	//les donnees
	//les lignes
	while(list(, $objet) = each($list)){
		echo '<tr>';
		
		//les colonnes à partir de l'entête
		$i = 1;
		foreach($objet as $name => $value) {
			if(!in_array($name, $restriction)) {
				echo '<td headers = "t' . $i .'" class="td">' . $value . '</td>';
				$i ++;
				}
			}
	
		//les colonnes à partir de l'entête
		/*foreach($entete as $nom_champ => $libelle_entete) {
			echo '<td>' . $objet[$nom_champ] . '</td>';
			} */
	
		echo '</tr>';
		}
	echo '</table>';
	}

On peut remarquer que j'ai du faire un truc comme 'class="tr"' et mettre un point dans la feuille de style pour éviter que mon template hérite de ce que j'essaye de faire pour une page !

Par rapport à '<caption>$caption</caption>', je ne comprends pas bien ! C'est seulement pour l'accessibilité ? Pas besoin d'être visible ? Enfin, je ne comprend pas vraiment !

Pour (3), la génération dynamique de style ... je ne comprend pas ton explication.

Merci beaucoup
Sujet clos
Aller à