Probleme de tableau

Question

UncleDid

7 Oct 2017 à 21:52

Bonjour,
je sais que c'est pas la meilleure façon de faire un galerie photo, mais je n'ai trouvé que ce moyen : les tableaux (on m'a déjà épinglé "old school")

le but est de faire des cases interchangeables, mais il m'en manque deux pour lesquelles je ne trouve pas de solution...

la base : http://leblogduncledid.blogspot.fr/2017/10/tstgalerie2.html
le resultat : http://leblogduncledid.blogspot.fr/2017/10/tst3col.html


<style type="text/css">

.th1 {
width: 184px;
height: 98px;
overflow: hidden;
}

.th2 {
width: 372px;
height: 209px;
overflow: hidden;
}

.th3 {
width: 246px;
height: 209px;
overflow: hidden;
}

.tv1 {
width: 121px;
height:210px;
overflow: hidden;
}

.tv2 {
width: 183px;
height: 312px;
overflow: hidden;
}

.tv3 {
width: 245px;
height: 424px;
overflow: hidden;
}

.pano {
width: 372px;
height: 98px;
overflow: hidden;
}

</style>


<!--- TH1+TH1 --->
<table width="274">
<tr>
<td>
<div class="th1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="185" height="99"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td><td>
<div class="th1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="185" height="99"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</table>

<!--- TH2 --->
<table width="274">
<tr><td>
<div class="th2"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="374" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>

<!--- TH3+TV1 --->
<table width="274">
<tr><td>
<div class="th3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="247" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>

<!--- TV1+TH3 --->
<table width="274">
<tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="th3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="247" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>

<!--- TV1+TV1+TV1 --->
<table width="274"><tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</tr></table>

<!--- TV2+TV2 --->
<table width="274"><tr><td>
<div class="tv2"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="184" height="320"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv2"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="184" height="320"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</table>

<!--- TV3+(TV1+TV1) --->
<table width="274"><tr>
<td rowspan="2">
<div class="tv3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="246" height="431"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr><tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</tr></table>

<!--- (TV1+TV1)+TV3 --->
<table width="274"><tr>
<th>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</th>
<th rowspan="2">
<div class="tv3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="246" height="431"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</th>
</tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</tr>
</table>

<!--- PANORAMA --->
<table>
<tr><td>
<div class="pano"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="373" height="98"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>

Mon soucis est pour les deux dernières "cases"

"TV2 TH1
TH1
TH1"
soit 1 photo sur 3 lignes à gauche et 3 photos à droite

et

" TH1 TV2
TH1
TH1"
soit 3 photos à gauche et 1 à droite sur trois lignes

Merci pour un petit coup de pouce Smiley cligne

Modifié par UncleDid (07 Oct 2017 - 22:44)

niuxe

Modérateur

8 Oct 2017 à 03:10

1. initiation au positionnement - 1
2. initiation au positionnement - 2

C'est pas très long à lire et ça donne des vitamines.
Modifié par niuxe (08 Oct 2017 - 03:12)

UncleDid

8 Oct 2017 à 11:12

...
Je suis pas sur de saisir comment l'appliquer à mon cas, mais je vais essayer.
Merci.

UncleDid

8 Oct 2017 à 13:04

J'essaie, il ne reste que les marges entre les photos... J'avance Smiley smile

niuxe

Modérateur

9 Oct 2017 à 19:19

Hello,

Si tu rencontres des soucis pour le faire, n'hésite pas à nous montrer ton code afin que l'on puisse t'aider Smiley cligne

Sujet clos

Questions générales et questions de débutants

Probleme de tableau