Come imparare HTML e CSS: creare una tabella

table

« Older   Newer »
 
  Share  
.
  1. Deku.
    view post Posted on 29/3/2017, 19:15
        +1   -1
     
    .
    Avatar


    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    18,517
    Pokécrediti
    +6,747

    Status
    OFFLINE

    Tabella


    Questa che vedete qua sotto è una tabella 2x2 molto semplice, oggi vi spiegherò tutto ciò che c'è da sapere sulle tabelle html ^^

    12
    34
    CODICE
    Per definire quando inizia la tabella si usa il codice <table> mentre per indicare la fine si usa il codice </table>
    Per definire quando inizia una riga si usa il codice <tr> mentre per indicare la fine si usa il codice </tr>
    Per definire quando inizia una colonna si usa il codice <td> mentre per indicare la fine si usa il codice </td>


    Una tabella da una cella sola sarà una tabella 1x1 (una riga e una colonna) ecco il codice ed un esempio:
    1

    HTML
    <table><tr><td>1</td></tr></table>


    Una tabella da due celle in una sola riga sarà una tabella 2x1 (una riga e due colonne) ecco il codice ed un esempio:
    12

    HTML
    <table><tr><td>1</td><td>2</td></tr></table>


    Una tabella da due celle in due righe differenti sarà una tabella 1x2 (due righe e una colonna) ecco il codice ed un esempio:
    1
    2

    HTML
    <table><tr><td>1</td></tr><tr><td>2</td></tr></table>


    Pertanto una tabella 4x4 (sarà una tabella con due righe e due colonne)
    12
    34

    HTML
    <table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>


    Se vogliamo unire più colonne, come nell'esempio usiamo il comando colspan="x" dove x indica il numero di colonne da unire
    1
    23

    HTML
    <table><tr><td colspan="2">1</td></tr><tr><td>2</td><td>3</td></tr></table>


    Se vogliamo unire più righe, come nell'esempio usiamo il comando rowspan="x" dove x indica il numero di righe da unire
    12
    3

    HTML
    <table><tr><td rowspan="2">1</td><td>2</td></tr><tr><td>3</td></tr></table>


    NB: Prima di iniziare a lavorarci sopra cercate di capire come l'html struttura una tabella.. Una volta che avete capito come si devono disporre i td e i tr avrete fatto gran parte del lavoro :)

    Arrivati in questo punto della guida vi chiedete perché le vostre tabelle sono invisibili.. Semplicemente perché non hanno alcuna "descrizione", ciò che avete fatto è solo la struttura della tabella!

    dei codici che possono esservi utili sono questi tre:
    border="X" , cellspacing="X" , cellpadding="X" .
    Al posto di X inserite un numero, questi codici vanno tutti inseriti all'interno del table es: <table border="1" cellspacing="1" cellpadding="1"> ovviamente scegliete voi quale mettere, non è obbligatorio metterli tutti e 3.
    Border crerà un bordo di x Pixel tra le celle delle colonne, cellspacing creerà uno spazio di x Pixel tra tutte le celle, cellpadding creerà uno spazio di x Pixel tra ogni cella e il suo contenuto.

    Edited by Deku. - 29/3/2017, 20:59
     
    .
  2. Reik.
    view post Posted on 30/3/2017, 12:06
        +1   -1
     
    .
    Avatar

    Advanced Member
    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    4,635
    Pokécrediti
    0
    Location
    Puglia

    Status
    OFFLINE
    Deku sto cercando di sfruttare i codici che hai gentilmente inserito nel topic per sistemare il mio topic trade ma anche inserendo
    CODICE
    <tr>X</tr>
    mi da errore e sono costretto ad elminare quei codici.... cosa sbaglio ? :gratt:

    Up: Ok ho capito il problema, mi devi spiegare la roba dei pixel tra colonne ecc.... se voglio mettere l'immagine di un pokemon nella colonna quanto spazio serve ?
    Contacts
     
    .
  3. Deku.
    view post Posted on 30/3/2017, 19:32
        +1   -1
     
    .
    Avatar


    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    18,517
    Pokécrediti
    +6,747

    Status
    OFFLINE
    Allora, non serve a nulla fare come hai fatto te:
    CODICE
    <tr>X</tr>

    Perché la cosa giusta è questa:
    CODICE
    <table><tr><td>X</td></tr></table>


    Allora "lo spazio" puoi anche non fornirglielo lo fa in automatico ^^ ti faccio un esempio:
    dragonite

    CODICE
    <table border="1"><tr><td>[IMG]http://www.pkparaiso.com/imagenes/xy/sprites/animados/dragonite.gif[/IMG]</td></tr></table>

    Puoi fornirgli però un cellpadding, ecco un esempio:
    dragonite

    CODICE
    <table border="1" cellpadding="20"><tr><td>[IMG]http://www.pkparaiso.com/imagenes/xy/sprites/animados/dragonite.gif[/IMG]</td></tr></table>
     
    .
  4. Reik.
    view post Posted on 30/3/2017, 19:36
        +1   -1
     
    .
    Avatar

    Advanced Member
    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    4,635
    Pokécrediti
    0
    Location
    Puglia

    Status
    OFFLINE
    Ok sono riuscito a capire come usare i codici però se voglio mettere una colonna affianco ad un altra come faccio ?? Per farti un esempio nel mio trade i pokemon escono uno sotto l'altro T_____T
    Contacts
     
    .
  5. Deku.
    view post Posted on 30/3/2017, 19:40
        +1   -1
     
    .
    Avatar


    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    18,517
    Pokécrediti
    +6,747

    Status
    OFFLINE
    C'è il codice nella guida ^^
    12

    CODICE
    <table><tr><td>1</td><td>2</td></tr></table>


    Ovviamente se vuoi che i bordi si vedano:

    12

    CODICE
    <table border="1"><tr><td>1</td><td>2</td></tr></table>
     
    .
  6. Reik.
    view post Posted on 30/3/2017, 19:44
        +1   -1
     
    .
    Avatar

    Advanced Member
    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    4,635
    Pokécrediti
    0
    Location
    Puglia

    Status
    OFFLINE
    Bene dunque devo ri-sistemare tutto, grazie Deku :like:
    Contacts
     
    .
  7. Deku.
    view post Posted on 30/3/2017, 19:51
        +1   -1
     
    .
    Avatar


    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    18,517
    Pokécrediti
    +6,747

    Status
    OFFLINE
    Di nulla, se hai problemi scrivi pure qui sotto ^^ appena ho la possibilità farò altre guide, con altri codici ancora più belli :D
     
    .
  8. .Yura.
    view post Posted on 6/6/2017, 13:53
        +1   -1
     
    .

    User deleted
    komaladewpider


    Che casino lol, scusa deku ma il link dell'immagine bisogna metterlo in mezzo ai td e /td giusto?

    Edited by .Yura. - 6/6/2017, 18:53
     
    .
  9. Deku.
    view post Posted on 6/6/2017, 14:24
        +1   -1
     
    .
    Avatar


    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    18,517
    Pokécrediti
    +6,747

    Status
    OFFLINE
    Esatto :)

    Ti ho sistemato il codice ^^

    CODICE
    <table>

    <tr>
    <td>[IMG]1http://pokeunlock.com/sprites/front/komala.gif[IMG]</td>
    <td>[IMG]2http://pokeunlock.com/sprites/front/dewpider.gif[IMG]</td>
    </tr>

    </table>


    Tolti gli 1, 2 prima del link dell'immagine
    Messo / nel secondo IMG
     
    .
  10. .Yura.
    view post Posted on 6/6/2017, 17:54
        +1   -1
     
    .

    User deleted
    CITAZIONE (Deku. @ 6/6/2017, 15:24) 
    Esatto :)

    Ti ho sistemato il codice ^^

    CODICE
    <table>

    <tr>
    <td>[IMG]1http://pokeunlock.com/sprites/front/komala.gif[IMG]</td>
    <td>[IMG]2http://pokeunlock.com/sprites/front/dewpider.gif[IMG]</td>
    </tr>

    </table>


    Tolti gli 1, 2 prima del link dell'immagine
    Messo / nel secondo IMG

    Perfetto ho capito ^^
    Deku. Avrei qualche domanda però:
    1) se voglio per esempio aggiungere un terzo mi basta aggiungere la stringa
    <td>immagine</td> prima di </tr> giusto?

    2) come faccio ad aumentare lo spazio tra i due?

    3) come faccio a inserire il set del pokémon SOTTO all'immagine? Cioè immagine sopra e set sotto

    Edited by .Yura. - 7/6/2017, 00:04
     
    .
  11. Deku.
    view post Posted on 7/6/2017, 12:50
        +1   -1
     
    .
    Avatar


    MALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STARMALE_STAR

    Group
    Member
    Posts
    18,517
    Pokécrediti
    +6,747

    Status
    OFFLINE
    1) esatto ad ogni "td" prima della chiusura del "tr" corrisponde ad una colonna nella riga ^^

    2) cambia
    CODICE
    <table> con <table cellspacing="XX">
    al posto di XX metti un numero a tua scelta :)

    3) Molto semplice xD premi invio e scrivi sotto all'immagine, basta che tutto sia dentro ai "td" e "/td" ^^
     
    .
  12. .Yura.
    view post Posted on 7/6/2017, 13:42
        +1   -1
     
    .

    User deleted
    komala
    qualcosa    		dewpider
    rodolfo


    EDIT: finalmente :'D

    Edited by .Yura. - 7/6/2017, 16:19
     
    .
  13. ~Snivy
    view post Posted on 7/6/2017, 15:10
        +1   -1
     
    .
    Avatar


    Group
    Moderatore
    Posts
    13,948
    Pokécrediti
    +42,251
    Location
    Unima

    Status
    OFFLINE
    Piccolo intervento rapido
    Non mettere mai nulla quando chiudi un codice, solo all'apertura
    Quindi
    CODICE
    <table celleccedera=10>

    </table>
    Contacts
     
    .
  14. .Yura.
    view post Posted on 7/6/2017, 15:15
        +1   -1
     
    .

    User deleted
    CITAZIONE (~KSnivy @ 7/6/2017, 16:10) 
    Piccolo intervento rapido
    Non mettere mai nulla quando chiudi un codice, solo all'apertura
    Quindi
    CODICE
    <table celleccedera=10>

    </table>

    Ah ok riprovo grazie ^^
     
    .
  15. goodboyer
    view post Posted on 14/11/2019, 15:32
        +1   -1
     
    .

    User deleted
    Ma questo codice funziona anche in una newsletter? Vorrei creare due riquadri dove inserire 2 immagini con sotto i relativi testi... Sto provando il codice nell'editor di OpenDEM ma non riesco a vedere la tabella creata. Eventualmente sapete dove posso trovare dei template pronti con una tabella con due colonne e una sola riga (o anche due righe)?
     
    .
14 replies since 29/3/2017, 19:15   222 views
  Share  
.

Informatica
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumCommunity