Faire comme un <table> en CSS

**zool.bzh** · 19/01/2024, 12h26

Bonjour à tous
Excusez mon faible niveau mais qu'auriez-vous fait pour structurer ceci -> oOo

voici mes codes :

l'index.php :

Code html :

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
<html>
	<header>
	    <title>Le9emeCercle</title>
        <link href="text.css" rel="stylesheet" type="text/css" />
       <link href="border.css" rel="stylesheet" type="text/css" />
	</header>
<body>
<?php
$db = new PDO('mysql:host=192.168.1.1;dbname=ma_table', 'mon-id', '****');
$recipesStatement = $db->prepare('SELECT * FROM partenaire');
$recipesStatement->execute();
$recipes = $recipesStatement->fetchAll();
?> 
<div  align="center">
	<div class="born">  
		<div class="ocrep">Liens in out<div>
 
	    <?php
          foreach ($recipes as $recipe) {
        ?>
           <div class="gris6"><a href="out2.php?id=<?php echo $recipe['idx'] ?>" align="center" target="_blank">
		   <?php echo $recipe['titre']." ";?></a><?php echo $recipe['ent']." ".$recipe['sor']; ?></div>
		   <?php
            }
           ?>
    </div>
</div>

text.css

Code css :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
body {
background-color: #000000;
 
}
a {
font-family: arial, verdana, sans-serif;
font-size: 15px;
color:#CA0000;
text-decoration:none
}
a:hover {
font-family: arial, verdana, sans-serif;
font-size: 15px;
color:#CA0000;
text-decoration-line: underline
}
.ocrep
{
font-family: arial, verdana, sans-serif;
font-size: 15px;
color: #6C6C00
}
.ocreg
{
font-family: arial, verdana, sans-serif;
font-size: 18px;
color: #6C6C00
}
.gris6
{
font-family: arial, verdana, sans-serif;
font-size: 15px;
color:#666666;
text-align: justify
}
.rouge
{
font-family: arial, verdana, sans-serif;
font-size: 15px;
color:#CA0000
}
.gris9
{
font-family: arial, verdana, sans-serif;
font-size: 15px;
color:#999999;
text-align: justify
}

le border.css

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
background-color: #000000;
 
}
.dispo {
  max-width: 400px;
  max-height: 250px;
 }
.born {
  border: 1px solid;
  border-color: #666666;
  max-width: 200px;
  max-height: 300px;
  }

**Doksuri** · 19/01/2024, 14h52

j'ai pas trop compris ta question. mais j'aurai fais quelque chose comme ca :

Code html :

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

1
2
3
4
5
6
7
<div class="container">
  <div class="label">Liens in out</div>
  <div>FBI</div><div>0 5</div>
  <div>DB-Party</div><div>0 4</div>
  <div>Asmat</div><div>0 3</div>
  <div>HappyFace</div><div>0 4</div>
</div>

