Passer un tableau html en tableau css
Absot
Messages postés
777
Date d'inscription
Statut
Membre
Dernière intervention
-
Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention -
Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je voudrais refaire tout ce code mais en css pur, autrement dit en virant tout ce qui est en html, donc je pense qu'il faudrais enlever tout les td et tr pour mettre des div mais ça je trouve quelquechose de bizarre à la fin donc il doit y avoir des choses à modifié?
Voici le code en html
[code]<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<table>
<tr>
<td rowspan="5" width="215"></td>
<td class="entete" colspan="5" width=930><h1>EVEREST</h1></td>
<td width="215" colspan="5"></td>
</tr>
<tr>
</tr>
<tr class="an">
<ul>
<td class="annexe" class="in"><li><a href="index.html">Accueil</a></li></td>
<td class="annexe"><li><a href="camp-base.html">Camp base</a></li></td>
<td class="annexe"><li><a href="icefall.html">Icefall</a></li></td>
<td class="annexe"><li><a href="camps.html">Camps</a></li></td>
<td class="annexe"><li><a href="sommet.html">Sommet</a></li></td>
</ul>
</tr>
<tr class="toto">
<td class="marge" colspan="5"> <h2>Camp de base</h2>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id=image> <img src=images/basecamp.jpg alt=camp-de-base /> </div> </td>
</tr>
<tr>
<td colspan="5" height="25"><h6>Réalisé par Aurélien Laval</h6></td>
</tr>
</table>
</body>
</html>/code
Et le code après avoir enlever les tr et td.
[code]<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe" class="in"><li><a href="index2.html">Accueil2</a></li></div>
<div class="annexe"><li><a href="camp-base2.html">Camp base2</a></li></div>
<div class="annexe"><li><a href="icefall2.html">Icefall2</a></li></div>
<div class="annexe"><li><a href="camps2.html">Camps2</a></li></div>
<div class="annexe"><li><a href="sommet2.html">Sommet2</a></li></div>
<div class="toto" class="marge" class="colonne1"> <h2>Camp de base</h2>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id=image> <img src=images/basecamp.jpg alt=camp-de-base /> </div>
</div>
<div height="25"><h6>Réalisé par Aurélien Laval</h6></div>
</body>
</html>/code
Voici le code en html
[code]<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<table>
<tr>
<td rowspan="5" width="215"></td>
<td class="entete" colspan="5" width=930><h1>EVEREST</h1></td>
<td width="215" colspan="5"></td>
</tr>
<tr>
</tr>
<tr class="an">
<ul>
<td class="annexe" class="in"><li><a href="index.html">Accueil</a></li></td>
<td class="annexe"><li><a href="camp-base.html">Camp base</a></li></td>
<td class="annexe"><li><a href="icefall.html">Icefall</a></li></td>
<td class="annexe"><li><a href="camps.html">Camps</a></li></td>
<td class="annexe"><li><a href="sommet.html">Sommet</a></li></td>
</ul>
</tr>
<tr class="toto">
<td class="marge" colspan="5"> <h2>Camp de base</h2>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id=image> <img src=images/basecamp.jpg alt=camp-de-base /> </div> </td>
</tr>
<tr>
<td colspan="5" height="25"><h6>Réalisé par Aurélien Laval</h6></td>
</tr>
</table>
</body>
</html>/code
Et le code après avoir enlever les tr et td.
[code]<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe" class="in"><li><a href="index2.html">Accueil2</a></li></div>
<div class="annexe"><li><a href="camp-base2.html">Camp base2</a></li></div>
<div class="annexe"><li><a href="icefall2.html">Icefall2</a></li></div>
<div class="annexe"><li><a href="camps2.html">Camps2</a></li></div>
<div class="annexe"><li><a href="sommet2.html">Sommet2</a></li></div>
<div class="toto" class="marge" class="colonne1"> <h2>Camp de base</h2>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id=image> <img src=images/basecamp.jpg alt=camp-de-base /> </div>
</div>
<div height="25"><h6>Réalisé par Aurélien Laval</h6></div>
</body>
</html>/code
A voir également:
- Passer un tableau html en tableau css
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Imprimer un tableau excel - Guide
10 réponses
Salut,
Est-ce qu'on pourrait avoir le code css stp ?
Sinon, tu peux jeter un coup d'oeil sur ces liens pour t'aider :
https://openweb.eu.org/articles/initiation_absolue/
https://openweb.eu.org/articles/initiation_float/
https://openweb.eu.org/articles/tableaux_css/
@+
Est-ce qu'on pourrait avoir le code css stp ?
Sinon, tu peux jeter un coup d'oeil sur ces liens pour t'aider :
https://openweb.eu.org/articles/initiation_absolue/
https://openweb.eu.org/articles/initiation_float/
https://openweb.eu.org/articles/tableaux_css/
@+
Voilà le fichier css.
[code]body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
background-color:#87CEFA;
}
pre
{
overflow: auto ;
}
h6
{
background-color:#87CEFA;
color:white;
text-align:center;
}
.toto
{
background-color : white;
}
.annexe
{
height:25;
width:125;
color:white;
}
.entete
{
background:url(images/everest.jpg);
padding-left:50px;
width:750;
height:151;
}
.an
{
background-color:#0099FF;
}
.in
{
color:white;
}
h2
{
text-align: center ;
color:#0099FF;
text-decoration:underline;
}
a
{
color:white;
text-decoration:none;
text-align:center;
}
.marge
{
padding-left:20px;
padding-right:20px;
}
h1
{
text-align:center;
color:#DDDDDD;
}
div#image
{
text-align:center;
}
.colonne1
{
width:250px;
height:250px;
}
/code
[code]body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
background-color:#87CEFA;
}
pre
{
overflow: auto ;
}
h6
{
background-color:#87CEFA;
color:white;
text-align:center;
}
.toto
{
background-color : white;
}
.annexe
{
height:25;
width:125;
color:white;
}
.entete
{
background:url(images/everest.jpg);
padding-left:50px;
width:750;
height:151;
}
.an
{
background-color:#0099FF;
}
.in
{
color:white;
}
h2
{
text-align: center ;
color:#0099FF;
text-decoration:underline;
}
a
{
color:white;
text-decoration:none;
text-align:center;
}
.marge
{
padding-left:20px;
padding-right:20px;
}
h1
{
text-align:center;
color:#DDDDDD;
}
div#image
{
text-align:center;
}
.colonne1
{
width:250px;
height:250px;
}
/code
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Tu peux mettre tout ton menu dans une seule div, ça te facilitera les choses.
Pour que tes liens soient les uns à côté des autres tu peux les mettre en flottants.
Pour centrer ta page, il suffit de mettre
body {margin: auto;}
Sinon, tu as oublié les guillemets dans ton <div id="image">
Tu n'as pas besoin de mettre plusieurs "class" à la même <div>, les "class" servent à donner un nom à ta <div> pour que le css sache où s'appliquer, donner plusieurs noms l'embrouille.
Tu as aussi oublié plusieurs fois de préciser "px" dans ton css. Tu dois toujours donner l'unité
width: 500px ;
en collant "px" aux chiffres.
Tu trouveras plein d'infos dans les liens de Lacide et aussi ici.
Pour que tes liens soient les uns à côté des autres tu peux les mettre en flottants.
Pour centrer ta page, il suffit de mettre
body {margin: auto;}
Sinon, tu as oublié les guillemets dans ton <div id="image">
Tu n'as pas besoin de mettre plusieurs "class" à la même <div>, les "class" servent à donner un nom à ta <div> pour que le css sache où s'appliquer, donner plusieurs noms l'embrouille.
Tu as aussi oublié plusieurs fois de préciser "px" dans ton css. Tu dois toujours donner l'unité
width: 500px ;
en collant "px" aux chiffres.
Tu trouveras plein d'infos dans les liens de Lacide et aussi ici.
Je n'aurais pas mieux dit. Essai d'arranger déjà tout ce que te dit PandaNemo et aide-toi des liens pour voir si tu parviens déjà à un meilleur résultat.
Bonne soirée,
L.
Bonne soirée,
L.
:p merci Lacide
Ah, un petit "truc" aussi : si tes div se placent n'importe comment et que tu ne comprends pas pourquoi, mets dans le css:
{border: 1px solid black;}
Tu les verras apparaître (et parfois ça étonne)
Bonne soirée
Ah, un petit "truc" aussi : si tes div se placent n'importe comment et que tu ne comprends pas pourquoi, mets dans le css:
{border: 1px solid black;}
Tu les verras apparaître (et parfois ça étonne)
Bonne soirée
Bonjour,
à mon sens "passer une page html en css pur" tel que tu le dis pour moi revient à changer par exemple une balise
<div style="...."> par <div class="..."> ou tout autre balise.
Les tableaux HTML sont excellent, et on peut leur attribuer très bien des classes css.
Je conseille de les garder et de leur appliquer un style. C'est beaucoup plus commode que de tout travailler en div, je trouve.
Et ça reste très "css pur" en tous cas.
Olivier.
à mon sens "passer une page html en css pur" tel que tu le dis pour moi revient à changer par exemple une balise
<div style="...."> par <div class="..."> ou tout autre balise.
Les tableaux HTML sont excellent, et on peut leur attribuer très bien des classes css.
Je conseille de les garder et de leur appliquer un style. C'est beaucoup plus commode que de tout travailler en div, je trouve.
Et ça reste très "css pur" en tous cas.
Olivier.
Voilà à quoi ça ressemble après quelque changement...
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="centrer">
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe"><li><a href="index2.html">Accueil2</a></li>
<li><a href="camp-base2.html">Camp base2</a></li>
<li><a href="icefall2.html">Icefall2</a></li>
<li><a href="camps2.html">Camps2</a></li>
<li><a href="sommet2.html">Sommet2</a></li></div>
<div class="toto"> <h2>Camp de base</h2></div>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id="image"> <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
<div class="height"><h6>Réalisé par </h6></div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Le fichier CSS.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
body
{
margin: 10px 0 ;padding: 0 ;text-align: center ;background-color:#87CEFA;
}
pre
{
overflow: auto ;
}
h6
{
background-color:#87CEFA;color:white;text-align:center;
}
.toto
{
background-color : white;padding-left:20px;padding-right:20px;width:250px;height:250px;
}
.annexe
{
height:25px;width:125px;color:white;}
.entete
{
background:url(images/everest.jpg);padding-left:50px;width:750px;height:151px;
}
.an
{
background-color:#0099FF;
}
h2
{
text-align: center ;color:#0099FF;text-decoration:underline;
}
a
{
color:white;text-decoration:none;text-align:center;
}
h1
{
text-align:center;color:#DDDDDD;
}
div#image
{
text-align:center;
}
.height
{
height:25px;
}
.centrer
{
margin:auto;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
J'ai tout mis à la suite pour ne pas que ça soit trop long mais sinon das mon code tout est dessous des uns des autres.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="centrer">
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe"><li><a href="index2.html">Accueil2</a></li>
<li><a href="camp-base2.html">Camp base2</a></li>
<li><a href="icefall2.html">Icefall2</a></li>
<li><a href="camps2.html">Camps2</a></li>
<li><a href="sommet2.html">Sommet2</a></li></div>
<div class="toto"> <h2>Camp de base</h2></div>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id="image"> <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
<div class="height"><h6>Réalisé par </h6></div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Le fichier CSS.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
body
{
margin: 10px 0 ;padding: 0 ;text-align: center ;background-color:#87CEFA;
}
pre
{
overflow: auto ;
}
h6
{
background-color:#87CEFA;color:white;text-align:center;
}
.toto
{
background-color : white;padding-left:20px;padding-right:20px;width:250px;height:250px;
}
.annexe
{
height:25px;width:125px;color:white;}
.entete
{
background:url(images/everest.jpg);padding-left:50px;width:750px;height:151px;
}
.an
{
background-color:#0099FF;
}
h2
{
text-align: center ;color:#0099FF;text-decoration:underline;
}
a
{
color:white;text-decoration:none;text-align:center;
}
h1
{
text-align:center;color:#DDDDDD;
}
div#image
{
text-align:center;
}
.height
{
height:25px;
}
.centrer
{
margin:auto;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
J'ai tout mis à la suite pour ne pas que ça soit trop long mais sinon das mon code tout est dessous des uns des autres.
