[JavaScript] [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

05/01/2007, 20h52	#2
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	Tu aurais une page en ligne ou l'on peut tester ? __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

08/01/2007, 10h17	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 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 119 Points : 45 278 Points : 45 278	heu non mais un simple copier coller du code focntionne ... __________________ 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

08/01/2007, 14h58	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 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 119 Points : 45 278 Points : 45 278	la solution ne vaut biensur que tellequelle ... mais testé en html 4 strict et loose ... ça passe .... __________________ 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

10/01/2007, 09h35	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 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 119 Points : 45 278 Points : 45 278	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 __________________ 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

08/01/2007, 11h52	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	As-tu testé avec un DOCTYPE ? Parce que son utilisation peut entraîner des changements. ^^
	00

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