Base de connaissances

EverWeb n'a pas d'outil Insérer un tableau. La meilleure façon d'ajouter un tableau est de coller un petit morceau de code de tableau dans un Widget d'extrait HTML (HTML Snippet) : le texte reste du vrai texte que les moteurs de recherche et les lecteurs d'écran peuvent lire, et vous le modifiez simplement en changeant les mots. Vous pouvez aussi afficher une feuille Google Sheets, aligner des éléments avec un conteneur ou, en dernier recours, utiliser une image.

Quelle option choisir

Ajouter un tableau avec le widget d'extrait HTML

1. Ouvrez la page, cliquez sur l'onglet Widgets et faites glisser Widget d'extrait HTML sur la page.
2. Allez dans Inspecteur > Réglages des widgets, collez le code ci-dessous dans la zone Code HTML et cliquez sur Appliquer.
3. Laissez Embed Option (option d'intégration) sur Auto, ou choisissez Direct Embed (intégration directe). Ne choisissez pas External Frame (cadre externe) : les moteurs de recherche risquent de ne pas lire ce qu'il contient.
4. Cochez Adjust height to content (ajuster la hauteur au contenu) pour que la zone s'agrandisse à la taille du tableau.
5. Sur une page adaptative, placez le widget dans un conteneur, ou cochez Pleine largeur dans Inspecteur > Mesures, pour qu'il s'adapte à l'écran.
6. Cliquez sur Aperçu pour vérifier le résultat, puis publiez.

Voici une liste de prix que vous pouvez copier. Remplacez les mots et les prix par les vôtres :

<div class="ew-table">
<table>
  <caption>Prices</caption>
  <thead>
    <tr><th>Service</th><th>Time</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Haircut</td><td>30 minutes</td><td>$35</td></tr>
    <tr><td>Cut and colour</td><td>90 minutes</td><td>$95</td></tr>
    <tr><td>Children's cut</td><td>20 minutes</td><td>$20</td></tr>
  </tbody>
</table>
</div>
<style>
.ew-table { overflow-x: auto; }
.ew-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ew-table caption { text-align: left; font-weight: bold; padding: 8px 0; }
.ew-table th, .ew-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #dddddd; }
.ew-table thead th { background: #f2f2f2; }
.ew-table tbody tr:nth-child(even) { background: #fafafa; }
</style>

Comment le modifier :

• Ajouter une ligne : copiez une ligne entière qui commence par <tr> et se termine par </tr>, collez-la en dessous et changez les mots.
• Ajouter une colonne : ajoutez un <th>...</th> de plus à la ligne d'en-tête et un <td>...</td> de plus à chacune des autres lignes.
• Changer le titre : modifiez le texte dans <caption>, ou supprimez cette ligne si vous ne voulez pas de titre.
• Couleurs : remplacez #f2f2f2 (ligne d'en-tête) et #fafafa (une ligne sur deux) par vos propres couleurs.

Tableaux larges sur téléphone

La ligne overflow-x: auto permet à un tableau large de défiler horizontalement dans sa zone sur un téléphone, au lieu de comprimer toutes les colonnes. Pour un tableau avec beaucoup de colonnes, ajoutez min-width: 700px; à la ligne .ew-table table pour que les colonnes restent lisibles et que les visiteurs fassent défiler le tableau du doigt. Pour les téléphones, limitez si possible vos tableaux à environ quatre colonnes courtes.

Vous avez déjà le tableau dans Excel, Numbers ou Google Sheets ? Un « générateur de tableau HTML » (HTML table generator) en ligne peut transformer une feuille de calcul collée en code de tableau. Collez uniquement la partie <table> dans l'extrait.

Afficher une feuille Google Sheets

Pratique pour un calendrier de matchs ou un emploi du temps qui change chaque semaine : les modifications de la feuille apparaissent sur votre site Web peu de temps après, sans publier à nouveau.

1. Dans Google Sheets, choisissez Fichier > Partager > Publier sur le Web, cliquez sur l'onglet Intégrer, choisissez la feuille et cliquez sur Publier.
2. Copiez le code qui vous est fourni (il commence par <iframe).
3. Collez-le dans un widget d'extrait HTML comme ci-dessus. Dans le code, remplacez width="..." par width="100%" pour qu'il s'adapte à un téléphone.

Tout le monde peut voir une feuille publiée : n'y mettez donc pas d'informations privées. Les moteurs de recherche risquent de ne pas considérer la feuille comme faisant partie de votre page.

Aligner des éléments avec une ligne de conteneur

Pour quelques colonnes de texte sans quadrillage, comme une adresse à gauche et des horaires d'ouverture à droite, cliquez sur Conteneurs dans la barre d'outils, choisissez Ligne de conteneur et faites glisser une zone de texte dans chaque colonne. Dans Réglages des widgets > Afficher, réglez Retour à la ligne sur Retour à la ligne pour que les colonnes s'empilent sur un téléphone. Comme chaque colonne s'empile d'un seul bloc, cette méthode ne convient pas aux données qui doivent rester alignées en lignes. Consultez Créer une page adaptative avec des conteneurs pour qu'elle s'empile proprement sur un téléphone.

Une image d'un tableau (en dernier recours)

Vous pouvez créer le tableau dans Pages, Word ou Excel, l'enregistrer sous forme d'image et l'ajouter à la page. C'est rapide, mais les moteurs de recherche et les lecteurs d'écran ne peuvent pas lire les mots, le texte devient minuscule sur un téléphone, et chaque modification oblige à créer une nouvelle image. Si vous choisissez cette solution, décrivez le tableau dans le texte alternatif de l'image, et ajoutez un lien vers une copie PDF que les visiteurs peuvent agrandir et imprimer : consultez Comment créer un lien vers un PDF pour que les visiteurs puissent l'ouvrir ou le télécharger ?

Des développeurs tiers proposent aussi des widgets de tableau pour EverWeb, comme des tableaux de données, des grilles tarifaires et des tableaux avec recherche. Vous les trouverez sur la page des modules complémentaires EverWeb. Pour en installer un, consultez Installer et utiliser des widgets tiers dans EverWeb. C'est le créateur du widget qui en assure l'assistance.

Articles connexes

• Ajouter un calendrier de réservation, un fil Instagram ou un autre code externe avec le widget d'extrait HTML
• Créer une page adaptative avec des conteneurs pour qu'elle s'empile proprement sur un téléphone
• Rendre votre site Web accessible : texte alternatif, titres, texte des liens et contraste
• Ajouter une FAQ avec des questions qui s'ouvrent et se ferment (accordéon)
• Installer et utiliser des widgets tiers dans EverWeb