Allora ti faccio un paio di appunti:
- Il codice che hai nella pagina è completamente errato. Mancano le intestazioni e tutto il resto. Non puoi iniziare con un br. Non puoi inserire br tra una riga e l'altra per andare sotto.
- Per rimpicciolire le immagini basta usare il css.
- Per un semplice popup ti basta usare un po di js.
Proviamo a fare un po di ordine e impara a indentare il codice altrimenti non ti trovi più. Ora perchè la struttura è semplice e ok ma appena aggiungi altro poi non ti trovi più.
Ti faccio vedere come puoi ripulire il codice e farti un esempio di base.
Codice: Seleziona tutto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tables</title>
<style>
img {
max-width: 400px;
width: 100%;
margin: 0 auto;
}
h2 {
text-align: center;
border-bottom: 1px solid grey;
}
h5 {
text-align: center;
border-top: 1px solid grey;
padding-top: 5px;
}
h1 {
margin: 0;
}
table {
text-align: center;
margin: 0 auto;
width: 100%;
}
</style>
</head>
<body>
<h2>
Lorem ipsum dolor sit amet.
</h2>
<table>
<thead>
<tr>
<th colspan="3">
<h1>Grafici e Andamenti</h1>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Testo 1</h4>
<a href="#" onclick="popupOpener(this)" alt="Img">
<img src="https://placehold.it/1000x800" alt="" title="Img">
</a>
</td>
<td>
<h4>Testo 1</h4>
<a href="#" onclick="popupOpener()" alt="Img">
<img src="https://placehold.it/1000x800" alt="" title="Img">
</a>
</td>
<td>
<h4>Testo 1</h4>
<a href="#" onclick="popupOpener()" alt="Img">
<img src="https://placehold.it/1000x800" alt="" title="Img">
</a>
</td>
</tr>
<tr>
<td>
<h4>Testo 1</h4>
<a href="#" onclick="popupOpener()" alt="Img">
<img src="https://placehold.it/1000x800" alt="" title="Img">
</a>
</td>
<td>
<h4>Testo 1</h4>
<a href="#" onclick="popupOpener()" alt="Img">
<img src="https://placehold.it/1000x800" alt="" title="Img">
</a>
</td>
<td>
<h4>Testo 1</h4>
<a href="#" onclick="popupOpener()" alt="Img">
<img src="https://placehold.it/1000x800" alt="" title="Img">
</a>
</td>
</tr>
</tbody>
</table>
<h5>Sir Xiradorn - Copyright</h5>
<script>
/**
* Funzione per l'apertura di un popup dal click
* @ Author: Sir Xiradorn
*/
function popupOpener (t) {
// Configura i valori per la larghezza e l'altezza del popup
var c = {
larghezza: "500",
altezza: "300"
};
/* Non toccare questi valori */
var url, nameWindow, imageLink, paramAssembly;
url = t.childNodes[1].getAttribute("src");
nameWindow = t.getAttribute("alt");
paramAssembly = "width="+c.larghezza+",height="+c.altezza+",menubar=no,titlebar=no,toolbar=no"
window.open(url, nameWindow, paramAssembly);
}
</script>
</body>
</html>
Questo è un modo un po più professionale e funzionale per farlo. Ora te l'ho reso pure Responsive!!!
Edit: Risultato visibile qua:
http://jsbin.com/zuzaga/edit?html,output
