Comment créer un template phavec des <table&gt

Je souhaite créer un damier en php 6 colonnes par 4 rangées dont chaque case doit faire 120pixels de coté, ou l'affichage d'images est d'abord effectué par
<?php eregi(.png .jpeg. gif) > pour détecter l'extension du fichier image puis redimensionne les images contenues dans toutes les pages du site si celles si sont trop grandes à 120 pixels de côté,
ainsi l'aspect visuel me permettrait de voir une grille d'images et en cliquant sur l'une d'elle, tomber sur la page ou elle figure.
La seule chose dont je suis sur c'est que le code html est le suivant en statique:

<div id="random"><!-- start contents -->
<table id="random_table">
<tr>
<td class="random_blog_local"><a class="random_blog_local" href="l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=https://farm1.static.flickr.com/225/446058138_75ce03135d_m.jpg" alt="DSC00782.JPG" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=https://farm3.static.flickr.com/2093/2088454753_9cee05a68b_m_d.jpg" alt="Antonin Fourneau @ Toyko Wondersite" /></a></td>

<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/?p=266"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/blog/cv_test_hand.jpg" alt="OpenCV Processing test" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/18"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/8=8=Jankenpopp=Sweetie.jpg" alt="8=8=rehearsal" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/19"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http:/l'adresse de la page/index/images/thumbnails/eniarof_logo.png" alt="ENIAROF" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/31"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/cubed_screenshot.png" alt="Abstract Machine : ^3" /></a></td>
</tr>
<tr>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/?p=34"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/buddha_face.jpg" alt="The Thousand Faces of Buddha, Olivier Baudry, 2000/2003" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/?p=64"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/net_lego_2.jpg" alt="net_lego workshop, Olivier Baudry" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/?p=75"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/mice.png" alt="Mice, Olivier Baudry" /></a></td>

<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/93"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=https://farm1.static.flickr.com/138/339563277_c2eafe12ca_m.jpg" alt="Picture 4" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/?p=28"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/remap.png" alt="Abstract Machine : Remap" /></a></td>
<td class="random_machine_local"><a class="random_machine_local" href="http://l'adresse de la page/thesis/machines.php?id=185"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/machines/wattenberg_glass_candyman.png" alt="Wattenberg, The Shape of Song: Phillip Glass’ ‘Candyman 2’" /></a></td>
</tr>
<tr>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/book_ecm.jpg" alt="Book: Nouveaux medias, nouveaux langages, nouvelles écritures" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/gba_export.jpg" alt="GBA Export" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/?p=88"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/virtual_review.jpg" alt="Virtual Review CD-Rom" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/assises_nationales_rennes.png" alt="Assises nationales des écoles d’art" /></a></td>

<td class="random_machine_local"><a class="random_machine_local" href="http://l'adresse de la page/thesis/machines.php?id=195"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/machines/plot_autoroute.png" alt="plot à l’intérieur d’un nœud d’autoroute" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/machines/stanley_synchronizer_update.png" alt="abstractmachine synchronizer update" /></a></td>
</tr>
<tr>
<td class="random_blog_local"><a class="random_blog_local" href="l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://www.assoc-amazon.co.uk/e/ir?t=abstractmachi-21&l=as2&o=2&a=0860916863" alt="" /></a></td>
<td class="random_diagram_local"><a class="random_diagram_local" href="l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/machines/atari_night_driver_standup.png" alt="Night Driver, Atari, 1976" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/blog/marey_fusil_chronophotographique.png" alt="Processing lesson on lists, Atelier Hypermédia" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/high_noon_clock.jpg" alt="High Noon" /></a></td>
<td class="random_blog_local"><a class="random_blog_local" href="l'adresse de la page "><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/thumbnails/parachute_cover.jpg" alt="Parachute Magazine Cover" /></a></td>

<td class="random_blog_local"><a class="random_blog_local" href="http://l'adresse de la page/blog/05"><img src="http://l'adresse de la page/index/images/generate/crop.php?width=120&url=http://l'adresse de la page/index/images/generate/mashup.php" alt="oupocreanum : mashup" /></a></td>
</tr>
</table>



ensuite mon css a cette forme là :

Code:

body {
background-image: url(./backgrounds/dotted.gif);
background-repeat: repeat;
background-attachment: scroll;
}


div#random {
padding:0px;

}

table#random_table {
margin:0px;
padding:0px;
border-collapse: collapse;
margin-left:10px;
margin-top: 25px;
margin-bottom: 25px;
}

tr {
padding:0px;
}

td img {
display:block;
}

td.random_blog_local, td.random_blog_link, td.random_machine_local, td.random_diagram_local, td.random_abstract_local {
padding:0px;
border: 1px;
border-style: dotted;
width:120px;
height:120px;
background-color: rgb(255,255,255);
background-repeat:no-repeat;
background-position: center center;
}

td.random_blog_local, td.random_blog_link {
background-image: url(./randomizer/blog.gif);
}

