Qual è il vantaggio del design senza tablatura se hai bisogno di eliminare i blocchi ovunque?

Question

Comprendo che l'obiettivo di spostarsi verso <div> tag da <table> ha senso poiché è più semantico. Tuttavia, non capisco il vantaggio ottenuto se hai ancora bisogno di un blocco di eliminazione per far funzionare i layout basati su colonne. Ad esempio:

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

Il tag <br> estraneo è usato rigorosamente per descrivere lo stile ed è necessario per far funzionare il layout. Ciò non rovina tutti i vantaggi ottenuti dalla rimozione delle tabelle?

Answer 1

E se ti dicessi tu non hai bisogno di un blocco di eliminazione?

.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 stai visualizzando dati tabulari, ha ancora più senso usare le tabelle di molte div in virgola mobile. Usa gli strumenti che hai saggiamente - non usare ciecamente CSS dove le tabelle sono l'opzione migliore.

Answer 3

  

Comprendo che l'obiettivo di spostarsi verso <div> tag da <table> ha senso poiché è più semantico.

In realtà, è esattamente il contrario: passare da <span> a <div class='float-left'> rende il tuo HTML meno semantico. In effetti, il punto intero del <div id='bottom'> (e <div class='paragraph'> ) devono avere no semantica!

Mi spunta sempre quando vedo una foresta di <span class='emphasis'> s descritta come " HTML semantico " ;. No non lo è! Questo è * un- * semantico HTML! Soprattutto se contiene molti <address>, <ul> e i miei preferiti personali <=> e <=>.

Non fraintendetemi, usare <=> s non semantici è sicuramente meglio che usare sbagliato -semantico <=> s, ma ancora meglio sarebbe usare semanticamente elementi corretti & nbsp; & # 8211; sebbene in molti casi il problema sia che HTML non ne offre. Nel tuo frammento, ad esempio, usi l'elemento <=>, ma in base a la specifica , questo elemento non è non destinato al markup degli indirizzi! È solo per contrassegnare l'indirizzo dell'autore della pagina & Nbsp; & # 8211; IOW è assolutamente inutile.

Nell'esempio che hai pubblicato manca un sacco di contesto, quindi è difficile da dire, ma in realtà sembra che potresti voler visualizzare dati tabulari o gerarchici, nel qual caso <=> se <=> s potrebbe essere una scelta migliore.

---

Totalmente estraneo alla tua domanda: potresti dare un'occhiata alle hCard e XOXO microformati.

Answer 4

Niente affatto. Ci sono MOLTI altri vantaggi per evitare l'uso delle tabelle.

• Tabelle anziché DIV
• DIV vs. TABELLE una confutazione per favore
• DIV vs. Tables o CSS vs. Being Stupid

Answer 5

Uso personalmente l'hack di clearfix per le mie esigenze di pulizia.

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

Nota che separo solo in virgola i selettori anziché aggiungere la classe clearfix a tutto. Funziona davvero bene. L'unico problema è che la proprietà zoom è specifica di IE e non convalida, ma non ci sono effetti collaterali come a volte ci possono essere con altre proprietà, come overflow: auto.

Lo uso da 5 anni su siti web professionali senza problemi.

Answer 6

Come mostra la risposta di annakata, non hai bisogno di quei blocchi di eliminazione. Ma a parte questo, un vantaggio nell'evitare le tabelle è che la pagina può essere resa progressivamente. È possibile eseguire il rendering di una tabella solo quando è stata analizzata la intera tabella, incluso tutto il suo contenuto, il che può richiedere del tempo se si dispone di una pagina grande e una connessione lenta. i div possono essere resi immediatamente, il che significa che potresti essere in grado di presentare qualcosa di utile all'utente molto prima rispetto alle tabelle.

Naturalmente, questo è solo un piccolo vantaggio in termini di bonus, non lo è e non dovrebbe essere il motivo per evitare le tabelle (per dati non tabulari)