Médiaforma

All posts tagged tableau

Lorsqu’une ligne d’un tableau doit avoir une hauteur particulière, vous devez initialiser l’attribut height d’une de ses balises <td>. Ici par exemple, la hauteur de la première cellule de la première ligne est initialisée à 100px, ce qui fixe la hauteur de la première ligne à 100px.

Quant à la deuxième cellule de la deuxième ligne, sa hauteur est initialisée à 50px. La hauteur de la deuxième ligne est donc égale à 50px.

Supposons maintenant que vous vouliez fixer la hauteur de toutes les colonnes à 120 pixels. Il suffit pour cela de définir la propriété CSS height de la balise <td>. Insérez la balise <style> </style> entre les balises <head> et </head>, puis modifiez la propriété height de la balise <td>. Vous pouvez supprimer les attributs height des première et quatrième balises <td>, qui font doublons avec la redéfinition de la balise <td>.


Comme nous l’avons vu précédemment, la taille d’une cellule s’adapte à son contenu. Cependant, il est parfois nécessaire de fixer la taille d’une cellule (et donc de la colonne qui la contient) à une largeur bien précise. Vous utiliserez pour cela l’attribut HTML width, en précisant la dimension de la colonne en pixels.

Ici par exemple, la taille de la première colonne est fixée à 200 pixels. L’attribut width a été spécifié dans la première balise <td> de la colonne, mais il aurait tout aussi bien pu être spécifié dans la deuxième balise <td> de cette colonne.

Supposons maintenant que vous vouliez fixer la taille de toutes les colonnes à 200 pixels. Comment procèderiez-vous ? La première idée qui vient à l’esprit consiste à insérer un attribut width dans chacune des cellules d’une colonne. Cette technique fonctionne, mais elle n’est pas très élégante. Dans la rubrique précédente, je vous ai montré que le CSS pouvait s’avérer très efficace pour agir globalement sur un document. Ici, c’est précisément ce que nous cherchons à faire puisque toutes les cellules doivent avoir une largeur de 200 pixels. La solution devient alors évidente : il suffit de modifier le style de la balise <td>.

Insérez la balise <style> </style> entre les balises <head> et </head>, puis modifiez la propriété width de la balise <td>. Vous pouvez supprimer l’attribut width de la première balise <td>, qui fait doublon avec la redéfinition de la balise <td>.


Dans la rubrique précédente, vous avez appris à définir une bordure personnalisée pour un tableau. Dans cette rubrique, nous allons voir comment définir une bordure personnalisée pour chacune des cellules du tableau. Pour cela, il va falloir modifier le style de la balise <td>.

Commencez par insérer une balise <style> </style> entre les balises <head> et </head>, et définissez le type de la balise <style> à “text/css”. Pour modifier le style de la balise <td>, il suffit d’écrire td entre les balises <style> et </style> et d’énumérer les caractéristiques de la balise <td> entre des accolades. Ici, toutes les balises <td> auront une couleur rouge pointillée épaisse de 5 pixels.

Avec cet exemple élémentaire, vous commencez à percevoir le potentiel des instructions CSS. Le simple fait d’avoir modifié le style de la balise <td> entre les balises <style> et </style> s’applique à tout le document.

Un dernier détail : pour éviter d’avoir des bordures répétées entre les cellules, il suffit de définir la propriété CSS border-collapse de la balise <table> et de lui affecter la valeur collapse.


L’attribut border de la balise <table> affiche une bordure autour des cellules d’un tableau. En remplaçant cet attribut par quelques propriétés CSS, vous allez pourvoir choisir la couleur, l’épaisseur et la forme de la bordure.

Voici les propriétés à utiliser :

  • border-color pour choisir la couleur de la bordure. Vous pouvez utiliser une couleur prédéfinie, comme blue ou red, ou un code RVB hexadécimal précédé du signe #, comme #451244 ;
  • border-width pour choisir l’épaisseur de la bordure. Cette propriété peut prendre les valeurs thin, medium ou thick ou être définie en pixels (px), points (pt) ou une autre unité de mesure quelconque;
  • border-style pour choisir la forme de la bordure : dashed, dotted, double, solid, .inset, groove, ridge ou outset.

Dans cet exemple, la bordure est de couleur rouge, épaisse de 5 pixels et pointillée.

Entrainez-vous à utiliser d’autres valeurs pour les trois propriétés CSS border et examinez le résultat obtenu.

Ne voyez-vous pas quelque chose d’étrange dans cette bordure ? Elle entoure le tableau, mais pas les cellules qui le composent. Ceci est tout à fait normal puisque l’attribut style a été spécifié dans la balise <table> et non dans les différents <td>. Pour résoudre élégamment ce problème, vous devez modifier le style de la balise <td>. Cette technique sera étudiée dans la rubrique suivante.


La fonction shuffle() mélange automatiquement les éléments du tableau qui lui est passé en argument.
Faites une pause dans la vidéo. Saisissez ce code et sauvegardez-le :

