Qual é o benefício de design tableless se você precisa limpar blocos em todos os lugares?

Question

Eu entendo que a meta de avançar para as tags <div> de <table> faz sentido uma vez que é mais semântico. No entanto, eu não entendo o benefício obtido se você ainda precisa de um bloco de compensação para fazer baseada em coluna layouts trabalho. Por exemplo:

<!-- 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>

A tag <br> estranho é usado estritamente para descrever estilo, e é necessário para fazer o trabalho de layout. Isso não ruína todos os benefícios obtidos com a remoção de tabelas?

Answer 1

E se eu lhe disse você fez não precisa um bloco clearing?

.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

Se você está exibindo dados tabulares, ainda faz mais sentido usar tabelas então muitos divs flutuou. Use as ferramentas que você tem sabiamente -. Não cegamente usar CSS onde as mesas são a melhor opção

Answer 3

Eu entendo que a meta de avançar para as tags <div> de <table> faz sentido uma vez que é mais semântica.

Na verdade, é exatamente o contrário: que se deslocam de <table> para <div> faz o seu HTML menos semântica. Na verdade, o todo ponto do <div> (e <span> ) elementos é ter não semântica!

É sempre carrapatos me off, quando vejo uma floresta de <div>s descritos como "HTML semântico". Não, não é! Aquela * un * HTML semântica! Especialmente se ele contém uma grande quantidade de <div class='float-left'>, <div id='bottom'> e os meus favoritos pessoais <div class='paragraph'> e <span class='emphasis'>.

Não me entenda errado, usando <div>s un-semântica é certamente melhor do que usar errado <table>s -semantic, mas ainda melhor seria usar os semanticamente corretas elementos - embora em muitos casos o problema é que HTML não oferece qualquer. No seu trecho por exemplo, você usar o elemento <address>, mas de acordo com especificação , este elemento é não significou para marcação de endereços! É única para marcar o endereço do autor da página -. IOW é totalmente inútil

O exemplo que você postou está faltando um monte de contexto, por isso é difícil dizer, mas realmente parece que você pode querer exibir qualquer tabular ou dados hierárquicos, em que <table>s caso ou <ul>s pode ser uma escolha melhor.

---

totalmente alheios à sua pergunta: você pode querer dar uma olhada na hCard e noreferrer microformatos XOXO .

Answer 4

Nem um pouco. Há muitos outros benefícios para evitar o uso de tabelas.

• em vez de DIVs
• divs vs quadros A refutação por favor
• de Tabelas vs. ou CSS vs. Sendo Stupid

Answer 5

Eu pessoalmente uso o hack clearfix para minhas necessidades de compensação.

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

Observe Eu só vírgula separar os seletores em vez de adicionar a classe clearfix a tudo. Ele funciona muito bem. O único problema é que a propriedade zoom é IE específico e não valida, mas não há efeitos colaterais, como há, por vezes, pode ser com outras propriedades, como overflow: auto.

Eu tenho usado isso em sites profissionais para 5 anos sem problemas.

Answer 6

Como mostra a resposta do annakata, você não precisa desses blocos de compensação. Mas, além disso, uma vantagem para evitar tabelas é que a página pode ser processado de forma progressiva. Uma tabela só pode ser processado quando o inteira mesa, incluindo todo o seu conteúdo, foi analisado, o que pode demorar um pouco se você tem uma grande página e uma conexão lenta. divs pode ser processado imediatamente, o que significa que você pode ser capaz de apresentar algo útil para o usuário muito mais cedo do que com tabelas.

É claro que este é apenas um pouco agradável vantagem de bônus, não é, e não deve ser o razão para mesas evitar (por dados não-tabular)