È cattivo uso “display: table;” per organizzare un layout in 2 colonne?

Sto cercando di creare un layout a 2 colonne, apparentemente la rovina dei CSS. So che non dovresti usare le tabelle per il layout, ma ho optato per questo CSS. Nota l’uso del display: tabella ecc.

div.container { width: 600px; height: 300px; margin: auto; display: table; table-layout: fixed; } ul { white-space: nowrap; overflow: hidden; display: table-cell; width: 40%; } div.inner { display: table-cell; width: auto; } 

Con questo layout:

 
  • First
  • Second
  • Third

Hello world

Questo sembra funzionare in modo ammirevole. Tuttavia, non posso fare a meno di chiedermi – sto obbedendo alla lettera della regola “non usare le tabelle”, ma non lo spirito? Penso che sia ok, dal momento che non c’è markup di posizionamento nel codice HTML, ma non sono sicuro del modo “giusto” per farlo.

Non posso usare css float, perché voglio che le colonne si espandano e si contraggano con lo spazio disponibile.

Per favore, stack overflow, aiutami a risolvere il mio senso esistenziale di terrore a queste pseudo-tabelle.

Esistono due argomenti essenziali per non utilizzare le tabelle:

  1. Markup semantico.
  2. Evitare la zuppa di tag. (Troppi tag)

Quindi, il tuo metodo non sta violando nessuno di questi obiettivi. Tuttavia, dovresti controllare questo codice in IE7 e IE6 – è probabile che tu veda alcune incoerenze lì.

Come accennato, non preoccuparti di attenersi a queste regole troppo strettamente. Sono linee guida e dovresti usare lo strumento giusto per il lavoro che stai facendo. Ciò che è importante qui è sapere quali sono le migliori tecniche e quando utilizzarle. A volte, usare un tavolo è lo strumento migliore per quello che stai cercando di fare, a volte non lo è.

Questo è il tipo di esempio che display: table-cell; è stato progettato per. Dopo tutto, stai mettendo la formattazione nel foglio di stile, non il markup. Quindi rilassati! Va bene.

Sarebbe bello se ogni ansible layout fosse fatto con css, senza tabelle o pseudo-tabelle in vista. Ma ci sono delle eccezioni, e fino a quando html e css (e supporto del browser) ci permettono di farlo, sii a tuo agio con i tuoi tavoli. Il punto, dopo tutto, è soddisfare i tuoi utenti, non aderire alla filosofia di qualcun altro.

Il problema con l’utilizzo di tag di tabella per dati non tabulari in HTML è che impongono la formattazione in quelli che dovrebbero essere solo i dati.

Poiché stai inserendo la formattazione della tabella nel tuo CSS, il tuo codice HTML è ancora semanticamente corretto. Sono dell’opinione che finché il tuo HTML è semanticamente corretto, quello che fai nel CSS per renderlo bello è il tuo business, e penso che il tuo timore esistenziale sia fuori luogo.

In una nota a margine, sono abbastanza sicuro che IE 6 non supporti la visualizzazione: table-cell, quindi a seconda del target potrebbe essere necessario prendere accordi alternativi.

Usando il display: la tabella va bene quando parli di semantica. La ragione per cui “le tabelle sono cattive” in primo luogo è perché il markup (HTML) dovrebbe descrivere il contenuto al suo interno. Quindi, se non sono dati, non appartengono a una tabella.

Dato che stai semplicemente impostando il modo in cui viene visualizzato il markup (in una struttura a tabelle), è perfettamente soddisfacente.

Tuttavia, questo non funzionerà per tutti i browser. Specificamente IE6 e IE7 (e IE8 in “modalità compatibilità”) non verranno visualizzati correttamente.

Per ulteriori informazioni su tipi di display e supporto browser, puoi fare riferimento a questo: http://www.quirksmode.org/css/display.html

Ironia della sorte, utilizzando display: table è probabile che sia una soluzione accettabile comune in futuro.

Vedi: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-yull-soon-be-using/

Hai detto usando display:table per una grande colonna di larghezza automatica?

Non posso usare css float, perché voglio che le colonne si espandano e si contraggano con lo spazio disponibile.

Quindi, puoi anche usare le proprietà flex! Entriamo in questo:

