Xhtml 1.0 tableau

Delphine -
delphine - 30 oct. 2008 à 21:26

Bonjour,

Voilà j'essai de mettre mon site en xhtml 1.0 et je rencontre quelques problèmes, notament avec ce tableau.

Voici ce que j'avais en html :

<table align="center" width="90%"  border="3" bordercolor= "#8CB64E" cellpadding="0" cellspacing="1">
<tr>
<td align="center"><img src="films/images/a_antartica.jpg" alt="antartica" border="0" /><br /><br /><u>Type :</u> Film<br /> Walt Disney</td>
<td align="center"><h3>Antartica</h3>
<p>Alors qu&acute;ils mènent une expédition scientifique en plein Antarctique, le guide Jerry Shepard (Paul Walker)...</p>
</td>
</tr>
</table>

Et voici ce que j'ai réussi à faire pour xhtml :

<HTML>
	<head>
		<style type="text/css"> <!--
			.monstyle {
				border: 2px inset #8CB64E;
				border-style : solid;
			}
	 --> </style>
  </head>
<body>
	<table class="monstyle">
    	<tr>
        	<td align="center" class="monstyle">
            	<img src="films/images/a_antartica.jpg" alt="antartica" border="0" /><br /><br />
                <u>Type :</u> Film<br /> Walt Disney
            </td>
            <td align="center" class="monstyle">
				<h3>Antartica</h3>
                <p>Alors qu&acute;ils mènent une expédition scientifique en...</p>
            </td>
       </tr>
   </table>
</body>

</HTML>

Cela ne ressemble pas tout à fait à ce que j'avais au départ mais ça peut aller, par contre le tableau me prend une grosse partie de la page ! il n'y a pas moyen de mettre une taille dans le css ?
Mon écriture à l'intérieur du cadre change aussi alors que je n'ai rien précisé comme police ou taille !

Comment dois-je procéder ?

A voir également:

Xhtml 1.0 tableau
Tableau word - Guide
Tableau ascii - Guide
Trier un tableau excel - Guide
Tableau croisé dynamique - Guide
Imprimer tableau excel sur une page - Guide

8 réponses

Réponse 1 / 8

Delphine

Quand je met par exemple width: 50%; dans le css et bien il n'y a rien qui se passe !

jackred Messages postés 224 Date d'inscription Statut Membre Dernière intervention 13

essai avec l'em au lieu du poucentage (100%=1em / 50%=0.5em)

Réponse 2 / 8

Delphine

Arf ! ça fonctionne toujours pas. Je fais peut être mal quelques choses !

Reprenons, donc j'ai créé un fichier monstyle.css :

<!-- 
.monstyle { 
border: solid #8CB64E; 
} 
.clwidthcolonne { 
width: 10.5%; 
} 
#idwidthtableau { 
width: 90%; 
margin: 0 auto; 
} 
-->

Et voici ma page film_a.php :

<?php
session_start();
include('header2.php');
?>

<?php
include('menu_films.php');
?>

<table border="3" href="monstyle.css" class="monstyle" id="idwidthtableau">
<tr>
<td align="center" class="clwidthcolonne">
<img src="films/images/a_antartica.jpg" alt="antartica" border="0" /><br /><br />
<u>Type :</u> Film<br /> Walt Disney
</td>
<td align="center">
<h3>Antartica</h3>
<p>Alors qu´ils mènent une expédition scientifique en plein Antarctique, le guide Jerry Shepard (Paul Walker)...</p>
</td>
</tr>
</table>

<?
include('footer.php');
?>

Est-ce que je m'y prends correctement pour le css ? car si je met dans la feuille de style de mon header et bien cela me met des cadres partout, sur tout mon site, lol !

Réponse 3 / 8

Delphine

Reprenons si je mets ceci cela apparait bon dans le valideur xhtml 1.0 :

