Quel est l'avantage de la conception sans tablettes si vous avez besoin d'éliminer des blocs partout?

Question

Je comprends que l’objectif consistant à passer aux <div> balises de <table> est logique, car il est plus sémantique. Cependant, je ne comprends pas les avantages obtenus si vous avez toujours besoin d'un bloc de compensation pour que les dispositions basées sur des colonnes fonctionnent. Par exemple:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

La balise <br> étrangère est strictement utilisée pour décrire le style et est indispensable pour que la mise en page fonctionne. Cela ne ruine-t-il pas tous les avantages tirés de la suppression des tables?

Answer 1

Et si je vous disais vous n'a pas besoin d'un bloc de compensation?

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}

<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

Answer 2

Si vous affichez des données tabulaires, il est toujours plus judicieux d’utiliser des tables que de nombreuses div flottantes. Utilisez judicieusement les outils dont vous disposez - n'utilisez pas aveuglément CSS lorsque les tableaux sont la meilleure option.

Answer 3

  

Je comprends que l'objectif de passer aux <div> balises de <table> est logique, car il est plus sémantique.

En fait, c'est exactement le contraire: passer de <span> à <div class='float-left'> rend votre HTML moins sémantique. En fait, le point entier de <div id='bottom'> (et <div class='paragraph'> ) les éléments doivent avoir une non sémantique!

Cela me coupe toujours lorsque je vois une forêt de <span class='emphasis'> décrite comme & "HTML sémantique &"; Non ce n'est pas! C'est * un- * HTML sémantique! Surtout s'il contient beaucoup de <address>, <ul> et de mes favoris personnels <=> et <=>.

Ne vous méprenez pas, utiliser un <=> s non sémantique est certainement préférable à un mauvais -sémantique <=> s, mais il serait préférable d'utiliser le sémantique corriger les éléments & nbsp; & # 8211; bien que dans de nombreux cas, le problème est que HTML n'en offre pas. Par exemple, dans votre extrait de code, vous utilisez l'élément <=>, mais selon la spécification , cet élément n'est pas destiné à baliser des adresses! C’est uniquement pour marquer l’adresse de l’auteur de la page & Nbsp; & # 8211; IOW c'est totalement inutile.

L'exemple que vous avez posté manque beaucoup de contexte. Il est donc difficile de le dire. Cependant, il semblerait que vous souhaitiez afficher des données tabulaires ou hiérarchiques, auquel cas <=> s ou <=> s pourrait être un meilleur choix.

Totalement sans lien avec votre question: vous voudrez peut-être jeter un coup d'oeil à la hCard et Microformats XOXO .

Answer 4

Pas du tout. Il y a BEAUCOUP d'autres avantages à éviter d'utiliser des tableaux.

• Tables au lieu de DIV
• DIVs contre TABLEs une réfutation s'il vous plaît
• DIV vs Tables ou CSS vs Stupid

Answer 5

J'utilise personnellement le hack de clearfix pour mes besoins de nettoyage.

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

Remarquez que je viens de séparer les sélecteurs par une virgule plutôt que d’ajouter la classe clearfix à tout. Ça marche vraiment bien. Le seul problème est que la propriété zoom est spécifique à IE et qu'elle n'est pas validée, mais il n'y a aucun effet secondaire, comme cela peut parfois arriver avec d'autres propriétés, comme overflow: auto.

Je l'utilise depuis 5 ans sur des sites Web professionnels sans aucun problème.

Answer 6

Comme le montre la réponse d’Annakata, vous n'avez pas besoin de ces blocs de compensation. En dehors de cela, l'un des avantages d'éviter les tableaux est que la page peut être affichée progressivement. Un tableau ne peut être rendu que lorsque la table entière , y compris tout son contenu, a été analysée, ce qui peut prendre un certain temps si vous avez une grande page et une connexion lente. Les divs peuvent être rendus immédiatement, ce qui signifie que vous pourrez peut-être présenter quelque chose que l'utilisateur pourra utiliser beaucoup plus tôt qu'avec des tableaux.

Bien sûr, il ne s'agit que d'un petit avantage supplémentaire non négligeable, et ne devrait pas être la raison pour laquelle il faut éviter les tableaux (pour les données non tabulaires)