Nei CSS3 c’erano molte proprietà aggiunte, c’è un gruppo chiamato flex che è usato per avere div flessibili senza usare tabelle o display: table ; usato anche quando l’utente usa un piccolo schermo (forse un mini laptop, tablet, un grande smartphone come la serie Galaxy o piccolo …?). Queste sono le proprietà:

  • Genitore
    • Questo è il contenitore principale. Per esempio, diciamo che hai un web con una struttura HTML molto semplice, e con tre div (uno con le informazioni principali, altri usati come sidebar e infine uno per avvolgere i primi due citati).
    • display: flex : questo è usato per dire al browser che stiamo parlando di elementi flessibili. Usa -webkit- prima del valore (anche inline-flex ) per il supporto di Google e Safari. Non è necessario usare -moz- o -o- , né -ms- .
    • flex-direction : questo è l’orientamento dei bambini all’interno di questo genitore. Ci sono quattro valori disponibili per questo: row , column , row-reverse o column-reverse . Dato che vuoi un div principale e una barra laterale, devi usare la colonna. Usa -moz- e -webkit- per ulteriore supporto del browser.
    • justify-content : l’allineamento per l’asse X. Valori: flex-start, flex-end, spazio-intermedio, spazio-intorno, flex-center. Raccomando di usare il quarto o il quinto.
  • Bambino
    • In questo caso, intendo con child come main ( non consigliato ) o div class="main" e aside o div class="sidebar" .
    • ordine : usato per ordinare i div, indipendentemente dal primo posto nel codice. Qui CSS vince contro il codice HTML utilizzato. I valori sono … numeri … usa -moz- n -webkit- plz.
    • flex-grow : usato per lasciare che un bambino sia più grande del resto, tutto dipende dal suo valore e se ci sono altri child con altri valori per questa proprietà. -webkit- & -moz- r Rcomment ed.

Informazioni Moar a: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ e http://www.w3schools.com/cssref/default.asp#flexible .

Oh, ed ecco la risposta: sì, puoi usarlo. Leggi a: http: /www.w3.org/TR/css3-flexbox/#intro. Dice

layout di tabella, progettato per la disposizione di dati 2D in formato tabellare

Non parlano di ctriggers idea, semplicemente imposta il suo formato su ACT (e forse non sembra) come un tavolo.

 display: table-cell 

è uno stile, non una struttura di tabella come questa:

 

Quindi penso che sia giusto usarlo.

A proposito, non penso che la tavola sia davvero malvagia dopo tutto.

Personalmente preferirei tabella per la visualizzazione dei dati tabulari (solo per i dati) rispetto alla struttura “div”. Il mio motivo principale è che l’utente potrebbe facilmente copiare incollare i dati su un foglio di calcolo dal proprio browser. Fullfiling la mia pigrizia: “> e riducendo il carico della pagina (non presentando” download come Excel, o CSV o altro “) … hehehe …: D. Oh uno di più, in diversi browser è visualizzato coerente anche.

Permettetemi di discuterne. elemento aveva il suo fascino che era la ragione dietro a tutti che lo utilizzavano. Ma poi la semantica si è evoluta. Siamo stati ben oltre la syntax. Sono state prese le decisioni, per conto delle quali XHTML 2.0 è stato scartato e HTML5 è stato adottato. Leggi la storia di WHATWG (gruppo di lavoro sulla tecnologia di applicazione Web Hypertext) per chiarire i tuoi concetti al riguardo.

L’aspetto principale alla base della rimozione di determinati elementi dall’HTML era che non erano pensati per strutturare le cose ma erano pensati per modellarli, mentre HTML non ha nulla a che fare con lo styling di un elemento.

HTML è pensato per strutturare una pagina web. CSS è pensato per lo styling di quella struttura.

Quindi, l’elemento HTML e molti altri sono stati rimossi dalle specifiche. Sono stati specificamente utilizzati per lo stile invece di strutturare.

Per decidere il destino dell’elemento si è deciso di mantenerlo nelle specifiche come nelle tabelle reali che si intendono strutturare con esso, ma per spostare l’attenzione di un web designer comune simili abilità / specifiche dovrebbero essere aggiunte al CSS.

Ora l’elemento HTML è pensato per la struttura di una tabella e nient’altro. Se vuoi usare la tabella per lo styling vai avanti e usa display: table; che è una proprietà CSS e CSS è pensato per lo stile degli elementi di una struttura in HTML. Oltre a ciò può essere modificato e controllare Eg in RWD è ansible specificare qualsiasi elemento per cambiarne la visualizzazione da tabella a blocco o altro.