Comment utiliser l`écran css: table-row et affichage: propriétés table-cell

<

Contenu

  • Planifiez votre mise en page
  • Conseils & avertissements
    • div itemprop="description" class="intro marginTop" data-module="article-intro">

    L`affichage de la CSS: la propriété table-row vous permet de faire afficher le contenu dans un navigateur comme si elle était une ligne de tableau. Vous pouvez placer le contenu dans un div pour afficher comme si elle était une cellule de tableau en utilisant l`affichage CSS: la propriété table-cell. Cependant, il n`y a pas de balisage HTML rendant le contenu affiché un tableau réel de l`information sous forme de tableau. Le contenu peut être accessible, tout en vous donnant le pouvoir d`afficher que le contenu comme si elle était une table ou d`une grille. Voici comment faire.

    Choses que vous devez

    • Une page HTML et CSS en utilisant les exemples présentés

    Planifiez votre mise en page

    1. Pour le démontrer, ici est une simple CSS centrée disposition en deux colonnes dans un conteneur div. Notez que le HTML est pas pour une table. Il est un div conteneur qui contient deux divs imbriqués: une barre latérale et une zone de contenu. Nichée dans la zone de contenu que vous voyez un div contenant deux divs imbriqués. Ces divs sont affectés à la classe "rangée" et "cellule" respectivement, de sorte qu`ils peuvent être de style avec CSS.

      Le code HTML



    2. Attribuer le CSS suivant à la page. Notez que les sidebar1 et Maincontent divs sont donnés la propriété display: table-cell. Il n`y a pas besoin de joindre ces affichage: divs de présentation de table de la cellule dans un affichage: table ou affichage: table-row div. En effet, la table et la ligne du tableau sont implicites. Cela signifie que le navigateur va agir comme si une table et une rangée de table ont été effectivement donnés. Pour la ligne imbriquée avec deux cellules qui apparaîtra dans la zone de contenu principal, utilisez le CSS montré pour la classe "rangée" et la classe "cellule" dans le CSS illustré. Les couleurs et les frontières sont données pour plus de clarté. Ils ne sont pas nécessaires pour atteindre les résultats de la mise en page.

      Le Stylesheet

    3. Les résultats montrent d`une manière analogue à une grille avec un récipient contenant deux grandes cellules ou des boîtes qui affichent comme des colonnes. Dans la zone mainContent vous voyez la ligne de deux cellules ou des boîtes qui pourraient contenir du texte ou des images selon les besoins. Cet effet de la grille a été réalisée avec des propriétés d`affichage de CSS.

      La page dans Firefox

    4. Dans le HTML, la barre latérale est venu en premier dans l`ordre de la source. Vous pouvez inverser l`ordre de placer la barre latérale sur la droite en plaçant le mainContent div premier dans l`ordre de source HTML.

    Conseils & Avertissements

    • Vous pouvez omettre les div affectés à la classe "rangée" et la règle pour .row dans le CSS et obtenir les mêmes résultats. En effet, le navigateur suppose que la table-row est implicite lorsque la table-cell est utilisé.
    • affichage CSS: table rangée et display: table-cell propriétés ne sont pas pris en charge par les versions d`Internet Explorer ci-dessous la version 8.
    Technologie / Exécution d'un site web / Exécution d'un site web de base

    AUTRES

    » » » » Comment utiliser l`écran css: table-row et affichage: propriétés table-cell