Utiliser les css display:table-row et display:table-cell propriétés

Utiliser les css display:table-row et display:table-cell proprietes

Utiliser les css display:table-row et display:table-cell proprietes : Plusieurs milliers de conseils pour vous faciliter la vie.

Tables de contenu web sont tres pratique et efficace d'afficher beaucoup de matiere dans une petite quantite d'espace. Les Tables sont egalement plus faciles a lire et les relations par element peut etre facilement vu. Table sont egalement utilises pour nivele affichage des images et du texte, et si vous voulez apprendre comment utiliser les tables lorsque vous modifiez un fichier dans le CSS, alors c'est l'article pour vous. Tandis que d'autres les developpeurs preferent table-moins implementations (car il est plus rapide a charger dans certains cas), facile d'entretien est l'un des avantages d'avoir des elements dans les tableaux.

• en Regardant le tableau-moins de code CSS. Pour qu'on puisse savoir ou inserer des tableaux, voici un exemple d'un morceau de CSS mise en forme qui n'utilise pas de tableaux, mais utilise les divisions la place.

  id=”conteneur”>
  

  Sidebar1 contenu
  div>
  div id=”mainContent”>
  contenu Principal ici

  
  

  Cellule 1
  

  Cellule 2
  

  
  

  Dans l'exemple ci-dessus, vous pouvez voir qu'il ya que vous etes l'affectation de valeurs a la table des matieres d'une ligne. Il y a en fait deux divs imbriques – un div dans une div dans l'exemple ci-dessus et de le convertir en un tableau, cela impliquerait deux tables comme le resultat final.

• la Conversion de vrd sur des tables. Lorsque vous souhaitez convertir la liste ci-dessus du code a l'aide de tables au lieu de vrd, puis il devrait commencer a ressembler a ceci:

  #sidebar1 {
  display: table-cell
  width: 200px
  arriere-plan: #FFFFFF
  padding: 15px 10px 20px 15px
  }
  #mainContent {
  & nbsp & nbsp & nbsp afficher: table-cell
  & nbsp & nbsp & nbsp padding-left: 10px
  }
  .ligne {
  display:table-row
  }
  .cellule {
  display:table-cell
  width:400px
  height:200px
  border:1px solid blue
  }

  Si vous n'etes pas sûr de ce que les couleurs que vous allez utiliser pour l'arriere-plan et d'autres elements de contenu, vous pouvez simplement entrer plus tard car les tables sont la pour essentiellement la forme d'une mise en page et pas vraiment le design de la page. Ce qui sera affiche lorsque vous examinez le fichier html, c'est que vous avez deux tables affichees un peu comme une grille. Les developpeurs preferent tableau affiche en CSS tout simplement parce qu'il est beaucoup plus facile a comprendre a partir du code de l'endroit ou vous allez placer les images et ou vous pouvez modifier la valeur de la couleur d'arriere-plan et la comme.

• Edition le placement de la barre laterale. Dans les deux derniers exemples, la barre laterale vient en premier, ce qui signifie qu'il apparaît sur la partie gauche de l'ecran. Si vous le souhaitez sur la partie droite de votre ecran, puis il suffit de le placer apres le contenu principal, encore la barre laterale, et il doit etre place en consequence.

Il existe de nombreux autres conseils sur la façon de manipuler les affiche dans le CSS mais c'est l'un des plus de base. Il y a un debat en cours sur ce qui est le plus efficace en termes d'affichage d'informations et il y a deux principales ecoles de pensee – pour ceux qui preferent utiliser des divs et ceux qui preferent utiliser des tableaux. Juste une derniere remarque – tableau affiche ne sont pas pris en charge par Internet Explorer version 8 donc, si ce navigateur est tres eleve sur votre liste de priorite, alors vous pourriez vouloir continuer avec la div de la mise en œuvre a la place.