Tableaux en trois parties

PoppyGuy · 06/12/2011, 22h07

Bonsoir,

Voici un code :

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
<table border="4" width="250">
<tbody>
<tr>
<td align="center">Images pour la date</td>
</tr>
</tbody>
</table>
<br>
<table border="1" width="150">
<tbody>
<tr>
<td align="center"><big><span style="font-weight: bold;"></span></big>
<big><span style="font-weight: bold;">Bonjour</span></big></td>
</tr>
</tbody>
</table>
<br>
<table border="4" width="200">
<tbody>
<tr>
<td align="center">Images pour l'heure</td>
</tr>
</tbody>
</table>

Qui me donne ça :

Comment obtenir la disposition ci-dessoussoit en trois morceaux ou avec une table, mais 3 cellues différents en bordures.

Merci de votre aide
Cordialement
Guy

SpaceFrog · 06/12/2011, 22h28

pas grand chose à voir avec javascript, il s'agit de css : float left

Bovino · 07/12/2011, 08h13

Mouais... et surtout, si tu ne veux pas de retour à la ligne, évite les <br>...

PoppyGuy · 07/12/2011, 09h58

Bonjour,
Je reviens toujours à la même question.

Si j'enlève <br>, ça n'enlève que l'espace entre les tableaux, mais ils sont toujours l'un en dessous de l'autre.

FirePrawn · 07/12/2011, 10h08

Citation:

Envoyé par SpaceFrog

pas grand chose à voir avec javascript, il s'agit de css : float left

Emyleen · 07/12/2011, 12h00

Voila voila :

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
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
	table{
		float: left;
		margin-right: 20px;
	}
	table:last-of-type {
		margin-right: 0px;
	}
</style>
</head>
 
<body>
    <table border="4" width="250">
        <tbody>
            <tr>
            	<td align="center">Images pour la date</td>
            </tr>
        </tbody>
    </table>
    <table border="1" width="150">
        <tbody>
            <tr>
            	<td align="center"><big><span style="font-weight: bold;"></span></big>
            	<big><span style="font-weight: bold;">Bonjour</span></big></td>
            </tr>
        </tbody>
    </table>
    <table border="4" width="200">
        <tbody>
            <tr>
           		<td align="center">Images pour l'heure</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

PoppyGuy · 07/12/2011, 12h27

Bonjour,
Oufff !!!!: ccool:
Merci de ton aide
Je suppose que j'ai vu ce qu'il fallait ajouter ?

Code :

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

1
2
3
4
5
6
7
8
9
10
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table{
float: left;
margin-right: 100px;
}
table:last-of-type {
margin-right: 0px;
}
</style>

Mais, comment je peux :
1) Ecarter de la gauche le 1er tableau
2) Pourquoi, je ne peux pas mettre plus de 100px d'espaces

Merci de ton aide
Cordialement

jreaux62 · 07/12/2011, 12h27

Bonjour Guy,
la mise en page via <table> est obsolète.
Tant qu'à bien faire, je t'invite à lire ce tuto : Div et CSS : une mise en page rapide et facile

On peut considérer les <div> comme des "boites" qu'on peut empiler, juxtaposer, imbriquer,...

On indique les propriété CSS de chaque boite en leur donnat un identifiant :
<div id="boite-machin">
Et dans le CSS :
#boite-machin { ....... }

Revoit la MISE EN PAGE COMPLETE de ta page.

PoppyGuy · 07/12/2011, 14h46

Bonjour,
QUOI !!!! ma page obsolète !!!!!

Pourtant tu m'as bien fait des tableaux pour mes images météo, et en plus ça me conviens.

Bien sûr, part à port à ton site

J'aimerais bien savoir faire ça, mais ...bon.

Je voulais simplement mettre mes "date et heure" dans des cellules avec un effet 3D "creux ou bosse", apparemment cela n'est pas possible, il y a toujours quelque chose qui cloche, ma page d'accueil, est pourtant ce qui il a de plus simple.

