Problema adattamento tabella HTML

**RichiFra03** · 10-08-2014, 10:43

Salve a tutti
questa è la mia prima discussione riguardante alla programmazione del web, ed, essendo ancora alle prime armi, mi scuso se si saranno problemi di incomprensione.
Sul mio sito, ho creato, nella sezione articoli, una tabella HTML nella quale l'utente seleziona la categoria. Il problema sorge quando vado a visualizzare quella pagina su telefono, oppure basta solo restringere il browser ed ecco che non si adatta. Il sito e questo: http://riccardofragozzi.com/articoli/
Grazie a tutti!

**Prill** · 10-08-2014, 11:54

Ciao, benvenuto sul forum.
Le immagini hanno dimensioni fisse, la tabella non può restringersi al di sotto di 300px * 3 (larghezza immagini) + cellspacing e cellpadding + bordo che in totale fa circa 934 pixel.
Se vuoi che la tabella si riduca ulteriormente dovrai impostare le dimensioni delle immagini in percentuale o assegnar loro dimensioni inferiori quando la larghezza della finestra si riduce (per esempio con le media queries)

**RichiFra03** · 10-08-2014, 14:34

Grazie 1000 prill x la risposta.
essendo alle prime armi, ho capito il concetto, ma non so come fare a ridurre o ridimensionare del 33% circa le immagini(+ la spaziatura, ecc...). Cercando su internet non si trova molto, quindi sarei davvero grato se mi consiglieresti qualche link o esempio utile.
Grazie infinite!!!

**Prill** · 10-08-2014, 16:31

Prova ad assegnare alle immagini un width:100%; height:auto; max-width:300px;

**RichiFra03** · 11-08-2014, 09:56

Grazie 1000. Ho creato quella pagina tramite una tabella HTML. Mi sembra quindi di capire che adattando le dimensioni delle immagini si adattano anche le celle. Dal momento che ho creato e generato i codici con kompozer(che sembra ottimo x principianti), mi trovo in difficoltà adattando il tutto; metto quindi i codici che utilizzo, e, se mi potreste dare una mano ne sarei davvero grato. Grazie a tutti!!

**Prill** · 11-08-2014, 10:45

Il codice potrebbe essere così:

codice:

<style type="text/css">
#myTable {
    width:100%;
    background-color:#999;
    border:none;
    border-collapse:collapse;
}
#myTable tr{
    border:1px solid #000
}
#myTable td{
    width:33%;
    text-align:center;
    background-color:#fff;
    padding:0;
}
#myTable td div{
    padding:15px;
}
#myTable td h6{
    font-family:Square721 BT;
    font-weight: normal;
    font-size:16px;
}
#myTable td img{
    display: block;
    width:100%;
    height: auto;
    max-width:300px;
    margin:0 auto;
}
</style>
</head>

<body>
<table id="myTable">
 <tr>
  <td>
    <div>
      <img alt="" src="omesso/audio_e_musica.png">
     <h6>Audio&amp; Musica</h6></div>
  </td>
  <td>
    <div>
       <img alt="" src="omesso/fotografia_e_grafica.png">
        <h6 >Fotografia&amp; Grafica</h6>
   </div>
  </td>
  <td>
    <div>
      <img alt="" src="omesso/Giochi.png">
       <h6>Giochi</h6>
    </div>
  </td>
 </tr>
 di seguito altre righe ...
</table>

eliminando un po' di tag e gli stili in linea.

**RichiFra03** · 11-08-2014, 19:55

Grazie infinite! Dovevo pubblicare i codici che utilizzo, ma, essendo troppo lunghi, non sono arrivato. Appena posso provo, poi ti faccio sapere. Grazie ancora!

**RichiFra03** · 11-08-2014, 20:38

Ok, ho provato il codice e sembra funzionare perfettamente. Sarà ovviamente da adattare, es. l'indirizzo delle immagini, ma appena ho tempo lo faccio io. Ora sorge una domanda: sono le celle della tabella che si adattano alle dimensioni dell'immagine, oppure le immagini vengono allargate fino a coprire l'intera area della cella? Scusa se è una domanda banale ma non capisco molto per ora. Grazie ancora!!

**Prill** · 11-08-2014, 22:09

Sono le immagini che ora si adattano alle celle e alla tabella che a sua volta si adatta al suo contenitore.
In precedenza la tabella, con dimensioni in percentuale, non poteva ridimensionarsi al di sotto dei 900 e rotti pixel (perché le immagini avevano una dimensione fissa) e non seguiva perciò il ridimensionamento del div che la conteneva quando questo diventava più stretto.
Da qui la "fuoriuscita" laterale della tabella (anche alla mia risoluzione, 1366*768).

Abbiamo assegnato alle immagini una dimensione percentuale e stabilito che si ingrandiscano al massimo fino a 300px (che era la larghezza fissa precedente) attraverso il max-width (larghezza massima)

Ho volontariamente omesso la prima parte dell'indirizzo delle immagini, ma ho anche ripulito il codice solo per la prima riga per fornirti un esempio di come procedere

**RichiFra03** · 14-08-2014, 11:42

Ho appena finito di provare i codici. Devo dire che funzionano egregiamente... Ho notato che però sotto una certa dimensione della finestra del browser, le immagini vengono dimensionate tutte diverse. Non fare caso alle immagini di "sicurezza informatica" e "sistemi operativi" che non riesco a trovarle nella media, quindi le immagini originali non vengono visualizzate... Comunque non penso centri niente. Inizialmente aggiungevo semplicemente celle, con il tag TD, poi ho cercato su internet il tag per creare una nuova riga e sono riuscito a risolvere da solo. Ora i problemi sono due: quello delle dimensioni delle immagini diverse sotto una certa dimensione del browser, il secondo è quello di inserire il link quanto l'utente clicca su un'immagine o sul testo sottostante, ma quello è una cosa separata, che penso si possa gestire un un altra discussione.
Grazie 1000!!!

Discussione: Problema adattamento tabella HTML

Strumenti discussione

Ricerca discussione

Visualizza

Problema adattamento tabella HTML

Permessi di invio