Cadres cellule ??????

Question

Michel

12 Apr 2005 à 15:26

salut
J'aimerais fabriquer ce tableaux uniquement avec des calques,
Mais voilà, je ne sais pas comment procéder.
Merci pour vos propositions Smiley ola

Olivier

12 Apr 2005 à 15:29

Salut

et bienvenu

Avant toute chose, ce tableau, est-il un tableau ? ou bien juste une structure pour la mise en page ?

Parceque si c'est réellement un tableau, il FAUT utiliser un tableau !!!
Sinon, une mise en page à base de CSS est recommandée et tu devrais trouver des indications au niveau de mots clés comme float et clear: both; pour les soucis qui tu rencontreras avec les float Smiley cligne

Je déplace dans le salon qui semble aproprié pour l'instant.
Modifié par Olivier (12 Apr 2005 - 15:30)

Michel

12 Apr 2005 à 15:49

c'est déjà un tableau, j'ai déjà buché sur flot clear both.
Le blèm avec le tableau c'est sa maléabilité est il conforme au standards,
ou , y a t'il un moyen de le standardiser pour les non voyants Smiley ohwell

Olivier

12 Apr 2005 à 16:09

Le tableau n'est pas du tout un obstacle à l'accessibilité. Ca le devient lorsqu'il y a multiple imbrication de tableaux les uns dans les autres, non renseignement d'entetes de tableaux et autres attributs essentiels etc.

Mais la question que je me posais, c'est : le contenu que tu as dans ton actuel tableau, a t il sa place dans un tableau ? Quelle type de donnée y sont mises.

Si c'est juste un tableau pour la mise en place des éléments ça n'est pas adapté et risque de semer la confusion pour justement un lecteur d'écran par exemple qui traitera le site comme un tableau alors que c'est juste de la mise en page.

Donc si tu nous en disais plus sur le contenu de ton actuel tableau ? Avant de le supprimer Smiley lol

Si c'est un tableau "légitime", je t'indique ce lien :
http://pompage.net/pompe/autableau/

Raphael

Administrateur

12 Apr 2005 à 16:11

Michel a écrit :
y a t'il un moyen de le standardiser pour les non voyants

Salut Michel Smiley cligne

Oui, il est possible - dans une moindre mesure - de faciliter l'accès des tableaux aux handicapés :
http://openweb.eu.org/articles/tableaux_css/

Mais je te propose une lecture supplémentaire, si tu le veux bien :
http://openweb.eu.org/articles/problemes_tableaux/
tableaux ou div ?
Pourquoi la mise en page en tableaux est stupide

Bonne lecture Smiley cligne

Michel

14 Apr 2005 à 01:14

voir plus bas
Modifié par Michel (14 Apr 2005 - 02:06)

Felipe

Administrateur

14 Apr 2005 à 01:32

Bonjour,

merci d'utiliser la balise CODE pour afficher du code en ayant une chance de le rendre lisible. ("Mise en forme", sous les smileys quand on "répond" enfin "édite" maintenant que le post est là)

C'est indiqué dans [url=http://forum.alsacreations.com/help.php]Aide/Règles[/url]

Modifié par Felipe (14 Apr 2005 - 01:33)

Michel

14 Apr 2005 à 01:48

désolé, oups Smiley langue

Modifié par Michel (14 Apr 2005 - 02:01)

Michel

14 Apr 2005 à 01:51

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>tableaux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="css/tableaux.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
table#prime {
    background-color:#FFFFFF;
    border: solid #000 0.05em;
    width: 580px;

}

table#prime td {
    padding: 2px;
    border: solid #000000 0.05em;

}

.basDroit {
    color: #000000;
    text-align: left;
    background-color: #FF6600;

}

.haut {
    font-style: italic;
    text-align: center;
	width: 33%;
    background-color: #FFFFCC;

}

.bas {
	font-weight: bold;
	text-align: left;
	width: 33%;
	background-color: #FF6600;
	margin-top: 10px;
	margin-left: 10px;
}
#global{
	width: 578px;
	height: auto;
	border: 0.05em solid #000000;
	background-color: #CCFFFF;
}
#global02{
	width: 578px;
	height: auto;
	border: 0.05em solid #000000;
}
-->
</style>
</head>

<body>


<div id="global">
 <table summary=" Retour liste rubriques,Déposez gratuitement une annonce,Annoncez gratuitement une manifestation"  id="prime" cellspacing="2">
    <tr class="haut">
       
        <td width="33%">
         A
		 </td>
        
		<td width="33%">
         B
		 </td>
        
		<td width="33%">
         C<br />
         D
		 </td>
		
    </tr>
</table>

<div id="global02">1</div>
<table id="01" cellspacing="2">
    <tr class="haut">
        <td width="3%">D</td>
        <td width="15%">E</td>
        <td width="52%">F</td>
        <td width="30%">G</td>
    </tr>
    <tr>
        <td colspan="3" class="bas">H</td>
        <td class="basDroit">I</td>
    </tr>
</table>
<div id="global02">3</div>
<table id="prime" cellspacing="2">
    <tr class="haut">
        <td width="3%">J</td>
        <td width="15%">K</td>
        <td width="52%">L</td>
        <td width="30%">M</td>
    </tr>
    <tr>
        <td colspan="4" class="bas">O</td>
    </tr>
</table>
<div id="global02">4</div>
</div>
a
</body>
</html>

Modifié par Michel (14 Apr 2005 - 02:32)

Igor

14 Apr 2005 à 01:53

Bonjour,
C'est raté pour le code Smiley lol

