[FAQ] une autre façon de faire des tableaux à coins arrondis

**SpaceFrog** · 05/01/2007, 16h39

Juste pour le fun:

peu importe la taille du tableau, la hauteur des lignes et la largeur des cellules, il calcule tout seul l'arrondi :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
<html>
<head>
<title>Nouvelle page 1</title>
 
 
 
</head>
 
 
<script type='text/javascript'>
var TabWidths= new Array()
var tl
var tr
var bl
var br
 
function Widths(lines){
TabWidths.length=0
 var DivCount=lines
 for (i=0;i<DivCount;i++){
        var Y=i
        var R=DivCount;
        TabWidths[TabWidths.length]=(Math.floor(R*Math.sin(Math.acos(Y/R))))
        }
 }        
 
 
function Corners(){
 var fl= document.getElementsByTagName('tr')[0]
 var ll= document.getElementsByTagName('tr')[document.getElementsByTagName('tr').length-1]
 tl=fl.getElementsByTagName('td')[0]
 tl.dir="rtl"
 
 tr=fl.getElementsByTagName('td')[fl.getElementsByTagName('td').length-1] 
 tr.dir="ltr"
 
 bl=ll.getElementsByTagName('td')[0]
 bl.dir="rtl"
 
 br=ll.getElementsByTagName('td')[ll.getElementsByTagName('td').length-1] 
 br.dir="ltr"
 
 
 
 var tlW=Math.ceil(fl.offsetHeight/2)*2+2
 var trW=Math.ceil(ll.offsetHeight/2)*2+2
 
 
 tl.style.width=tlW
 tr.style.width=tlW
 
 MkDivs(tlW,tl)
 MkDivs(tlW,tr)
 MkDivs(tlW,bl)
 MkDivs(tlW,br)
 
 }
 
 
 function MkDivs(Count,Paste){
  Widths(Count)
  for(i=0; i<Count-1;i++){var NewDiv =document.createElement('div');
                                NewDiv.style.cssText="background-color:red;height:1px;line-height:0px; font-size:0px;border:solid 0px;overflow:hidden"
                                Paste.style.backgroundColor='white';
                                  Paste.style.padding='0px';
                                  Paste.style.margin='0px';
                                  Paste.style.border='0px'
                                  Paste.style.overflow='hidden'
                                  Paste.style.lineHeight='1px'
                                  Paste.style.fontSize='1px'
                                  switch (Paste) { 
                                                  case tl:     NewDiv.style.width=TabWidths[i];
                                                              break;
                                                              
                                                  case tr:  NewDiv.style.width=TabWidths[i];
                                                              break;    
 
                                                  case bl:  NewDiv.style.width=TabWidths[Count-i-1];
                                                              break;
                                                              
                                                  case br:      NewDiv.style.width=TabWidths[Count-i-1];
                                                            break;
                                                  }
                                 Paste.insertBefore(NewDiv,Paste.firstChild)
                                 }
                                 Paste.removeChild(Paste.lastChild)
                                 
     }
 
 
 
 
 
</script>
<body onload="Corners();">
<table style="background-color:red;border-collapse:collapse; " >
 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td></td>
</tr> 
<tr>
 <td></td>
 <td>cxwvxcvwvxcv</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
</tr> 
 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>cxwvxcvwvxcv</td>
 <td>&nbsp;</td>
</tr> 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>cxwvxcvwvxcv</td>
 <td>&nbsp;</td>
</tr> 
 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>cxwvxcvwvxcv</td>
 <td>&nbsp;</td>
</tr> 
 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>cxwvxcvwvxcv</td>
 <td>&nbsp;</td>
</tr> 
 
<tr>
 <td></td>
 <td>cxwvxcvwvxcv</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
</tr> 
<tr>
 <td></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td></td>
</tr> 
 
</table>
 
</body>

**FremyCompany** · 05/01/2007, 20h52

Tu aurais une page en ligne ou l'on peut tester ?

**SpaceFrog** · 08/01/2007, 10h17

heu non mais un simple copier coller du code focntionne ...

**Bisûnûrs** · 08/01/2007, 11h52

As-tu testé avec un DOCTYPE ? Parce que son utilisation peut entraîner des changements. ^^

**SpaceFrog** · 08/01/2007, 14h58

la solution ne vaut biensur que tellequelle ...
mais testé en html 4 strict et loose ...
ça passe ....

**SpaceFrog** · 08/01/2007, 15h00

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
HTML 2.0  <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">  
 
HTML 3.2  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">  
 
HTML 4.01 - Strict  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 
HTML 4.01 - Transitional  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 
HTML 4.01 - Frameset  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
 
XHTML 1.0 - Strict  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 
XHTML 1.0 - Transitional  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
XHTML 1.0 - Frameset  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
 
XHTML 1.1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ça passe ...

**SpaceFrog** · 10/01/2007, 09h35

on m'a également fait la sampiternelle remarque du l'utiliation de table pour la mise en page ...

Ce code est tout à fait adaptable a une mise en forme de tableaux avec des divs ...

suffit de mettre des id rationnels pour les divs ou span de coins et appender dedans

[FAQ] une autre façon de faire des tableaux à coins arrondis

Contribuez

Discussions similaires

Partager

Partager