Mise en page de tableau

**bilane** · 09/09/2006, 11h03

Bonjour à tous,

Je veux faire une page php afin d'afficher les membres d’année de parution d’un journal, la période est de 1977 à nos jours (2006). Je cherche à les afficher d'une manière précise, les une a côté des autres, avec bien sûr des retours à la ligne lorsque la ligne courante est "pleine". Comme ceci :

2006 2005 2004 2003
2002 2001 2000 1999
----

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
J'ai utilisé une simple boucle while pour lister ces infos, et je les ai affichées à l'aide d'un tableau html. Seulement voilà petit problème: Les informations se placent toute sur une ligne, déformant ainsi le design de la page. 
 
Je voudrai savoir comment faire pour les afficher sur plusieurs lignes. 
 
Mon code est le suivant :
<?php
        echo '<center><h5><b>Recherche par année </br></br></br></b></h5></center>';
        $an=gmdate('Y');
        $i=1977 ;
        echo'<table border=1>';
        echo'<tr>';
        WHILE ($an >= $i){ 
                echo'<td>';
                echo "<a href=rechercheannee.php?annee=$an>$an</a>&nbsp;&nbsp;"; 
                echo'<td>';
                 $an--; 
                } 
                echo'</tr>';
                echo'</table>';
?>

Merci d'avance

**Auteur** · 09/09/2006, 11h13

bonjour,

essaye comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.divAnnee{
float: left;
width: 100px;
border: 1px solid #0000FF;
background-color: #DDEEFF;
text-align: center;
}
.crlf{
clear: both;
visibility: hidden;
}
//-->
</style>
 
</head>
 
<body>
<div class="divAnnee">2006</div><div class="divAnnee">2005</div>
<div class="divAnnee">2004</div><div class="divAnnee">2003</div>
<div class="divAnnee">2002</div><div class="divAnnee">2001</div>
<div class="divAnnee">2000</div><div class="divAnnee">1999</div>
<div class="divAnnee">1998</div><div class="divAnnee">1997</div>
<hr class="crlf">
 
</body>
 
</html>

La ligne <hr> bien qu'invisible permet un retour à la ligne (clear: both; ) après la mise en place du dernier élément.

**MasterOfChakhaL** · 09/09/2006, 12h33

Vu que tes années auront toujours une longueur fixe je t'aurais suggéré quelque chose dans le même esprit mais plus simple (je trouve):

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#conteneur {
  width: 200px;
}
a {
  float:left;
  padding: .2em;
  border: 1px solid black;
}
.clrf{
  clear: both;
 visibility: hidden;
}

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
	<div id="conteneur">
		<a href="" >1977</a>
		<a href="" >1978</a>
		<a href="" >1979</a>
		<a href="" >1980</a>
		<a href="" >1981</a>
		<a href="" >1982</a>
		<a href="" >1983</a>
		<a href="" >1984</a>
		<a href="" >1985</a>
		<a href="" >1986</a>
		<a href="" >1987</a>
		<a href="" >1988</a>
		<a href="" >1989</a>
		<a href="" >1990</a>
		<a href="" >1991</a>
		<a href="" >1992</a>
		<a href="" >1993</a>
		<a href="" >1994</a>
		<a href="" >1995</a>
		<a href="" >1996</a>
		<a href="" >1997</a>
		<a href="" >1998</a>
		<a href="" >1999</a>
		<a href="" >2000</a>
		<a href="" >2001</a>
		<a href="" >2002</a>
		<a href="" >2003</a>
		<a href="" >2004</a>
		<a href="" >2005</a>
		<a href="" >2006</a>
 
		<hr class="clrf" />
		eli zelf zlken flzenflzieknr lzikenlzkne lkzen lkzen lk
	</div>

Mise en page de tableau

HTML

Vue hybride

Discussions similaires

Partager

Partager