Comment remplacer la balise <font> obsolète ?

[Jean22]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : sans objet
Lien du forum : http://amicalementfrison.forumactif.org/

Description du problème

Bonjour

Je suis toujours en train d'étudier le html afin de créer ma newsletter et, suite à l'intervention de Neptunia j'ai un soucis !
En effet Neptunia m'a informé du caractère obsolète de la balise <font> :

"Bah là, la balise <font> est obsolète depuis HTML 4.01, c'est à dire depuis 1997. Sacrée performance pour un logiciel dont la première version date de 2008.
Enfin, venant d'un ancien salarié de Google, je ne devrais pas me montrer aussi exigeante.
Une balise dépréciée/obsolète, c'est un peu comme la balise non standard, chaque navigateur fait comme ça lui chante si ce n'est que de l'obsolète passera un peu mieux (parce qu'il a été standard un jour et par conséquent bien implanté parmi les navigateurs)"

Or je ne trouve rien pour remplacer cette balise, ce qui ne veut pas dire que cela n'existe pas ! Même dans le tuto du forum la balise <font> est utilisée. "Le HTML – Comment ça marche ?" et comme il date de 2011 je ne comprends pas !
Dans ce site de 2004 les différentes balises sont répertoriées :

http://www.startyourdev.com/html/tag-html-index

Puis-je faire confiance ?

Je ne désire pas utiliser de CSS ...

Autre soucis l'attribut "align" ne devrait pas non plus être utilisé ainsi que "background" ... mais que l'on trouve partout ! Difficile de comprendre et d'apprendre !

Pouvez-vous m'expliquer ou me donner un lien de site sérieux et "à jour" ?

Merci d'avance
Jean

[*Splash*]

Hi,
Article à lire ici > Clique

[Jean22]

Merci Splash ... oui j'ai lu cet article et c'est même là que j'ai trouvé le caractère obsolète de "background" et "align" ...
et tout cela est remplacé par l'utilisation de la feuille de style CSS !
Cela me pose un problème car la feuille de style de mon forum est largement utilisée par celle du carrousel de ma page d'accueil (créé par un admin que j'ai nommé et qui est un peu aux abonnés absents ! C'est la raison de mes galères d'ailleurs ...)

[*Splash*]

En cas de feuille de style qui arrive à saturation, 2 alternatives existent, ici Clique ou encore ici Clique

[Jean22]

Bon, je vais essayer ... et te remercie beaucoup ! Je ne garantie pas mon résultat mais j'essaie de faire pour le mieux en comprenant ce que je fais ...

J'Edite : en effet je viens de réagir ...

Tu dis "...arrive à saturation" ce qui sous entend que l'on peut rajouter des lignes à une feuille de style existante sans que cela perturbe ce qui existait ?
La feuille de style existant sur mon forum est conséquente mais je ne sais pas si on peut y rajouter quelque chose ! En fait j'avais peur de rajouter des lignes ne voulant pas détériorer le carrousel !

[*Splash*]

Tu dis "...arrive à saturation" ce qui sous entend que l'on peut rajouter des lignes à une feuille de style existante  sans que cela perturbe ce qui existait ?

Bien sûr c'est même son utilité première, à lire > Clique

[Jean22]

Encore merci !
C'est difficile de tout bien intégrer surtout quand les informations sont parfois un peu contradictoires car laquelle est la bonne ?
J'utilise aussi ce site qui date de 2019 :
http://formation.upyupy.fr/html-xhtml/mise-en-forme/

[Neptunia]

Bonjour Fred et Jean22

Sur un plan strictement théorique, nous devrions effectivement réserver le code HTML à la structure de la page, et le CSS pour styler les éléments de la page.
Dans la pratique, c'est différent pour tout un tas de raisons. Une raison simple serait que le posteur n'ait pas la possibilité de charger une feuille CSS dans son message.

Repartons sur la balise <font> avec un exemple réel.