td.random_diagram_local {
background-image: url(./randomizer/diagrams.gif);
}

td.random_machine_local {
background-image: url(./randomizer/machines.gif);
}

td.random_abstract_local {
background-image: url(./randomizer/abstracts.gif);
}

a.random_blog_local:hover img, a.random_blog_link:hover img, a.random_machine_local:hover img, a.random_diagram_local:hover img, a.random_abstract_local:hover img {
margin-left: -1000px;
}




et enfin un petit fichier javascript :


// global variable holding the machine window
var program_window;

function openShockwave(name, filename, width, height, stretch) {

var url = 'shockwave.php?name=' + name + '&filename=' + filename + '&stretch=' + stretch + '&width=' + width + '&height=' + height + '';

var x = randomX(width);
var y = randomY(height);
var stretch_yes_or_no;

if (stretch) {
stretch_yes_or_no = 'yes';
height += 18;
} else {
stretch_yes_or_no = 'no';
}

features = 'width=' + width + ', height=' + height + ', location=no, menubar=no, scrollbars=no, resizable=' + stretch_yes_or_no + ', status=' + stretch_yes_or_no + ', toolbar=no, top=' + x + ', left=' + y + ', screenX=' + x + ', screenY=' + y + '';


// if the window is already open, close it (easier to control window size)
if (program_window != null) {
// make sure the user hasn't already closed it himself (in which case the following lines wouldn't run!)
if (program_window.closed == false) program_window.close();
}

// open up a new window with the features we want
program_window = window.open(url, 'machine', features);

}


function openProcessing(name, filename, width, height) {

var url = 'processing.php?name=' + name + '&filename=' + filename + '&width=' + width + '&height=' + height + '';

var x = randomX(width);
var y = randomY(height);

features = 'width=' + width + ', height=' + height + ', location=no, menubar=no, scrollbars=no, resizable=no, status=no, toolbar=no, top=' + x + ', left=' + y + ', screenX=' + x + ', screenY=' + y + '';

// if the window is already open, close it (easier to control window size)
if (program_window != null) {
// make sure the user hasn't already closed it himself (in which case the following lines wouldn't run!)
if (program_window.closed == false) program_window.close();
}

// open up a new window with the features we want
program_window = window.open(url, 'machine', features);

}


function openLink( url, width, height, scrollbars ) {

var x = randomX(width);
var y = randomY(height);

if (scrollbars) {
scrollbars = 'yes';
} else {
scrollbars = 'no';
}


var features = 'width=' + width + ', height=' + height + ', location=no, menubar=no, scrollbars=' + scrollbars + ', resizable=yes, toolbar=no, top=' + x + ', left=' + y + ', screenX=' + x + ', screenY=' + y + '';

// if the window is already open, close it (easier to control window size)
if (program_window != null) {
// make sure the user hasn't already closed it himself (in which case the following lines wouldn't run!)
if (program_window.closed == false) program_window.close();
}

// open up a new window with the features we want
program_window = window.open(url, 'machine', features);

}


function randomX(width) {
var offset = 20, screenW = screen.availWidth;
return ( Math.round( Math.random() * (screenW - (width+offset) ) ) );
}


function randomY(height) {
var offset = 20, screenH = screen.availHeight;
return( Math.round( Math.random() * (screenH - (height+offset) ) ) );
}


J'ai une piste en php mais je ne sais pas trop:

le_titre_de_l'image](l'adresse_url_de_l'image) :

// do a querty with all the id's with local image tags  -- random results
$query = "SELECT id FROM wp_posts WHERE post_status='publish' AND post_content REGEXP '![\[][^\]\)]([^\)])' ORDER BY RAND()";
$content_query = "SELECT post_content FROM wp_posts WHERE";

// these are regular expressions for extracting urls from above results
$full_pattern = "/!\[.*?\]\(.*?\)/s";
$url_pattern = "/\]\(.*?\)/s";
$title_pattern = "/!\[.*?\]/s";
$url_start = 2;
$title_start = 2;
// a function that grabs all the above data and puts it into an array named $urls
$urls = getImages('blog', $how_many, $query, $content_query, $full_pattern, $url_pattern, $url_start, $title_pattern, $title_start);
</div>


Je suis sur du javascript, du css , il me manque le php, j'ai pas d'idée sur comment faire et pourtant, j'ai acheté des bouquins sur le sujet!

fonction crop ou random avec une requête get post ?

Il me semble avoir avancé avec ceci :



<div id="random">
<table id="random_table">
<?php
$nb_lignes=4;
$nb_colonnes=6;

for($i=1;$i<=$nb_lignes;$i=$i+1){

echo "<tr>";

for($j=1;$j<=$nb_colonnes;$j=$j+1){
echo '<td class="'.$couleur.'">'.$img.'</a></td>/n';
}

echo "</tr>\n";

}
?>
</table>