Je vais quand même regarder le tuto de "page d'accueil", avec un fichier à part .css, ça m'intéresse.

Je n'ai jamais trempé dans le langage informatique

En attendant, merci de ton aide
Cordialement

Emyleen · 07/12/2011, 16h10

Citation:

Envoyé par PoppyGuy

Mais, comment je peux :
1) Ecarter de la gauche le 1er tableau
2) Pourquoi, je ne peux pas mettre plus de 100px d'espaces

Il te faut apprendre le CSS, c'est le langage de mise en forme des pages web.
Pour répondre à tes questions :
1) il te faut rajouter :

Code css :

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

1
2
3
table:first-of-type {
    margin-left: 15px;
}

(par exemple)

2) Je n'ai pas compris ta question, si tu mets + de 100px de marge il se passe quoi? Si le tableau descend sous les autres c'est parce que tu demandes + d'espace que de disponible dans ta fenêtre

Après il te faudrait vraiment te familiariser avec le HTML/CSS afin de pouvoir faire correctement une page web

PoppyGuy · 07/12/2011, 17h03

Ma page fait 1024px, je peux aller jusqu'à 108px, sinon, effectivement, il va en dessous

Le premier tableau ne se décale pas.

NoSmoking · 07/12/2011, 18h22

Citation:

Envoyé par PoppyGuy

Je voulais simplement mettre mes "date et heure" dans des cellules avec un effet 3D "creux ou bosse", apparemment cela n'est pas possible, il y a toujours quelque chose qui cloche, ma page d'accueil, est pourtant ce qui il a de plus simple.

il existe en CSS la propriété border-style qui associée avec certaine valeur te donneraient l'effet souhaité.

je te mets un exemple de plus

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
div{
  width : 250px;
  height : 30px;
  margin : 20px;
  border-width : 3px;
  border-color : #b0b0b0;
  text-align : center;
}
/* les styles de bordures 3D */
.groove{ border-style : groove;}
.ridge { border-style : ridge;}
.inset { border-style : inset;}
.outset{ border-style : outset;}
</style>
</head>
<body>
<div class="groove">GROOVE</div>
<div class="ridge">RIDGE</div>
<div class="inset">INSET</div>
<div class="outset">OUTSET</div>
</body>
</html>

concernant le centrage as tu essayé ce que l'on a dit sur http://www.developpez.net/forums/d11...u/#post6380491, et le reste...

PoppyGuy · 07/12/2011, 20h23

Oui l'exemple est bon, mais pourquoi ne pas me faire un exemple avec les tableaux sur la même ligne

Torgar · 07/12/2011, 21h15

Parce qu'apprendre c'est mieux ?

PoppyGuy · 08/12/2011, 08h42

Bonjour à tous
À propos de :

Code :

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

1
2
3
4
table{
float: left;
margin-right: 108px;
}

Si j'ai bien compris ?
Cela donne le nombre de "pixels" à la suite d'un tableau (même le dernier, dommage)
Voilà pourquoi, je ne peux pas centrer l'ensemble des tableaux sur la même ligne.

Cordialement
Bonne journée

FirePrawn · 08/12/2011, 08h52

Dans ce cas, tu donnes des id à tes différents tableaux, et tu appliques un style différent en fonction de ton tableau :

Code :

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

1
2
3
4
5
6
7
8
9
#table1{
margin-left: 108px;
blabla
}
 
#table2{
margin-left: 10px;
blublu
}

Etc.

jreaux62 · 08/12/2011, 08h55

Bonjour Guy,
tu ne pourras pas progresser tant que tu n'auras pas fait l'effort de lire les tutoriels que nous t'avons donnés en liens.

Concernant le CSS, 12monkeys a fait 2 tutoriels particulièrement facile à lire et à comprendre :
-> Introduction aux CSS
-> La syntaxe d'une règle CSS

D'autres liens t'ont été donnés :
-> Div et CSS : une mise en page rapide et facile
-> Les tableaux (XHTML & CSS)
-> ...

