CSS pour une fonction tableau

01 mars 2008, 18:57

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:

Code : Tout sélectionner

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:

Code : Tout sélectionner

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

Merci

02 mars 2008, 02:42

Pour colorer une ligne de tableau, procède comme suit dans ta feuille de style :

Code : Tout sélectionner

tr {
  color: black;
  background: yellow;
}

Certes, il sera plus difficile de générer un style de façon dynamique.

Si tu veux progresser en CSS, je te recommande Alsacréations, ainsi que la spécification CSS du W3C, si l'anglais ne te fait pas peur.

03 mars 2008, 01:23

Salut,

Certes, il sera plus difficile de générer un style de façon dynamique.

J'ai la solution ... je cherchais à coloriser en fonction d'un type de course (pour info, ce type de course est mis en restriction dans mon tableau et n'apparaît pas dans une colonne proprement dit).
J'ai donc créer un style pour chacun des types:

Code : Tout sélectionner

.courseP{
	background-color: <?php echo $class_Config['c_pat'];?>;
	}
.courseC{
	background-color: <?php echo $class_Config['c_chal'];?>;
	}
.courseH{
	background-color: <?php echo $class_Config['c_hors_chal'];?>;
	}

et j'ai fait un petit changement dans ma fonction tableau pour:

	//les donnees
	//les lignes
	while(list(, $objet) = each($list)){
		echo '<tr class="course' . $objet->pat_chal . '">';

En quelque sorte, voici un css dynamique ... merci de m'avoir mis sur la voie !
[/code]

CSS pour une fonction tableau

Qui est en ligne