CSS pour les tableaux

MB3 -  
 MB3 -

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

  1.
    RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     

    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
  2. MB3
     

    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

Discussions similaires

garder constant des calculs
jack2125 -
PHILOU10120 -

4 réponses
CALCULS
smart19 -
Dracknard -

4 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Tableaux liés entre eux
Lilor -
m@rina -

4 réponses
comment assembler 2 tableaux word
claire -
claire -

2 réponses