Prends le temps de les lire, ok ?

PS : sache que chacun de nous est capable de t'écrire le code complet pour tes pages !
Mais ce n'est ni le but de ce forum, ni une façon pour toi de progresser.

PoppyGuy · 08/12/2011, 10h45

Bonjour,
Avec

Code :

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

#table1

etc.....rien
En laissant

Code :

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

table{

ça fonctionne à peut près (il faut changer left ou rignt)

Quand c'est centré sur mon logiciel, si je fais l'essai avec l'icône "navigateur" ça fonctionne, par contre si je passe par le site, ce n’est pas centré (pourtant, c'est la même grandeur de fenêtre, en plus Mais ça perturbe, mon menu horizontal, il devient complètement débile.

Donc merci pour votre aide et pour vos conseils, mais j'abandonne.

J'apprendrais peut-être plus tard, mais là

A+

Cordialement

FirePrawn · 08/12/2011, 11h08

Si tu avais lu ma réponse en entier, tu aurais vu qu'il faut au préalable ajouter des id à tes tableaux...

Code :

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

<table id="table1">

jreaux62 · 08/12/2011, 12h17

Citation:

Envoyé par PoppyGuy

J'apprendrais peut-être plus tard, ...

Dis-nous, Guy,
puisque tu es "Retraité", quelle est ta définition de "plus tard" ?
- après être allé à la pêche ? ou après la chasse ?
- après ta matinée de jardinage ou de bricolage ?

En tout cas, n'oublie pas qu'on apprend à tout age !
alors : courage !

06/12/2011, 22h28	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 202 Points : 45 202	pas grand chose à voir avec javascript, il s'agit de css : float left __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

07/12/2011, 08h13	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 789 Points : 35 789	Mouais... et surtout, si tu ne veux pas de retour à la ligne, évite les <br>... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/12/2011, 09h58	#4
PoppyGuy Invité régulier Guy Retraité Inscription : novembre 2011 Messages : 36 Détails du profil Informations personnelles : Nom : Guy Localisation : France, Vendée (Pays de la Loire) Informations professionnelles : Activité : Retraité Secteur : Bâtiment Informations forums : Inscription : novembre 2011 Messages : 36 Points : 5 Points : 5	Tableaux en 3 parties Bonjour, Je reviens toujours à la même question. Si j'enlève <br>, ça n'enlève que l'espace entre les tableaux, mais ils sont toujours l'un en dessous de l'autre.
	00

07/12/2011, 12h27	#8
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour Guy, la mise en page via <table> est obsolète. Tant qu'à bien faire, je t'invite à lire ce tuto : Div et CSS : une mise en page rapide et facile On peut considérer les <div> comme des "boites" qu'on peut empiler, juxtaposer, imbriquer,... On indique les propriété CSS de chaque boite en leur donnat un identifiant : <div id="boite-machin"> Et dans le CSS : #boite-machin { ....... } Revoit la MISE EN PAGE COMPLETE de ta page. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	20

07/12/2011, 14h46	#9
PoppyGuy Invité régulier Guy Retraité Inscription : novembre 2011 Messages : 36 Détails du profil Informations personnelles : Nom : Guy Localisation : France, Vendée (Pays de la Loire) Informations professionnelles : Activité : Retraité Secteur : Bâtiment Informations forums : Inscription : novembre 2011 Messages : 36 Points : 5 Points : 5	Tableaux 3 parties Bonjour, QUOI !!!! ma page obsolète !!!!! Pourtant tu m'as bien fait des tableaux pour mes images météo, et en plus ça me conviens. Bien sûr, part à port à ton site J'aimerais bien savoir faire ça, mais ...bon. Je voulais simplement mettre mes "date et heure" dans des cellules avec un effet 3D "creux ou bosse", apparemment cela n'est pas possible, il y a toujours quelque chose qui cloche, ma page d'accueil, est pourtant ce qui il a de plus simple. Je vais quand même regarder le tuto de "page d'accueil", avec un fichier à part .css, ça m'intéresse. Je n'ai jamais trempé dans le langage informatique En attendant, merci de ton aide Cordialement
	00

07/12/2011, 17h03	#11
PoppyGuy Invité régulier Guy Retraité Inscription : novembre 2011 Messages : 36 Détails du profil Informations personnelles : Nom : Guy Localisation : France, Vendée (Pays de la Loire) Informations professionnelles : Activité : Retraité Secteur : Bâtiment Informations forums : Inscription : novembre 2011 Messages : 36 Points : 5 Points : 5	Tableaux Ma page fait 1024px, je peux aller jusqu'à 108px, sinon, effectivement, il va en dessous Le premier tableau ne se décale pas.
	00

07/12/2011, 20h23	#13
PoppyGuy Invité régulier Guy Retraité Inscription : novembre 2011 Messages : 36 Détails du profil Informations personnelles : Nom : Guy Localisation : France, Vendée (Pays de la Loire) Informations professionnelles : Activité : Retraité Secteur : Bâtiment Informations forums : Inscription : novembre 2011 Messages : 36 Points : 5 Points : 5	Tableaux Oui l'exemple est bon, mais pourquoi ne pas me faire un exemple avec les tableaux sur la même ligne
	00

07/12/2011, 21h15	#14
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Parce qu'apprendre c'est mieux ? __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	41

08/12/2011, 08h55	#17
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour Guy, tu ne pourras pas progresser tant que tu n'auras pas fait l'effort de lire les tutoriels que nous t'avons donnés en liens. Concernant le CSS, 12monkeys a fait 2 tutoriels particulièrement facile à lire et à comprendre : -> Introduction aux CSS -> La syntaxe d'une règle CSS D'autres liens t'ont été donnés : -> Div et CSS : une mise en page rapide et facile -> Les tableaux (XHTML & CSS) -> ... Prends le temps de les lire, ok ? PS : sache que chacun de nous est capable de t'écrire le code complet pour tes pages ! Mais ce n'est ni le but de ce forum, ni une façon pour toi de progresser. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

08/12/2011, 10h45	#18
PoppyGuy Invité régulier Guy Retraité Inscription : novembre 2011 Messages : 36 Détails du profil Informations personnelles : Nom : Guy Localisation : France, Vendée (Pays de la Loire) Informations professionnelles : Activité : Retraité Secteur : Bâtiment Informations forums : Inscription : novembre 2011 Messages : 36 Points : 5 Points : 5	Tableaux Bonjour, Avec Code : Sélectionner tout - Visualiser dans une fenêtre à part #table1 etc.....rien En laissant Code : Sélectionner tout - Visualiser dans une fenêtre à part table{ ça fonctionne à peut près (il faut changer left ou rignt) Quand c'est centré sur mon logiciel, si je fais l'essai avec l'icône "navigateur" ça fonctionne, par contre si je passe par le site, ce n’est pas centré (pourtant, c'est la même grandeur de fenêtre, en plus Mais ça perturbe, mon menu horizontal, il devient complètement débile. Donc merci pour votre aide et pour vos conseils, mais j'abandonne. J'apprendrais peut-être plus tard, mais là A+ Cordialement
	00

08/12/2011, 11h08	#19
FirePrawn Modérateur Sébastien Ingénieur réalisateur Inscription : mars 2011 Messages : 779 Détails du profil Informations personnelles : Nom : Sébastien Âge : 24 Localisation : France, Haut Rhin (Alsace) Informations professionnelles : Activité : Ingénieur réalisateur Secteur : Industrie Informations forums : Inscription : mars 2011 Messages : 779 Points : 2 366 Points : 2 366	Si tu avais lu ma réponse en entier, tu aurais vu qu'il faut au préalable ajouter des id à tes tableaux... Code : Sélectionner tout - Visualiser dans une fenêtre à part <table id="table1"> __________________ - Avant toute chose : lire le mode d'emploi du forum et ses règles. - avant de poster - Je ne réponds pas aux questions techniques en MP.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email