salve ragazzi.
Sto imparando a programmare in html e ho incontrato una difficoltà: non riesco ad allineare con colspan 2 celle su 3. Insomma devo produrre questo output e non riesco ad allineare la riga dove ci sono le celle primo e secondo, come faccio?
Schermata 2014-12-10 alle 17.17.43.jpg
non riuscirai ad ottenere quel risultato con una sola tabella, avrai bisogno di tabelle annidate (col colspan puoi coprire lo spazio di più celle intere, non avere una cella che corrisponda a una cella e mezza - a meno di non avere immagini e colonne spaziatrici ulteriori scombinando il codice e restando comunque a rischio che l'allineamento salti)
Ciao, come dice Prill l'ideale sarebbe avere delle tabelle annidate. In tal modo si ha una gestione più logica e una impostazione più semplice della struttura.
Ad ogni modo si può ottenere quella stessa impaginazione anche con un'unica tabella, come stai chiedendo.
E' chiaro che non puoi dividere lo spazio di una cella con l'uso del colspan ma puoi comunque utilizzare più celle unite dove ti serve avere lo spazio suddiviso in altre righe.
Nella riga in cui ci sono tre celle, puoi utilizzarne quattro unendo le due centrali.
E' più semplice farlo che spiegarlo a parole. Ti posto un esempio:
codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> table,td,th{ border: 1px solid Black } </style> </head> <body> <table> <tr> <th>Heading 1</th> <th colspan="2">Heading 1</th> <th>Heading 1</th> </tr> <tr> <td>Item 1</td> <td colspan="2">Item 2</td> <td>Item 3</td> </tr> <tr> <th colspan="2">Primo</th> <th colspan="2">Secondo</th> </tr> <tr> <td>Item 4<br>Item 4.bis</td> <td colspan="2">Item 5</td> <td>Item 6</td> </tr> <tr> <td>Item 7</td> <td colspan="2">Item 8</td> <td>Item 9</td> </tr> </table> </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
non è una soluzione stabile, se popoli la tabella con contenuti diversi l'allineamento saltaOriginariamente inviata da KillerWorm
grazie mille sei stato chiarissimo
Figurati.grazie mille sei stato chiarissimo
@Prill: Scusami, non riesco a capire cosa intendi. Mi sto perdendo qualcosa.
Per maggiore chiarezza, e per avere un migliore riscontro, posto un esempio con le due soluzioni:
Chiaramente, con le tabelle annidate, non essendoci particolari vincoli tra le celle della riga a 2 celle, e quelle delle righe a 3 celle, si ottiene una distribuzione ottimale degli spazi e dei contenuti all'interno delle diverse celle.codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> table{ background: Gainsboro; } table,td,th{ border: 1px solid Black; } .tdtable,.tdtable>table{ border: 0; } .tdtable>table{ width:100%; } caption { caption-side: bottom; } </style> </head> <body> <table> <caption>Tabella singola</caption> <tr><th>Heading 1</th><th colspan="2">Heading 1</th><th>Heading 1</th> </tr> <tr><td>Lorem ipsum dolor sit amet</td><td colspan="2">consectetur adipisicing elit</td><td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td></tr> <tr><th colspan="2">Ut enim ad minim veniam, quis nostrud</th><th colspan="2">exercitation ullamco</th></tr> <tr><td>Item 4<br>Item 4.bis</td><td colspan="2">Item 5</td><td>Item 6</td></tr> </table> <hr> <table> <caption>Tabelle annidate</caption> <tr><th>Heading 1</th><th>Heading 1</th><th>Heading 1</th> </tr> <tr><td>Lorem ipsum dolor sit amet</td><td>consectetur adipisicing elit</td><td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td></tr> <tr> <td colspan="3" class="tdtable"> <table> <tr><th>Ut enim ad minim veniam, quis nostrud</th><th>exercitation ullamco</th></tr> </table> </td> </tr> <tr><td>Item 4<br>Item 4.bis</td><td>Item 5</td><td>Item 6</td></tr> </table> </body> </html>
Mentre, nella tabella singola, il punto di divisione delle due celle è stabilito in base alle due colonne centrali. Perciò ricade sempre all'interno dello spazio occupato dalla cella centrale delle righe a tre celle. Questo, è vero, può provocare una impaginazione meno ottimale ma, a parte questo, non mi pare una soluzione instabile e non mi è chiaro a quale allineamento ti riferisci quando dici che salta.
Ad ogni modo, a mio parere, ribadisco che (in generale) sarebbe preferibile la soluzione a tabelle annidate, che tu stessa hai consigliato.
PS: sia chiaro, non voglio accendere alcuna polemica. E' giusto per capire se mi sfugge qualcosa che non ho considerato e che, eventualmente, potrebbe servire ad altri utenti.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Anche io prima di chiedere aiuto avevo considerato le tabelle annidate ma non mi forniva lo stesso output dato dall'immagine da me allegataFigurati.
@Prill: Scusami, non riesco a capire cosa intendi. Mi sto perdendo qualcosa.
Per maggiore chiarezza, e per avere un migliore riscontro, posto un esempio con le due soluzioni:
Chiaramente, con le tabelle annidate, non essendoci particolari vincoli tra le celle della riga a 2 celle, e quelle delle righe a 3 celle, si ottiene una distribuzione ottimale degli spazi e dei contenuti all'interno delle diverse celle.codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> table{ background: Gainsboro; } table,td,th{ border: 1px solid Black; } .tdtable,.tdtable>table{ border: 0; } .tdtable>table{ width:100%; } caption { caption-side: bottom; } </style> </head> <body> <table> <caption>Tabella singola</caption> <tr><th>Heading 1</th><th colspan="2">Heading 1</th><th>Heading 1</th> </tr> <tr><td>Lorem ipsum dolor sit amet</td><td colspan="2">consectetur adipisicing elit</td><td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td></tr> <tr><th colspan="2">Ut enim ad minim veniam, quis nostrud</th><th colspan="2">exercitation ullamco</th></tr> <tr><td>Item 4<br>Item 4.bis</td><td colspan="2">Item 5</td><td>Item 6</td></tr> </table> <hr> <table> <caption>Tabelle annidate</caption> <tr><th>Heading 1</th><th>Heading 1</th><th>Heading 1</th> </tr> <tr><td>Lorem ipsum dolor sit amet</td><td>consectetur adipisicing elit</td><td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td></tr> <tr> <td colspan="3" class="tdtable"> <table> <tr><th>Ut enim ad minim veniam, quis nostrud</th><th>exercitation ullamco</th></tr> </table> </td> </tr> <tr><td>Item 4<br>Item 4.bis</td><td>Item 5</td><td>Item 6</td></tr> </table> </body> </html>
Mentre, nella tabella singola, il punto di divisione delle due celle è stabilito in base alle due colonne centrali. Perciò ricade sempre all'interno dello spazio occupato dalla cella centrale delle righe a tre celle. Questo, è vero, può provocare una impaginazione meno ottimale ma, a parte questo, non mi pare una soluzione instabile e non mi è chiaro a quale allineamento ti riferisci quando dici che salta.
Ad ogni modo, a mio parere, ribadisco che (in generale) sarebbe preferibile la soluzione a tabelle annidate, che tu stessa hai consigliato.
PS: sia chiaro, non voglio accendere alcuna polemica. E' giusto per capire se mi sfugge qualcosa che non ho considerato e che, eventualmente, potrebbe servire ad altri utenti.
Permessi di invio
Rispondi quotando