Lien externe du rendu d'un tableau : Stop ou encore - Version 2019
Ici il s'agit d'un tableau inclus dans un message sur un forum, nous sommes donc obligés de composer avec ce que l'administrateur nous permet d'utiliser.

Le code partiel reprenant deux lignes du tableau :

Code:

<table class="NepStopMore" style="border-collapse: separate; border-spacing: 20px 10px; background-color: #CCCCCC; width: 90%; margin: 20px auto; border-width: 3px; border-color: #FF0000; border-style: solid; border-radius: 10px;"  cellspacing="20" cellpadding="3">
<caption style="text-align:center; font-size: 25px; margin-bottom:10px; padding: 5px;background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #FF0000; border-style: solid; border-radius: 10px; ">Séries des chaînes étasuniennes 2019 : Stop ou encore ?</caption>
<thead style="text-align:center; font-size: 17px;">
<tr>
<th style=" width: 45%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Nom français de la série</th>
<th style=" width: 15%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; 10px; border-radius: 10px; ">Chaîne TV</th>
<th style=" width: 15%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Statut</th>
<th style=" width: 25%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Date de la décision</th>
</tr>
</thead>
<tbody style="text-align:center;">
<tr class="NepMore">
<td>Younger</td>
<td>Paramount Network</td>
<td>Renouvelée [6]</td>
<td>04.06.2018</td>
</tr>
<tr class="NepStop">
<td>Z Nation</td>
<td>Syfy</td>
<td>Annulée [5]</td>
<td>22.12.2018</td>
</tr>
</tbody>
</table>

SVP pas de "Ca doit être compliqué à faire" ou "C'est trop beau". Comme la plupart des français je ne mange pas de code au petit déjeuner, juste du pain, de la margarine et de la confiture. Pour faire mon tableau, j'ai cherché un générateur de tableaux et ensuite j'ai juste adapté le code pour le rendre compatible avec mes envies.
Rien que la définition de la table :

Code:

<table class="NepStopMore" style="border-collapse: separate; border-spacing: 20px 10px; background-color: #CCCCCC; width: 90%; margin: 20px auto; border-width: 3px; border-color: #FF0000; border-style: solid; border-radius: 10px;"  cellspacing="20" cellpadding="3">

Une class, et tout le reste c'est du style, donc c'est du CSS

Mais copier ce code sur un forum serait décevant parce qu'en dehors des éléments qui n'apparaissent qu'une fois sur la page, j'ai transféré une partie du CSS dans la feuille de style du forum. L'admin du forum en question est tellement chouette qu'elle me permet d'accéder à son panneau d'administration. Enfin plutôt à mon panneau d'administration.

L'une de mes entêtes de colonne :

Code:

<th style=" width: 45%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Nom français de la série</th>

On définit une couleur de texte (color), une largeur (border-width), une couleur (border-color) et un style de bordure (border-style). On pourrait tout aussi bien définir une police (font-family) ou une taille de police (font-size).

Maintenant mon tableau j'aimerais le poster ailleurs, mais l'admin est un peu moins sympa, il me laisse pas accéder à son PA.
Bah on va faire autrement :
Page externe de rendu d'un tableau : Stop ou encore - Version 2018

A première vue c'est la même chose mais dans les faits le code est différent :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TON TITRE</title>   

    <style type="text/css">

/* TABLEAU STOP OU ENCORE */
.NepStopMore td {
   background-color: #F2ECD5;
   border: 1px solid #000000;
   border-radius: 10px;
   }
.NepStopMore td:nth-child(1) {
   text-align: left;
   padding-left: 20px;
   }

.NepStopMore tr.NepMore td {
   background-color: #88F28F;
   }
.NepStopMore tr.NepStop td {
   background-color: #DC6154;
   }
/* FIN TABLEAU STOP OU ENCORE */

    </style>

  </head>

      <body>