<?php
 $nombres = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
 shuffle($nombres);
 foreach($nombres as $element)
 echo $element."<br>";
?>

Exécutez-le en utilisant WAMP Server. Comme vous pouvez le voir, les nombres sont mélangés de façon aléatoire.
Appuyez sur la touche F5 pour rafraîchir la page, les nombres sont à nouveau mélangés aléatoirement.

 


Énoncé de l’exercice

Définissez une fonction qui filtre les adresses mail afin de n’afficher que les adresses valides.

Les adresses à filtrer se trouvent dans ce tableau numéroté :

$adresses = array("nom.com", "nom@fai.com", "nom@fai", "nom.prenom@fai.com", "nom@fai.fr", "nom@t.fr");

Pour qu’une adresse mail soit considérée comme valide, elle doit respecter les trois conditions suivantes :

  • Contenir un caractère “@”
  • Contenir au moins un caractère “.”
  • Comporter au moins trois caractères entre le @ et le dernier point

Pour résoudre ces problèmes, vous aurez besoin des fonctions suivantes :

  • strpos(chaine, rech) qui retourne la première position de rech dans chaine
  • strrpos(chaine, rech) qui retourne la dernière position de rech dans chaine

Solution

Faites une pause dans la vidéo pour vous permettre de saisir le code. Poursuivez la vidéo pour voir la solution.

Dans un premier temps, le tableau $adresses est défini.

Dans un deuxième temps, le tableau est filtré avec la fonction array_filter.

Enfin, dans un troisième temps, les données contenues dans le tableau filtré, c’est-à-dire les adresses e-mail valides, sont affichées.

Examinons la fonction filtreEmail.

Le caractère @ est recherché dans la chaîne passée en argument. Si le résultat retourné pat la fonction strpos est nul, le caractère @ n’a pas été trouvé.

La position du dernier point dans la chaîne est alors recherchée avec la fonction strrpos.

Si le caractère @ a été trouvé, si un point décimal a été trouvé et s’il est distant du @ d’au moins trois caractères, l’adresse email est considérée valide. La valeur true est alors retournée. L’adresse email est donc conservée dans le tableau résultat.

Dans le cas contraire, l’adresse email est invalide. Dans ce cas, la valeur false est retournée, ce qui provoque la suppression de l’adresse du tableau résultat.

<?php
  function filtreEmail($data){
    $arobas = strpos($data, "@");
    $dernierPoint = strrpos($data,".");
    if (($arobas!=false) &&
      ($dernierPoint!=false) &&
      ($dernierPoint - $arobas >= 3))
    return true;
    else
    return false;
  }

  $adresses = array("nom.com", "nom@fai.com", "nom@fai", "nom.prenom@fai.com", "nom@fai.fr", "nom@t.fr");
  $adressesValides = array_filter($adresses, "filtreEmail");
  foreach($adressesValides as $element)
    echo $element."<br>";
?>

 


Supposons que vous récupériez de nombreuses données dans un tableau. Certaines de ces données sont peut-être erronées ou ne présentent aucun intérêt pour vous. Vous pouvez les filtrer en utilisant la fonction array_filter() :

array_filter($tableau, fonction);

où tableau est le tableau à filtrer et fonction est une chaîne qui représente le nom d’une fonction appliquée à chaque élément du tableau. Si la valeur retournée par la fonction est true, l’élément est retenu. Dans le cas contraire, l’élément n’est pas retenu.

Exemple sur un tableau numéroté

<?php
  function afficheImpair($data){
    return ($data & 1);
}

  $tableau = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
  $tableau_filtre = array_filter($tableau,"afficheImpair");
  foreach($tableau_filtre as $element)
    echo $element."<br>";
?>

Remarque

La fonction afficheImpair() doit retourner une valeur égale à true pour les nombres impairs et à false pour les nombres pairs. En effectuant un ET logique entre l’élément du tableau et 1 ($data & 1), c’est bien ce qui est retourné par la fonction.

Prenons le nombre impair 15. Sa version binaire est 00001111. Si nous effectuons un ET logique avec 00000001, le résultat est différent de 0, et donc égal à true. Prenons le nombre pair 12. Sa version binaire est 00001100. Si nous effectuons un ET logique avec 00000001, le résultat est nul, et donc égal à false. Il est facile d’étendre ce raisonnement à tous les nombres pairs et impairs.

Exemple sur un tableau associatif

Le principe est le même, mais ici, le tableau est filtré sur les valeurs des couples clé=>valeur :

<?php
  function afficheImpair($data){
    return ($data & 1);
}

  $tableau = array("un"=>1, "deux"=>2, "trois"=>3, "quatre"=>4, "cinq"=>5);
  $tableau_filtre = array_filter($tableau,"afficheImpair");
  foreach($tableau_filtre as $cle=>$valeur)
    echo $cle."<br>";
?>