Discussion :

[MEGAMIND2]

Bonjour à tous,

J'aimerai tracer une ligne dans un tableau, mais je n'y arrive pas (je débute en html)

voici mon code et l'image que je souhaiterais obtenir en pièce jointe:

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
  <TABLE BORDER=0 BORDERCOLOR= black CELLSPACING=12 CELLPADDING=12 WIDTH=25%>
		 / <TR VALIGN=middle align=middle>
              /<TD rowspan=3 colspan=4 VALIGN=middle align=middle >  </TD>   
		  / <TD style='border: thin dotted   #0B3B0B'> <font size='2'>SG1</font></TD>  
		   / <TD style='border: thin dotted   #0B3B0B'> <font size='2'>SG2</font></TD>       
		   / <TD style='border: thin dotted   #0B3B0B'> <font size='2'>SG3</font></TD>          
            /</TR>
		 / <TR VALIGN=middle align=middle>
          /	   <TD VALIGN=middle align=middle><img src='http://img11.hostingpics.net/pics/924733okfichier.png' width='40' height='40' />
          /	   <TD VALIGN=middle align=middle><img src='http://img11.hostingpics.net/pics/924733okfichier.png' width='40' height='40' />
          /	   <TD VALIGN=middle align=middle><img src='http://img11.hostingpics.net/pics/924733okfichier.png' width='40' height='40' />
 
          /	</TR>
		  / <TR VALIGN=middle align=middle>
 
		  /	   <TD colspan=1 VALIGN=middle align=middle><img src='http://img11.hostingpics.net/pics/455991okflechebas.png' width='35' height='35'/>
            /	   <TD colspan=1 VALIGN=middle align=middle><img src='http://img11.hostingpics.net/pics/455991okflechebas.png' width='35' height='35'/>
           /	   <TD colspan=1 VALIGN=middle align=middle><img src='http://img11.hostingpics.net/pics/455991okflechebas.png' width='35' height='35'/>
           / </TR>
 
 
		  / <TR VALIGN=middle align=middle>	                     
          /  <TD rowspan=5 align=left style='border: thin dotted   #0B3B0B'> <font size='1'> mvt</font>         </TD>
 
/  <TD  rowspan=3 align=left style='border: thin dotted   #0B3B0B'> <font size='1'> rejets</font>  </TD>
         /	   <TD rowspan=5 colspan=1 VALIGN=middle align=middle><img src='http://img15.hostingpics.net/pics/325212okfleche.png' width='35' height='35'/>
 
          /	<TD rowspan=5 align=left ><img src='http://img11.hostingpics.net/pics/127773inf.png'/></TD>
 
       /	<TD rowspan=5 align=left ><img src='http://img4.hostingpics.net/pics/293176oktraitaxiomev4.png' width='35' height='35'/></TD> 
       /	<TD rowspan=5 align=left ><img src='http://img4.hostingpics.net/pics/720920oktraitaxiomev1.png' width='35' height='35'/></TD> 
      /	        <TD rowspan=5 align=left ><img src='http://img4.hostingpics.net/pics/289074oktraitpsapnova.png' width='35' height='35'/></TD> 
 
 
 / </TR>
 
 / </TABLE>

Je vous remercie par avance!

[Muchos]

je débute en html

Bonjour,
Il faut passer par CSS.
C'est ainsi que vous tracerez la ligne de votre tableau (propriété BORDER). De même, vous pourrez supprimer les attributs HTML de mise en forme du tableau (dépréciés) et les styles en ligne, difficiles à maintenir à terme.

[Bovino]

je débute en html

Malheureusement, tu débutes mal...
Ton code est écrit de façon très "old school" et ne correspond pas aux bonnes pratiques actuelles.
D'autre part, tu utilises des attributs servant à apporter du style (la plupart sont dépréciés dans les évolution plus ou moins récentes du standard HTML) alors que c'est CSS qui devrait être utilisé pour fixer l'apparence.

Bref, je ne sais pas avec quelle source tu fais ton apprentissage, mais je te conseillerais d'en changer au plus vite.

[MEGAMIND2]

Bonjour,

J'utilise du html de manière ponctuelle dans le cadre de mon projet BI, et je pense ne plus en refaire une fois que mon appli sera déployée.

Je vous remercie quand même!

[rodolphebrd]

Bonjour,

voici votre code épuré...

Autant partir avec des bases.

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
<TABLE>  <TR class="first-row">
    <TD rowspan=3 colspan=4>  </TD>   
	  <TD class="dot">SG1</TD>  
		<TD class="dot">SG2</TD>       
		<TD class="dot">SG3</TD>          
      </TR>
	<TR>
     <TD><img src='http://img11.hostingpics.net/pics/924733okfichier.png' width='40' height='40' />
     <TD><img src='http://img11.hostingpics.net/pics/924733okfichier.png' width='40' height='40' />
     <TD><img src='http://img11.hostingpics.net/pics/924733okfichier.png' width='40' height='40' />
   </TR>
	<TR>
		<TD colspan=1><img src='http://img11.hostingpics.net/pics/455991okflechebas.png' width='35' height='35'/>
     <TD colspan=1><img src='http://img11.hostingpics.net/pics/455991okflechebas.png' width='35' height='35'/>
     <TD colspan=1><img src='http://img11.hostingpics.net/pics/455991okflechebas.png' width='35' height='35'/>
   </TR>
  <TR>	                     
     <TD class="dot left">mvt</TD>
     <TD class="dot left">rejets</TD>
     <TD><img src='http://img15.hostingpics.net/pics/325212okfleche.png' width='35' height='35'/>
     <TD class="bord-dot"><img src='http://img11.hostingpics.net/pics/127773inf.png'/></TD>
     <TD class="bord-dot"><img src='http://img4.hostingpics.net/pics/293176oktraitaxiomev4.png' width='35' height='35'/></TD> 
     <TD class="bord-dot"><img src='http://img4.hostingpics.net/pics/720920oktraitaxiomev1.png' width='35' height='35'/></TD> 
     <TD class="bord-dot"><img src='http://img4.hostingpics.net/pics/289074oktraitpsapnova.png' width='35' height='35'/></TD> 
    </TR>
  </TABLE>

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
table { width: 75%;
 text-align: center;
 vertical-align: middle;
}
.dot{
  border: thin dotted   #0B3B0B
}
.left{
  text-align: left;
  font-size: 10px;
}
td{
  width: 35px;
  height: 35px;
  padding:12px;
}
.first-row{
  font-size: 10px;
}
.bord-dot {
  border-top: 2px dotted blue;
  border-bottom: 2px dotted blue;
}

http://codepen.io/rodolpheb/pen/lEouh?editors=110