<table id="myTable" class="NepStopMore" style="border-collapse: separate; border-spacing: 20px 10px; background-color: #CCCCCC; width: 90%; margin: 20px auto; border-width: 3px; border-color: #FF0000; border-style: solid; border-radius: 10px;"  cellspacing="20" cellpadding="3">
<caption style="text-align:center; font-size: 25px; margin-bottom:10px; padding: 5px;background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #FF0000; border-style: solid; border-radius: 10px; ">Séries des chaînes étasuniennes 2018 : Stop ou encore ?</caption>
<thead style="text-align:center; font-size: 17px;">
<tr>
<th onclick="sortTable(0)" style="cursor: pointer; width: 45%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Nom français de la série</th>
<th onclick="sortTable(1)" style="cursor: pointer; width: 15%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; 10px; border-radius: 10px; ">Chaîne TV</th>
<th onclick="sortTable(2)" style="cursor: pointer; width: 15%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Statut</th>
<th onclick="sortTable(3)" style="cursor: pointer; width: 25%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Date de la décision</th>
</tr>
</thead>
<tbody style="text-align:center;">
<tr class="NepMore">
<td>9-1-1</td>
<td>Fox</td>
<td>Renouvelée [2]</td>
<td>16.01.2018</td>
</tr>
<tr class="NepStop">
<td>9JKL (Inédit francophonie)</td>
<td>CBS</td>
<td>Annulée [1]</td>
<td>12.05.2018</td>
</tr>
</tbody>
</table>
<script type="text/javascript">function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;     
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}</script>
      </body>

</html>

Ici nous avons droit à la page HTML complète (avec balises html head et body) et comme je passe par les pages HTML, j'en profite pour insérer mon style dans le header de la page. Et comme je passe par une page HTML, je peux aussi utiliser du javascript. Ici si on clique sur le titre d'une colonne, on trie le tableau dans l'ordre croissant de la valeur de la colonne

[Jean22]

Bonjour Neptunia et merci pour ces explications que je vais étudier dans le détail ... Je n'avais pas vu la réponse hier ...

Hier j'ai enfin compris que je pouvais rajouter des codes à ma feuille de style ... j'avais peur d'y toucher et provoquer un défaut de fonctionnement du carrousel de la page d'accueil !

J'édite :
"Générateur de tableau" ? Je ne savais pas que cela existait ! Une préférence car je viens de voir qu'il y en a beaucoup ?

[*Splash*]

Hier j'ai enfin compris que je pouvais rajouter des codes à ma feuille de style ... j'avais peur d'y toucher et provoquer un défaut de fonctionnement du carrousel de la page d'accueil !

Quoi qu'il arrive rien ne t'empêche de supprimer un code récemment ajouté

[Jean22]

Merci Splash ! Oui mais ... maintenant je le sais !

Et, dans l'exemple de Neptunia (en bas du message) je vois qu'il y a insertion du style dans le header de la page !
Si vous saviez tout ce que j'ingurgite depuis ces deux (?) dernières semaines ...

Merci pour votre aide !

J'édite :

