2013-01-14 9 views
8

Ho un tavolo ex.Modalità di tavolo - Devo essere coerente?

<table> 

<tr> 
    <td>apple</td> 
    <td>big</td> 
</tr> 

<tr> 
    <td>pickle</td> 
    <td>small</td> 
</tr> 

</table> 

dopo un po 'di fantasia ... jquery

<table> 

<tr> 
    <td>apple</td> 
    <td>big</td> 
    <td>10kg ------ Is this nice to do, any potential issues?</td> 
</tr> 

<tr> 
    <td>pickle</td> 
    <td>small</td> 
</tr> 

</table> 

Solo per divertimento: http://jsfiddle.net/Czcby/

+4

+1 per il nome della domanda. – Oren

+0

Toda Oren, inizio piacevole di questo lunedì mattina! – Pinch

+1

Quindi il pickle non ha alcuna massa? – BoltClock

risposta

4

Finirai con tre celle sulla prima riga e due sulla seconda fila.

Questo normalmente non viene visualizzato, ma se lo stile ha margini/bordo/riempimento sulle celle della tabella, può influire sulla visualizzazione e sul layout della tabella.

+1

"può influenzare la visualizzazione e il layout della tabella" Questo perché il vuoto extra 'td' di cui parli non è effettivamente lì. – BoltClock

+1

@BoltClock - Vero. – Oded

+0

http://jsfiddle.net/Czcby/ Sembra mostrare ok anche qui – Pinch

2

Non c'è nessun problema a farlo, tuttavia, è possibile affrontare alcuni problemi di formattazione in quanto vi sarà ora 3 td 's sulla riga uno e 2 sulla riga due.

1

utilizzare colspan = "2" quando un td utilizza 2 colonne.

+0

Stava per rispondere usando colspan. Aggiungi un po 'di codice per la tua risposta! :) – caiosm1005

3

La risposta breve, per me, è sì.

La risposta più dettagliata è: non è strettamente necessità essere coerenti, ma certamente aiuta se si desidera che la tabella per guardare coerente tra i browser. Per non parlare del fatto che essere inconsistenti ora, anche se non sembra causare problemi al momento, avrà un effetto maggiore quando si vuole fare di più sul proprio tavolo, sul proprio stile o sui dati al suo interno.

Se si estrae this JSFiddle nei vari browser, è possibile vedere un comportamento diverso:

  • Chrome e IE8: Render tavolo come avere cellule extra che sporgono dalle due cellule normali.
  • Firefox: sembra effettivamente che abbia celle aggiuntive vuote in una terza colonna .

Immagina le complicazioni quando si tratta di stile per queste diverse situazioni man mano che la tabella cresce.

Probabilmente, la proprietà colspan rappresenta un modo per aggirare questo problema. Penso che colspan sia piuttosto brutto; le tabelle dovrebbero essere presentate in modo da poter guardare l'intestazione di una colonna e scorrere verso il basso per vedere le informazioni rilevanti per quell'intestazione. Avere altri dati che raggiungono attraverso la colonna è una distrazione. Ma dipende esattamente da cosa stai cercando di fare.

Problemi di presentazione e di progettazione delle informazioni a parte, potrebbe non esserci alcun modo per qualcuno che osserva il codice per sapere quante celle finiscono in ogni riga. Meglio avere un numero consistente in ogni riga in modo da poterlo controllare in modo rapido e semplice nel caso avessi bisogno di qualcos'altro con la tabella oi dati al suo interno. Utile per il debug.

Spero che questo aiuti.

+0

+1 grazie per la tua risposta! – Pinch

Problemi correlati