Pour afficher correctement du code il faut soit utiliser le bouton code de la zone d'édition, soit encadrer le code des bbcode [ code][ /code] (sans les espaces).

édit: tu n'as pas besoin de reposter tu dois pour éditer chacun de tes messages avec le bouton éditer en haut à droite du message. Smiley cligne

Modifié par Igor (14 Apr 2005 - 01:54)

Michel

14 Apr 2005 à 02:08

Je suis vraiment désolé pour ce fourbi
Modifié par Michel (14 Apr 2005 - 02:18)

Igor

14 Apr 2005 à 02:15

michel a écrit :
Est ce que tout ceci est conforme et peut on l'améliorer

Tu as une id qui débutes par un chiffre, ce qui n'est pas permis.
Toujours a propos des id tu réutilises les id alors qu'un id est par nature unique dans une page (Quelle est la différence entre une classe et un id ?).

Comme indiqué dans un des liens donnés par Raphaël (Habillage de tableaux avec des CSS sur Openweb), si c'est un tableau de données tu peux rajouter l'attribut summary à l'élément table qui offre une explication de la nature des données dans le tableau:


<table summary="explication">
</table>

Tu as choisi un doctype xhtml qui impliques quelques règles de réactions de code comme par exemple la fermeture de tous les éléments, même les éléments vides. Tu dois donc fermer toutes les balises de cette manière (un espace et un slash):


<br /> et non <br>
<img /> et non <img>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> et non <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

édit: c'est pas grave pour le fourbis, maintenant tu maîtrises l'utilisation de code et l'édition des sujets pour la suite
Modifié par Igor (14 Apr 2005 - 02:16)

Michel

14 Apr 2005 à 02:44

pour les id jai cru bien faire , un pour les tableaux et un pour les cellules.
pour les fermetures c'est de l'innatention.
merci pour ces conseils car je dois comprendre un max en peu de temps Smiley jap

Modifié par Michel (14 Apr 2005 - 02:45)

Michel

16 Apr 2005 à 23:29

Bonsoir
bon j'ai un peu potassé sur les calques jai construit un truc avec plein de bons conseils (merci alsa et les autres °L°)
Mais patatra au moment de la mise en place gros caca boudin rien n'est stabilisé, que dois je faire au secours à l'aide, Merci

<html>

<head>

<style type="text/css">
<!--

.TDA{
	float: left;
	width: 33%;
	height: 50px;
	background-color: #999999;
	border: 0.05em solid #000000;
		
}
.TDB{
    float: left;
    width: 33%;
	height: 50px;
	border: 0.05em solid #000000;
	background-color: #996699;
}
.TDC{
    float: left;
    width: 33%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDD{
    float: left;
	width: 33%;
	background-color: #999999;
	border: 0.05em solid #000000;
	
}
.TDE{
    float: left;
    width: 33%;
	border: 0.05em solid #000000;
	background-color: #996699;
}
.TDF{
	float: left;
	width: 25%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
	
}
.TDG{
    float: left;
    width: 24%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDH{
    float: left;
    width: 24%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDI{
    float: left;
    width: 25%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDJ{
    float: left;
    width: 24%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDKL{
    float: left;
    width: 25%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDM{
    float: left;
    width: 24%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDN{
    float: left;
    width: 24%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
.TDO{
    float: left;
    width: 25%;
	height: 50px;
	border: 0.05em solid #FFFFFF;
	background-color: #0066FF;
}
#princitab{
      width: 580px;
}
#un{
	background-color:#FFFFFF;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
#deux{
	background-color:#FFFF66;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
dex#td {
    text-align: left;
	width: 32%;
	background-color: #999999;
	border: 0.05em solid #FFFFFF;
}
#trois{
	background-color:#CC3399;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
#quatre{
	background-color:#CCCC99;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
		
}
#cinq{
	background-color:#FF99FF;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
#six{
	background-color:#99FF99;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
#sept{
	background-color:#33FF00;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
#huit{
	background-color:#FF3300;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
#neuf{
	background-color:#9999FF;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}
#dix{
	background-color:#669966;
	border: solid #000 0.05em;
	width: 100%;
	text-align: center;
	
}

-->
</style>
</head>

<body>

<div id="princitab">
  
  <div id="un">
        <tr>
          <td>
  <div id="deux">
       
            <div class="TDA">
              <p>A</p>
              
            </div>
            <div class="TDB">
              <p>B</p>
              
            </div>
            <div class="TDC">
             <p>C<br>D<p>
            </div>
       
 </div>
</div>
       
<div id="trois">
 </div>      
<div id="quatre">
        <h5>objets</h5>
<div id="cinq">
       <h5>&gt;&gt;&gt;&gt;&gt;&gt;&gt;<h5>
</div>
</div> 	 
<div id="six">
         
         <div class="TDF"> F</div> 
         <div class="TDG">G</div> 
         <div class="TDH">H</div>       
         <div class="TDI"> I</div> 
		 <div> J</div> 
         
</div>
<div id="sept">
        <tr>
        <td>J</td>
        </tr>
</div>
<div id="huit">
         
<div class="TDKL"><a name="<? echo $n1[0]; ?>"></a> <img src="../images/petites_annonces/fleche.gif" width=20 height=12 > </div>
         <div class="TDM">M</div>
         <div class="TDN">N</div>       
         <div class="TDO">O</div> 
		 <div>P</div>

<div id="neuf">
         <div>images</div>
</div> 
         
<div id="neuf">
         <div>objet</div>
</div>

<div id="dix">
       <div>&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</div>
</div>
  
    </div>
  </body>
</html>

Sujet clos