Code css :

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
body { background-color: #000; }
.container {
  border: 1px solid yellow;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.label {
  color: lightgreen;
  text-align: center;
  grid-column: 1 / span 2;
}
.container div:nth-child(even):not(.label) {
  color: red;
}
.container div:nth-child(odd):not(.label) {
  color: grey;
  padding-left: 1em;
  border-left: 1px solid white;
}

**zool.bzh** · 20/01/2024, 13h26

En effet l'on c'est mal compris.

NoSmoking ferait des bons mais je lance la demo de ce que je voudrais avoir -> oOo
le code

Code html :

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
<html>
	<header>
	    <title>Le9emeCercle</title>
        <link href="text.css" rel="stylesheet" type="text/css" />
       <link href="border.css" rel="stylesheet" type="text/css" />
	</header>
<body>
<?php
$recipesStatement = $db->prepare('SELECT * FROM partenaire');
$recipesStatement->execute();
$recipes = $recipesStatement->fetchAll();
?> 
<table  align="center"><tr>
	<td align="center" class="born ocrep">lien</td>
	<td align="center" class="born ocrep">in</td>
	<td align="center" class="born ocrep">out</td>
	</tr>	
<?php
        foreach ($recipes as $recipe) {
?>
 
        <tr><td class="born">
        	<a href="out2.php?id=<?php echo $recipe['idx'] ?>" align="center" target="_blank">
			<?php echo $recipe['titre']; ?></a></td>
			<td align ="center" class="gris6 born"><?php echo $recipe['ent'];?></td>
			<td align="center" class="born gris6"><?php echo $recipe['sor']; ?></td>
			</tr>
			<?php
}
?>
</table>

les borders sont juste là à titre indicatif. Voila ce que je veux en CSS -> oOo
Encore du code

Code html :

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
<html>
	<header>
	    <title>Le9emeCercle</title>
        <link href="text.css" rel="stylesheet" type="text/css" />
       <link href="border.css" rel="stylesheet" type="text/css" />
	</header>
<body>
<?php
$recipesStatement = $db->prepare('SELECT * FROM partenaire');
$recipesStatement->execute();
$recipes = $recipesStatement->fetchAll();
?> 
 
	 <table align="center" class="born"><tr>
	<td align="center" class="ocrep">lien</td>
	<td align="center" class="ocrep">in</td>
	<td align="center" class="ocrep">out</td>
	</tr>	
<?php
        foreach ($recipes as $recipe) {
?>
 
        <tr><td align="center">
        	<a href="out2.php?id=<?php echo $recipe['idx'] ?>"  target="_blank">
			<?php echo $recipe['titre']; ?></a></td>
			<td  class="gris6"><?php echo $recipe['ent'];?></td>
			<td  class="gris6"><?php echo $recipe['sor']; ?></td>
			</tr>
			<?php
}
?>
  </table>

le CSS

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.bornx {
  border: 1px solid;
  border-color: #666666;
   max-width: 150px;
  max-height: 250px;
  }
.born 
{
 border: 1px solid;
  border-color: #666666;
  }

alors comment feriez-vous en CSS ??

**NoSmoking** · 20/01/2024, 18h43

Bonjour,
tu utilises des <table> et si tu considères que tes données sont des données tabulaires alors cette utilisation fait sens.

Il existe bien des façon de faire pour présenter ce que tu présentes

, une d'elle serait d'utilisant une liste <ul> par exemple :

Code html :

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
<ul>
  <li class="title">
    <span>lien</span>
    <span>in</span>
    <span>out</span>
  <li>
    <a href="out2.php?id=1" target="_blank">FBI</a>
    <span>0</span>
    <span>9</span>
  </li>
  <li>
    <a href="out2.php?id=10" target="_blank">DB-Party</a>
    <span>0</span>
    <span>6</span>
  </li>
  <li>
    <a href="out2.php?id=15" target="_blank">Asmat</a>
    <span>0</span>
    <span>6</span>
  </li>
  <li>
    <a href="out2.php?id=12" target="_blank">HappyFace</a>
    <span>0</span>
    <span>8</span>
  </li>
</ul>

l'important ici est d'avoir 3 pseudo colonnes pour gérer l'alignement.

La mise en forme est faite sur base de <li> en FLEX, GRID pourrrait également pu faire l'affaire.

Code css :

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
36
37
/* la liste */
ul {
  font: 1em/2 arial, verdana, sans-serif;
  width: fit-content;
  margin: auto;
  padding: 0;
  min-width: 15em;
  border: 1px solid #069;
  color: #6C6C00;
  text-align: center;
}
/* toutes les lignes */
ul li {
  display: flex;
  text-align: center;
  background-color: #FAFAFA;
}
/* 1st ligne de la liste */
ul li.title,                    /* avec class */
ul li:first-child {             /* sans class */
  background-color: #DEF;
  border-bottom: 1px solid #069;
}
/* 1st colonne */
ul li :first-child {
  flex: 3;
}
/* colonne 2 et 3 */
ul li :nth-child(2),
ul li :nth-child(3) {
  flex: 1;
  border-left: 1px solid #ccc;
}
ul a {
  color: #CA0000;
  text-decoration: none;
}

... je te laisse analyser

**zool.bzh** · 21/01/2024, 12h19

Merci beaucoup NoSmoking

Voici ce que j'en tire -> oOo

**NoSmoking** · 21/01/2024, 18h47

Attention, bien que la balise de fermeture </li> ne soit pas obligatoire autant avoir de la cohérence dans son code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  <li class="ocrep title">
    <span>lien</span>
    <span>in</span>
    <span>out</span>
 
 
 
       <li class="gris6">
        	<a href="out2.php?id=1"  target="_blank">
			FBI</a>
			<span>0</span>
		    <span>9</span>
		</li>

Ressource :

↪ The li element (voir §Tag omission in text/html)

Faire comme un <table> en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager