CSS pour les tableaux

MB3 - Modifié le 30 juil. 2024 à 18:54
 MB3 - 1 août 2024 à 00:07

Bonjour,

Les attributs «cellpadding» et «align» dans la balise <table> sont considérés comme obsolètes dans HTML5.
Pour cette raison, je préfère l'utilisation de CSS.

Je n'ai pas assez de connaissance dans ce domaine. Je vous prie donc de me donner le script CSS pour chacun de tableaux ci-dessous, et de m'expliquer comment mettre ces scripts dans la source de code de la page, et comment joindre ces CSS aux nouveaux tableaux dans chaque page. (Lier le script à nouveau tableau.)

Voici les tableaux souhaités:

Tableau un:
Largeur: 100 pour cent
Position: centre

Tableau deux:
Largeur: 100 pour cent
position: centre
3 lignes
3 colonnes
Lignes 1 et 3: hauteur 35 pixels
Colonnes 1 et 3: largeur 35 pixels

Je vous remercie par avance.
Cordialement,

2 réponses

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 359
Modifié le 31 juil. 2024 à 11:02

Salut

je comprend pas pourquoi tu veux utiliser des tables ??? Si c est pour structurer tes pages c est tres fortement déconseille !

les tables sont faite pour insérer un tableau style exel !

et quand je vois ta demande je doute que ce soit pour cela ! 

Tableau un:
Largeur: 100 pour cent
Position: centre

pas de colonnes ni de ligne ! donc tu veux une div centrée ! 

Tableau deux:
Largeur: 100 pour cent
position: centre
3 lignes
3 colonnes
Lignes 1 et 3: hauteur 35 pixels
Colonnes 1 et 3: largeur 35 pixels

de même avec des hauteurs et largeurs de 35 px je vois pas trop ce que tu peux y mettre a part 3 petit mots !! 

donc je t ai fais un exemple vite fait avec des div 

une div simple centre pour le "tableau1"

et une div qui ressemble et réagit  comme a un tableau avec des display: table dans le css  pour la div "tableau2" avec tes height et width a 35px 

le Css est entre les <head>... </head>de la page dans une balise <style type="text/css">........</style> j ai mis des couleurs pour que tu vois mieux 

base toi la dessus et adapte a ta page ! personne ne codera la totalité de tes pages  pour toi 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>
      EXEMPLE TABLE DIV
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
    .Tableau1 {
      background-color: #9ff;
      display: flex;
      padding: 10px;
    }
    .Tableau2 {
      display: table;
      width: 100%;
    }
    .Tableau2Row {
      display: table-row;
    }
    .Tableau2Cell {
      background-color: #f96;
      border: 2px dotted #CC0000;
      display: table-cell;
    }
    .Tableau2Body {
      display: table-row-group;
    }
    .haut, .bas {
      background-color: #39f;height: 35px;
      max-height: 35px; height: 35px;

    }
    .gauche, .droite {
      background-color: #fc6;
      max-width: 35px; width: 35px;
    }
    </style>
  </head>
  <body> <p><h3>Tableau 1</h3></p>
    <div class="Tableau1">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. At certe gravius. Atque ab his initiis profecti omnium
        virtutum et originem et progressionem persecuti sunt. Qui-vere falsone, quaerere mittimus-dicitur oculis se
        privasse; Sed est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est naturae, disserendi
        altera, vivendi tertia. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum iudicia defendere.
        Scio enim esse quosdam, qui quavis lingua philosophari possint; Duo Reges: constructio interrete. Ego vero
        isti, inquam, permitto. A mene tu? Si qua in iis corrigere voluit, deteriora fecit.
      </p>
      <p>
        Ergo, si semel tristior effectus est, hilara vita amissa est? Illis videtur, qui illud non dubitant bonum
        dicere -; Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis.
        Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Partim cursu et
        peragratione laetantur, congregatione aliae coetum quodam modo civitatis imitantur; Et non ex maxima parte de
        tota iudicabis? Nunc haec primum fortasse audientis servire debemus. Quid est, quod ab ea absolvi et perfici
        debeat?
      </p>
      <p>
        An tu me de L. Quod autem ratione actum est, id officium appellamus. Non pugnem cum homine, cur tantum habeat
        in natura boni; Quae quidem vel cum periculo est quaerenda vobis; Haec igitur Epicuri non probo, inquam. Quae
        fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Itaque dicunt nec
        dubitant: mihi sic usus est, tibi ut opus est facto, fac. A mene tu? Si mala non sunt, iacet omnis ratio
        Peripateticorum.
      </p>
    </div>
    <br> <p><h3>Tableau 2</h3></p>
    <div class="Tableau2">
      <div class="Tableau2Body">
        <div class="Tableau2Row">
          <div class="Tableau2Cell gauche haut">
            G haut
          </div>
          <div class="Tableau2Cell haut">
            Centre haut
          </div>
          <div class="Tableau2Cell droite haut">
            D haut
          </div>
        </div>
        <div class="Tableau2Row">
          <div class="Tableau2Cell gauche">
            G centre
          </div>
          <div class="Tableau2Cell">
            Centre-centre
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. At certe gravius. Atque ab his initiis profecti
              omnium virtutum et originem et progressionem persecuti sunt. Qui-vere falsone, quaerere mittimus-dicitur
              oculis se privasse; Sed est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est naturae,
              disserendi altera, vivendi tertia. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum
              iudicia defendere. Scio enim esse quosdam, qui quavis lingua philosophari possint; Duo Reges: constructio
              interrete. Ego vero isti, inquam, permitto. A mene tu? Si qua in iis corrigere voluit, deteriora fecit.
            </p>
            <p>
              Ergo, si semel tristior effectus est, hilara vita amissa est? Illis videtur, qui illud non dubitant bonum
              dicere -; Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis.
              Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Partim cursu et
              peragratione laetantur, congregatione aliae coetum quodam modo civitatis imitantur; Et non ex maxima
              parte de tota iudicabis? Nunc haec primum fortasse audientis servire debemus. Quid est, quod ab ea
              absolvi et perfici debeat?
            </p>
            <p>
              An tu me de L. Quod autem ratione actum est, id officium appellamus. Non pugnem cum homine, cur tantum
              habeat in natura boni; Quae quidem vel cum periculo est quaerenda vobis; Haec igitur Epicuri non probo,
              inquam. Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur.
              Itaque dicunt nec dubitant: mihi sic usus est, tibi ut opus est facto, fac. A mene tu? Si mala non sunt,
              iacet omnis ratio Peripateticorum.
            </p>
          </div>
          <div class="Tableau2Cell droite">
            D centre
          </div>
        </div>
        <div class="Tableau2Row">
          <div class="Tableau2Cell gauche bas">
            G bas
          </div>
          <div class="Tableau2Cell bas">
            Centre bas
          </div>
          <div class="Tableau2Cell droite bas">
            D bas
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

maintenant si j ai mal compris la raison de ton utilisation de table soit tu étudie un peu l utilisation des tables en html css https://www.google.com/search?q=tableau+htm

soit tu essaye de voir avec des generateurs de table  online  ICI ou ICI par exemple mais il y en a plein d autre 

a+ 



0

Bonjour,

Merci, RAD ZONE, pour votre réponse.

Oui, effectivement, j'utilise les tableaux au lieu des «Div»s. C'est pour certaines raisons y compris les suivantes:

1 – Je n'ai pas assez de connaissances dans le domaine de HTML et CSS.
2 – Dans les lignes et les colonnes de 35 pixels, je mets les images comme l'arrière-plan. (Non pas comme l'image simple.)

Dans la colonne principale, j'écris les titres (avec lien) et les résumés des articles qui se trouvent sur les pages intérieures.
J'ai plusieurs tableaux de ce type dans la page d'accueil.

Je sais qu'il y a les autres solutions plus correctes; mais, depuis des années je fais cela chaque jour, et il m'est un peu difficile d'essayer d'autres solutions. (En raison de manque de connaissance.)

Je vous remercie, RAD ZONE, encore une fois de plus.
Bien cordialement,

0