Dans le cadre de mon infolettre (j'ai découvert le nom aussi !) c'est quand même beaucoup plus simple puisque ne s'agissant en fait que d'un tableau incluant soit une image soit un texte avec lien vers le topic du forum ...

Autre question : faut-il inclure une balise de désabonnement ou c'est généré lors de l'envoi ?

J'édite :

Une fois que j'aurai réalisé mon infolettre pourrai-je la soumettre à votre critique ici ? Merci d'avance ...

[Neptunia]

Pour le générateur de tableau, l'idéal c'est d'en prendre un qui, avant de remplir quoi que ce soit, vous fournit quelques aperçus.

Parce que si c'est pour utiliser un générateur simpliste qui vous demande juste le nombre de lignes et de colonnes, le générateur va certes faire le boulot, mais en règle générale quand on parle de tableau, on pense aux cellules et donc au quadrillage.
Et rajouter des bordures aux cellules d'un tableau, ça prend du temps.

Sans garantie il me semble que j'étais passée par ce site : https://papyclic-design.blog4ever.com/generateur-de-tableaux

Et si c'est bien par ce générateur que je suis passée, l'essentiel de mon travail aura consisté à en optimiser le code. Celui fourni était fonctionnel et respectueux des standards mais très répétitif (comme sur la plupart des générateurs de code d'ailleurs). Par exemple il me configurait les arrondis et le style de bordure pour chaque cellule. Détail qui peut avoir son importance lorsqu'il s'agit de poster dans un message (dont la longueur totale est de l'ordre de 65.000 caractères environ. Mon tableau devant atteindre 3 à 400 lignes, récupérer 50 caractères par cellule (pour basculer le tout dans une feuille CSS) peut vite s'avérer indispensable.

Concernant le mot infolettre, et bien je parle français avec l'accent français, mais je l'écris avec l'accent québécois parce que j'ai horreur des anglicismes quand il existe un mot bien de chez nous pour dire la même chose. Mais vous verrez bien plus souvent le mot newsletter ou email de masse.

[Jean22]

Etant donné mon âge le "papyclic" me convient bien !

J'y suis allé et j'aime bien ... merci !

L'accent québécois me convient bien, familialement lié à la Saskatchewan ...

[Jean22]

Bonjour

Après avoir essayé de réaliser "quelque chose qui fonctionne" mais pas forcément très beau puis-je vous demander avant d'envoyer cette infolettre de regarder et commenter ma "prose" ?
Je vous remercie d'avance !
Cordialement,
Jean

Code:



<!-- ------------ Code CSS ---------- -->
<style type="text/css">
table.infolettre{
 background-color: #919191;
 width: 100%;
 margin: 20px auto;
border-collapse: collapse;
 border-width: 0px;
 border-color: #919191;
 border-style: solid;
}

.infolettre caption{
 
 text-align:center;
 font-size: 25px;
 font-family: all;
 margin-bottom:0px;
 padding: 5px;
 background-color: #919191;
 color: #000000;
 border-width: 0px;
 border-color: #919191;
 border-style: solid;
 font-weight:bold;
}

.infolettre thead {
 
 text-align:center;
 background-color:#919191;
 font-size: 17px;
 display:none;
}

.infolettre th {
 
 width: 50%;
 background-color:#919191;
 color: #919191;
 border-width: 0px;
 border-color: #000099;
 border-style: solid;
}

.infolettre tbody {
 
 text-align: center;
 font-size: 14px;
 font-family: all;
 color: #919191;
}

.infolettre td {

 width: 50%;
 background-color: #919191;
 border-width: 1px;
 border-color: #000099;
 border-style: solid;
 color: #000099;
 font-size: 15px;
 text-align:center;
 font-weight:bold;

}
</style>
</head>
 <body>
<!-- ------------ Code HTML ---------- -->

<table class="infolettre">
 <caption>Infolettre du mois de mars 2019
 <div>
 <img src="https://i.servimg.com/u/f31/14/27/25/95/amical10.jpg">
 </div>
 </caption>
 <tbody>
 <tr>
 <td>
 <div>
 <img src="https://i.servimg.com/u/f31/14/27/25/95/haslan11.jpg">
 </div>
 </td>
 <td>
 <h3>Les aventures d'Haslane</h3>
 <blockquote>"Comme tous les soirs c’est parti pour l’exercice des petons mais je remarque un caillou coincé sous l’antérieur gauche. Je tente de l’enlever avec mon pouce ...coincé ! Bon...bah..c’est parti on va tenter. Et me voilà de retour avec l’objet mystère du jour le cure pied ! « C’est quoi ?? Non je déconne j’m’en fiche... en fait ça a l’air nul ton truc ^^ ».</blockquote>
 <blockquote>"Cette pouliche m’impressionne chaque jour. Elle se fout de tout ! Non mais vraiment !! Quel bonheur !"</blockquote>
 <a href="https://amicalementfrison.forumactif.org/t2376p50-haslane-d-aure-ma-princesse" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 </tr>
 <tr>
 <td>
 <h3>Hilke et Jo ...</h3>
 <p> Après un début de relations difficiles tout s'arrange pour Hilke et Jo ...</p>
 <p> ...qui vont finir par devenir des inséparables !</p>
 <a href="https://amicalementfrison.forumactif.org/t865p800-hilke" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 <td>
 <div>
 <img src="https://i.servimg.com/u/f31/14/27/25/95/hilke_12.jpg">
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div>
 <img src="https://i.servimg.com/u/f31/14/27/25/95/frankl10.jpg">
 </div>
 </td>
 <td>
 <h3>Le géant "Franklin", un amour de shire ...</h3>
 <p>Chez Elodie le géant shire, Metheringham, alias Franklin,</p>
 <p> qui n'a que 21 mois, est d'une douceur infinie ...
 </p>
 <a href="https://amicalementfrison.forumactif.org/t1986p50-metheringham-upton-franklin-alias-helios-poulain-shire" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 </tr>
 <tr>
 <td>
 <h3>Première chute pour Charlotte !</h3>
 <p>Et oui cela arrive aussi ...
 </p>
 <a href="https://amicalementfrison.forumactif.org/t710p600-uranie-moi-video-de-la-premiere-monte-page-10" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 <td>
 <div>
 <img src="https://i.servimg.com/u/f31/14/27/25/95/uranie10.jpg">
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div align="center">
 <img src="https://i.servimg.com/u/f31/14/27/25/95/onette10.jpg">
 </div>
 </td>
 <td>
 <h3>La vie suit son cours pour Onette et Gina ... </h3>
 <p>Tout est paisible chez Helma avec ses protégées Onette et Gina ...
 </p>
 <a href="https://amicalementfrison.forumactif.org/t280p50-onette-et-la-belle-vie" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 </tr>
 <tr>
 <td>
 <a href="https://amicalementfrison.forumactif.org/" onclick="window.open(this.href);return false">https://amicalementfrison.forumactif.org/</a>
 </td>
 
 </tr>
 
 </tbody>
</table>
 </body>
</html>


J'édite : désolé d'avoir envoyé 2 posts successifs ...

[Invité]

Hello Jean22,

si c'est une page html que tu viens de créer, tu as oublié les entêtes html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

 

Ajouté les fermetures des balises d'image.

Code:

  <img src="https://i.servimg.com/u/f31/14/27/25/95/hilke_12.jpg">

Par:

Code:

  <img src="https://i.servimg.com/u/f31/14/27/25/95/hilke_12.jpg"/>

Ta page complète :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
 
<!-- ------------ Code CSS ---------- -->
<style type="text/css">
table.infolettre{
 background-color: #919191;
 width: 100%;
 margin: 20px auto;
border-collapse: collapse;
 border-width: 0px;
 border-color: #919191;
 border-style: solid;
}
 
.infolettre caption{
 
 text-align:center;
 font-size: 25px;
 font-family: all;
 margin-bottom:0px;
 padding: 5px;
 background-color: #919191;
 color: #000000;
 border-width: 0px;
 border-color: #919191;
 border-style: solid;
 font-weight:bold;
}
 
.infolettre thead {
 
 text-align:center;
 background-color:#919191;
 font-size: 17px;
 display:none;
}
 
.infolettre th {
 
 width: 50%;
 background-color:#919191;
 color: #919191;
 border-width: 0px;
 border-color: #000099;
 border-style: solid;
}
 
.infolettre tbody {
 
 text-align: center;
 font-size: 14px;
 font-family: all;
 color: #919191;
}
 
.infolettre td {
 
 width: 50%;
 background-color: #919191;
 border-width: 1px;
 border-color: #000099;
 border-style: solid;
 color: #000099;
 font-size: 15px;
 text-align:center;
 font-weight:bold;
 
}
</style>
</head>
 <body>
<!-- ------------ Code HTML ---------- -->
 
<table class="infolettre">
 <caption>Infolettre du mois de mars 2019
 <div>
  <img src="https://i.servimg.com/u/f31/14/27/25/95/amical10.jpg"/>
 </div>
 </caption>
 <tbody>
 <tr>
 <td>
 <div>
  <img src="https://i.servimg.com/u/f31/14/27/25/95/haslan11.jpg"/>
 </div>
 </td>
 <td>
 <h3>Les aventures d'Haslane</h3>
 <blockquote>"Comme tous les soirs c’est parti pour l’exercice des petons mais je remarque un caillou coincé sous l’antérieur gauche. Je tente de l’enlever avec mon pouce ...coincé ! Bon...bah..c’est parti on va tenter. Et me voilà de retour avec l’objet mystère du jour le cure pied ! « C’est quoi ?? Non je déconne j’m’en fiche... en fait ça a l’air nul ton truc ^^ ».</blockquote>
 <blockquote>"Cette pouliche m’impressionne chaque jour. Elle se fout de tout ! Non mais vraiment !! Quel bonheur !"</blockquote>
 <a href="https://amicalementfrison.forumactif.org/t2376p50-haslane-d-aure-ma-princesse" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 </tr>
 <tr>
 <td>
 <h3>Hilke et Jo ...</h3>
 <p> Après un début de relations difficiles tout s'arrange pour Hilke et Jo ...</p>
 <p> ...qui vont finir par devenir des inséparables !</p>
 <a href="https://amicalementfrison.forumactif.org/t865p800-hilke" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 <td>
 <div>
  <img src="https://i.servimg.com/u/f31/14/27/25/95/hilke_12.jpg"/>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div>
  <img src="https://i.servimg.com/u/f31/14/27/25/95/frankl10.jpg"/>
 </div>
 </td>
 <td>
 <h3>Le géant "Franklin", un amour de shire ...</h3>
 <p>Chez Elodie le géant shire, Metheringham, alias Franklin,</p>
 <p> qui n'a que 21 mois, est d'une douceur infinie ...
 </p>
 <a href="https://amicalementfrison.forumactif.org/t1986p50-metheringham-upton-franklin-alias-helios-poulain-shire" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 </tr>
 <tr>
 <td>
 <h3>Première chute pour Charlotte !</h3>
 <p>Et oui cela arrive aussi ...
 </p>
 <a href="https://amicalementfrison.forumactif.org/t710p600-uranie-moi-video-de-la-premiere-monte-page-10" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 <td>
 <div>
  <img src="https://i.servimg.com/u/f31/14/27/25/95/uranie10.jpg"/>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div align="center">
  <img src="https://i.servimg.com/u/f31/14/27/25/95/onette10.jpg"/>
 </div>
 </td>
 <td>
 <h3>La vie suit son cours pour Onette et Gina ... </h3>
 <p>Tout est paisible chez Helma avec ses protégées Onette et Gina ...
 </p>
 <a href="https://amicalementfrison.forumactif.org/t280p50-onette-et-la-belle-vie" onclick="window.open(this.href);return false">En savoir plus</a>
 </td>
 </tr>
 <tr>
 <td>
 <a href="https://amicalementfrison.forumactif.org/" onclick="window.open(this.href);return false">https://amicalementfrison.forumactif.org/</a>
 </td>
 
 </tr>
 
 </tbody>
</table>
 </body>
</html>

Et voilou .

a++

[Jean22]

Merci beaucoup Milouze14 ...

Bon, il n'y a pas trop de dégât ... Je craignais ! Mais avec les explications de Neptunia cela m'a fait comprendre pas mal de choses plus des infos piochées sur ton site ... J'espère faire quelque chose de plus sympa la prochaine fois ! Il faut un début à tout ...

Merci encore !

[Invité]

Re,
de rien mon ami,il faut bien commencer un jour .

a++

[Jean22]

Je profite ... Peux-tu me dire à quoi servent les balises <tbody></tbody> qui posent un soucis dans l'éditeur du forum ?
Puis-je les retirer ?

[Invité]

Re,
ce sont des balises d'entête de tableau.

Puis-je les retirer ?

Juste les doublons .

a++

[Jean22]

Encore merci ...

Sujet résolu !