Coordonnées GPS avec HTML / CSS

ou comment faire une jolie présentation des Coordonnées GPS avec HTML / CSS

ADRESSE
🧭	Latitude	Longitude
DD	48.8533333	2.34861111
DMS	48° 51′ 12,24845″ N	2° 20′ 55,62563″ E

Parvis de la Cathédrale Notre Dame de Paris

DD (degrés décimaux)
DMS (degrés, minutes, secondes)

Une idée dans la tête ...

Il y a quelques jours j'ai demandé aux générateurs de texte par IA (intelligence artificielle) de me faire du code HTML / CSS original pour afficher les coordonnées GPS sur mon blog. J'ai essayé ChatGPT, DeepSeek et Mistral AI après une trentaine de prompts (instructions) on ou une série de données fournies à un système d'IA, qui utilise ces informations pour générer des réponses ou des créations en texte, image, ou autre forme de média) j'ai failli abandonner l'idée.

Alors j'ai eu l'idée d'envoyer a Claude une image réalisée avec Paint (Microsoft) de deux barres horizontales croisées de deux barres verticales. En quelques secondes Claude me retourne "Vous voulez afficher un jeux Tic-Tac-Toe aussi appelé « morpion » en HML / CSS voici ce code à adapter selon vos besoins :

HTML

Code HTML à coller ou vous pouvez juste après <body>

<table class="grid-table-gps">
    <caption>ADRESSE</caption>
    <tbody>
        <tr>
            <td class="text-right">
                🧭
            </td>
            <td class="text-left">
                <strong>Latitude</strong>
            </td>
            <td class="text-left">
                <strong>Longitude</strong>
            </td>
        </tr>
        <tr>
            <td class="text-right">
                <strong>DD</strong>
            </td>
            <td class="text-left">
                AAA
            </td>
            <td class="text-left">
                BBB
            </td>
        </tr>
        <tr>
            <td class="text-right">
                <strong>DMS</strong>
            </td>
            <td class="text-left">
                CCC
            </td>
            <td class="text-left">
                DDD
            </td>
        </tr>
    </tbody>
</table>

CSS

Le code CSS à coller dans votre feuille de styles

 .grid-table-gps {
    border-collapse: collapse;
    max-width: 320px;
    margin: 1rem;
    font-family: 'Segoe UI', system-ui;
    table-layout: fixed;
  }
  
  .grid-table-gps td {
    padding: 0.6em;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
  }
  
  /* Bordures intérieures optimisées */
  .grid-table-gps td:nth-child(2) {
    border-inline: 1px solid #ddd;
  }
  
  .grid-table-gps tr:nth-child(2) td {
    border-block: 1px solid #ddd;
  }
  
  .text-right {
    text-align: end;
    padding-inline-end: 0.8em;
  }
  
  .text-left {
    text-align: start;
    padding-inline-start: 0.8em;
  }
  
  caption {
    caption-side: bottom;
    padding-block: 1em;
    font-weight: 600;
    color: #444;
  }
  
  .grid-table-gps strong {
    font-weight: 500;
    color: #2d2d2d;
  }

Source image: Mistral

CSS, HTML, Tutoriel

Coordonnées GPS avec HTML / CSS