<table align="center" width="90%"  border="3" cellpadding="0" cellspacing="1">
<tr>
<td align="center"><img src="images/b_bouba.jpg" border="0" alt="bouba" /><br /><br /><u>Type :</u> Série</td>
<td align="center"><h3>Bouba</h3>
<p>Dans les montagnes de Tallac, une ourse a donné naissance à deux adorables oursons : Bouba et sa soeur Frisquette.
Passant des jours paisibles, tous deux découvrent en même temps le monde, toujours bien surveillés par leur mère. Jusqu'au jour où des chasseurs, effrayés par leur mère, l'abattent, laissant les deux oursons orphelins.
Perdus et affamés, ces derniers sont recueillis par Moy, un jeune Indien, qui décide de les adopter, malgré l'avis des chasseurs. Une fantastique histoire d'amitié commence...</p>
<object type="application/x-shockwave-flash" width="405" height="324" data="http://www.youtube.com/v/1NUIOPz8TJQ&amp;hl=en&amp;fs=1"><param name="movie" value="http://www.youtube.com/v/1NUIOPz8TJQ&amp;hl=en&amp;fs=1" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><p></p></object>
</td>
</tr>
</table>

Seulement je voudrai que la bordure soit verte (bordercolor= "#8CB64E") que dois je mettre dans ma feuille de style pour que cela fonctionne sans me faire des bordures vertes à tous les endroit ou j'ai mis <table> sur tout le site, lol !
Comment faire pour n'appliquer la bordure verte qu'à ce tableau ?

Réponse 4 / 8

jackred Messages postés 224 Date d'inscription Statut Membre Dernière intervention 13

Dans ce cas tu devras attribuer une class ou id à la balise table que tu souhaite modifier

comme ça <table class="unNom"> ... </table>

puis dans le CSS au lieu de table t'écris .unNom (le point avant le nom est important)

ce qui donnera ça .unNom
{
border-color: #??????;
}
voila

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

delphine

En effet ça marche, j'ai dû mal m'y prendre la 1ère fois ;-)
Merci, problème résolu.

Réponse 6 / 8

jackred Messages postés 224 Date d'inscription Statut Membre Dernière intervention 13

tu peux preciser les tailles par les attributs width et height

Réponse 7 / 8

drole_de_poete_geek Messages postés 11 Date d'inscription Statut Membre Dernière intervention 3

Sur Firefox essai ceci:

<HTML>
<head>
<style type="text/css">  </style>
</head>
<body>

<table border="3" class="monstyle" id="idwidthtableau">
<tr>
<td align="center" class="clwidthcolonne">
<img src="films/images/a_antartica.jpg" alt="antartica" border="0" /><br /><br />
<u>Type :</u> Film<br /> Walt Disney
</td>
<td align="center">
<h3>Antartica</h3>
<p>Alors qu´ils mènent une expédition scientifique en plein Antarctique, le guide Jerry Shepard (Paul Walker)...</p>
</td>
</tr>
</table>

</body>

</HTML>

Remarque:
il fallait juste donner au tableau un width dans ton cas c'est 90%, puis donner 10.5 % de la valeur initiale (90%) à la première colonne.
pourque le tableau soit centré au milieu de la page web, il suffit de mettre un "margin: 0 auto;" pour le tableau.
J'espère que j'ai pu t'aider.tiens moi au courant.

Réponse 8 / 8

drole_de_poete_geek Messages postés 11 Date d'inscription Statut Membre Dernière intervention 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ma page</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="Delphine" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="./style/monstyle.css" />
</head>
<body>

<table border="3" class="clbordure" id="idwidthtableau">
<tr>
<td align="center" class="clwidthcolonne">
<img src="films/images/a_antartica.jpg" alt="antartica" border="0" /><br /><br />
<u>Type :</u> Film<br /> Walt Disney
</td>
<td align="center">
<h3>Antartica</h3>
<p>Alors qu´ils mènent une expédition scientifique en plein Antarctique, le guide Jerry Shepard (Paul Walker)...</p>
</td>
</tr>
</table>

</body>

</html>

ça ne marche toujours pas ?!!!

Discussions similaires

Formule taux de marque

Tableau croisé dynamique - absence de certaines données

generateur de combinaison du loto 5/90

Votre réponse

Discussions similaires