È male progettare usare i tag di tabella quando si visualizzano i moduli in HTML?

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

Domanda

Continuo a sentire che div i tag dovrebbero essere usati per scopi di layout e non table tag. Questo vale anche per il layout del modulo? So che un layout di modulo è ancora un layout, ma sembra che la creazione di layout di modulo con html s richieda più css e <=>. Quindi, tenuto conto di ciò, i layout dei moduli dovrebbero usare <=> tag invece?

È stato utile?

Soluzione

Sì, si applica ai layout dei moduli. Tieni presente che esistono anche tag come FIELDSET ed LABEL che esistono specificamente per aggiungere la struttura a un modulo, quindi non si tratta proprio di usare DIV. Dovresti essere in grado di contrassegnare un modulo con HTML abbastanza minimale e lasciare che CSS faccia il resto del lavoro. Per esempio:. 

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

Altri suggerimenti

Penso che sia un mito che le forme siano " difficili " layout con buon HTML e CSS. Il livello di controllo che i CSS ti danno sul tuo layout va ben oltre ciò che mai farebbe un layout basato su una tabella ingombrante. Questa non è una nuova idea, in quanto this Smashing Articolo di rivista di spettacoli del 2006.

Tendo a utilizzare le varianti del seguente markup nei miei moduli. Ho uno stile .form generico nel mio CSS e quindi varianti per input di testo, caselle di controllo, selezioni, textareas ecc ecc. 

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}
<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

Le tabelle non sono cattive. Sono di gran lunga l'opzione migliore quando devono essere visualizzati dati tabulari. I moduli IMHO non sono dati tabulari: sono moduli e CSS fornisce strumenti più che sufficienti per il layout dei moduli come preferisci.

Se hai solo bisogno di un layout di tipo grip con riga di riga, non dovresti sentirti in colpa usando le tabelle. Non so come si possa chiamare quel "cattivo design" solo perché non si tratta di CSS. Ho visto molti cattivi progetti basati su CSS. Adoro i CSS e lo ritengo di gran lunga superiore in molti modi ai tradizionali layout di tabella nidificati, ma faccio ciò che funziona meglio e ciò che è più facile da mantenere e passare a decisioni più importanti e di maggiore impatto.

Il principio generale è che si desidera utilizzare qualunque elemento HTML trasmetta meglio il contenuto semantico che si intende e quindi fare affidamento su CSS per rappresentare visivamente quel contenuto semantico. Seguire questo principio acquista molti vantaggi intrinseci, tra cui modifiche visive generali del sito più semplici, ottimizzazione dei motori di ricerca, layout multi-dispositivo e accessibilità.

Quindi, la risposta breve è: puoi fare quello che vuoi, ma le migliori pratiche suggeriscono che usi solo i tag di tabella per rappresentare i dati tabulari e invece usi qualsiasi tag html che trasmetta meglio ciò che stai cercando di rappresentare. Inizialmente potrebbe essere un po 'più difficile, ma una volta che ti sarai abituato all'idea, ti chiederai perché l'hai mai fatto in altro modo.

A seconda di cosa stai cercando di fare con il tuo modulo, non dovrebbe essere necessario molto più markup per usare markup semantico e CSS, specialmente se fai affidamento sulle proprietà a cascata di CSS. Inoltre, se disponi di più moduli dello stesso formato su più pagine del tuo sito, l'approccio semantico è molto più efficiente, sia per codificare che per mantenere.

Per rendere i moduli il più accessibili possibile e semanticamente corretti, utilizzo il seguente formato: 

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

Uso il CSS principalmente fino a quando il CSS non diventa un trascinamento. Ad esempio, è molto più semplice creare una colonna 3+ (3 set di etichetta + campo modulo) usando una tabella che in css. Non riuscivo a far apparire correttamente il layout in tutti i principali browser usando puro CSS e stavo impiegando troppo tempo a farlo funzionare. Così ho detto fanculo e l'ho fatto facilmente usando un tavolo. La tabella non è male.

È un'area grigia. Non tutto nel markup ha confini chiaramente definiti, e questo è un caso in cui puoi usare le tue preferenze personali ed effettuare un giudizio. Non si adatta perfettamente all'idea che i dati vengano organizzati, ma le celle sono correlate su più assi e questa è la regola empirica che uso per decidere se qualcosa si adatta a una tabella o meno.

È certamente più facile usare table che div per impaginare una tabella, ma tieni presente che una tabella dovrebbe significare qualcosa - sta presentando i dati in modo regolare per l'utente, più che mettere le scatole sullo schermo in un determinato ordine. In generale, penso che i layout dei moduli dovrebbero usare div per decidere come visualizzare gli elementi del modulo.

Una cosa che non vedo spesso discussa in queste domande sul layout del modulo, se hai scelto una tabella per il layout del modulo (con etichette a sinistra e campi a destra come indicato in una delle risposte), allora quel layout è fisso. Al lavoro recentemente abbiamo dovuto fare una rapida "prova di concetto" delle nostre app Web in arabo. Le app che avevano utilizzato le tabelle per il layout del modulo erano sostanzialmente bloccate, mentre sono stato in grado di invertire l'ordine di tutti i campi del modulo e le etichette su tutte le mie pagine modificando una decina di righe nel mio file CSS.

Se i moduli sono disposti in un formato tabulare (ad esempio, etichette a sinistra e campi a destra), quindi sì, utilizzare i tag di tabella.

Un modulo non è " presentazione " ;, chiedi dati, di solito non presenti dati. Uso molte modifiche in linea nei dati tabulari. Ovviamente io uso i datacell - td come supporti per gli elementi di input quando passo dalla presentazione all'input.

La maggior parte delle risposte che ho visto qui sembrano appropriate. L'unica cosa che aggiungerei, in particolare agli apatici o al signor Matt, è usare <dl>/<dt>/<dd>. Credo che questi rappresentino l'elenco semanticamente. 

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

Potresti voler ridisegnare questi, ma questo dice semanticamente cosa sta succedendo, cioè hai una lista di " termini " (<dt>) e " definizioni " (<dd>), con il termine come etichetta e la definizione come valori immessi dall'utente.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top