.tableau-section { padding: 60px 20px; background: #f7f9fc; font-family: Arial, sans-serif; } .tableau-conteneur { max-width: 1100px; margin: 0 auto; text-align: center; } .tableau-conteneur h2 { margin: 0 0 12px; font-size: 2rem; color: #061a3d; } .tableau-sous-titre { max-width: 720px; margin: 0 auto 32px; font-size: 1.05rem; line-height: 1.6; color: #4b5563; } .tableau-wrapper { overflow-x: auto; margin-bottom: 32px; } .tableau-infos { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(6, 26, 61, 0.08); } .tableau-infos th, .tableau-infos td { padding: 22px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid #e5e7eb; } .tableau-infos th { background: #061a3d; color: #ffffff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; } .tableau-infos td { color: #374151; font-size: 1rem; line-height: 1.6; } .tableau-infos tbody tr:last-child td { border-bottom: none; } .tableau-infos tbody tr:hover { background: #f9fafb; } .tableau-bouton { display: inline-block; padding: 14px 28px; background: #ff7a5c; color: #ffffff; text-decoration: none; font-weight: 700; border-radius: 999px; transition: background 0.25s ease, transform 0.25s ease; } .tableau-bouton:hover { background: #f05f43; transform: translateY(-2px); } @media (max-width: 768px) { .tableau-section { padding: 40px 16px; } .tableau-conteneur h2 { font-size: 1.6rem; } .tableau-sous-titre { font-size: 1rem; } .tableau-infos th, .tableau-infos td { padding: 18px 16px; font-size: 0.95rem; } }

Présentation des informations

Un exemple de tableau clair, aéré et structuré pour présenter des contenus de manière lisible.

Première colonne	Deuxième colonne	Troisième colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Duis aute irure dolor in reprehenderit in voluptate velit esse.	Cillum dolore eu fugiat nulla pariatur.	Excepteur sint occaecat cupidatat non proident.
Sunt in culpa qui officia deserunt mollit anim id est laborum.	Curabitur pretium tincidunt lacus, nulla gravida orci a odio.	Nullam varius, turpis et commodo pharetra, est eros bibendum elit.
Aliquam erat volutpat, nam dui mi tincidunt quis accumsan porttitor.	Facilisis luctus metus, pellentesque habitant morbi tristique.	Senectus et netus et malesuada fames ac turpis egestas.
Praesent dapibus neque id cursus faucibus tortor neque egestas augue.	Eu vulputate magna eros eu erat, aliquam erat volutpat.	Nam dui mi tincidunt quis, accumsan porttitor, facilisis luctus.

Découvrir la suite