CSS pour créer un tableau

romer

02/06/2008 à 20:23

Alain Le Gallou wrote:

N'étant pas un expert du HTML et CSS je ne suis pas très sûr de ma
méthode de création des tableaux pour être conforme XHTML 1.0 Strict.

J'ai publié ma méthode ici http://www.legallou.com/HTMLCSS/130.html au
sein de mon tutoriel pour débutant.

Est-ce qu'un expert peu me dire, si je ne suis pas trop à côté de la
plaque, et comment faire mieux, car ma méthode nécessite un CSS par
taille de cellule.

Avant qu'un expert te réponde, juste 2 remarques :
- ne pas écrire 0em mais 0 tout court - valable pour toutes les unités.
- dès qu'une largeur de colonne ou de plusieurs est définie, inutile de
le répéter sur toutes les colonnes. Mais perso, je définis une largeur
sur la la 1re colonne - pourquoi la dernière ?

--
A+

Romer

unbewusst.sein

02/06/2008 à 20:39

Alain Le Gallou wrote:

Est-ce qu'un expert peu me dire, si je ne suis pas trop à côté de la
plaque, et comment faire mieux, car ma méthode nécessite un CSS par
taille de cellule.

je ne suis pas du tout un expert, cependant il me semble que la classe
"caption" est inutile vu que l'on peut directement sélectionner caption,
comme élément ))

il me semble aussi qu'il y a trop de classes.

en ce qui concerne les largeurs de cellules, pourquoi ne pas laisser
faire le brouteur lui-même sans rien spécifier ???

aussi ce genre de question serait plutôt à poser sur
fr.comp.infosystemes.www.auteurs, amha...
--
Une Bévue

monPrenom

02/06/2008 à 21:04

Une Bévue wrote:

je ne suis pas du tout un expert, cependant il me semble que la classe
"caption" est inutile vu que l'on peut directement sélectionner caption,
comme élément ))

C'est pour éviter de répéter la couleur et la taille de la font dans
l'élément caption.
Le fait que j'ai utilisé le mot "caption" nom de l'élément pour la
classe vous a peut être trompé.

il me semble aussi qu'il y a trop de classes.

C'est ce que je pense, d'où ma question, peut-on faire autrement.

en ce qui concerne les largeurs de cellules, pourquoi ne pas laisser
faire le brouteur lui-même sans rien spécifier ???

Oui, mais il prend toute la largeur de la page, et ce n'est pas joli
pour des cases contenant OUI - NON.

aussi ce genre de question serait plutôt à poser sur
fr.comp.infosystemes.www.auteurs, amha...

Je ne connais pas. Je vais y voir.

Alain Le Gallou
http://www.legallou.com/ - Email : mon prénom

SAM

03/06/2008 à 02:56

N'étant pas un expert du HTML et CSS je ne suis pas très sûr de ma
méthode de création des tableaux pour être conforme XHTML 1.0 Strict.

J'ai publié ma méthode ici http://www.legallou.com/HTMLCSS/130.html au
sein de mon tutoriel pour débutant.

Est-ce qu'un expert peu me dire, si je ne suis pas trop à côté de la
plaque,

Heu ... pourquoi XHTML ?
et pas simplement HTML 4.01 ?

Le Xhtml n'apportant que des e...des
ce qui n'empèche pas de faire du HTML propre ;-)
(proche du X-chose-la)

et comment faire mieux, car ma méthode nécessite un CSS par
taille de cellule.

Bon ... est-ce le lieu de faire un cour sur :
- html (table en particulier)
- css (utilisation des balises avant d'y coller des class redondantes)
?
Ne vaudrait-il pas mieux aller sur un ng dont c'est en charte ?
<news:fr.comp.infosystemes.www.auteurs>
par exemple

http://www.legallou.com/ - Email : mon prénom

Avant d'user d'Alsacreations (ou en parallèle) :
<http://www.yoyodesign.org/doc/w3c/css2/tables.html>
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#propdef-empty-cells>
et à garder à portée :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

Je ne vois pas où BBEdit ne sait pas faire du code "propre" pour un
table, il suffit de s'en servir comme il faut.

Un table est constitué de :
- balises table
- balises caption (optionnel)
- balises thead (optionnel)
- balises tbody
- balises tfoot (optionnel)

- caption, c'est mieux de l'avoir après balise ouvrante table
- thead et tfoot peuvent se mettre à la suite
- caption, thead et tfoot peuvent être mis n'importe où dans table mais
en dehors de tbody (il n'est pas interdit de les ranger dans l'ordre)
- tbody c'est là que ça se passe : il est obligatoire
(s'il n'y est pas le navigateur se le met, et IE ne peut s'en passer
pour les trucs en JavaScript)

- thead, tbody et tfoot contiennent au moins une rangée <tr>...</tr>
- une rangée contient au moins une cellule : <td> ... </td>
- une cellule peut être de type "titre" : <th>...</th>
- dans une rangée on peut mélanger TH et TD

ce qui peut, en exemple, se traduire par :

<table id="maTable">
<caption>Le titre</caption>
<thead>
<tr><th>art.</th><td>prix</td><td>quant</td><th>total</th></tr>
</thead>
<tbody>
<tr><th>01</th><td>1,25</td><td>12</td><th>15,00</th></tr>
<tr><th>02</th><td>2,75</td><td>5</td><th>13,75</th></tr>
<tr><th>03</th><td>3,40</td><td>23</td><th>78,20</th></tr>
</tbody>
<tfoot>
<tr><th colspan="3">TOTAL :</th><th>106,95</th></tr>
</tfoot>
</table>

la CSS :
======= <style type="text/css">
#maTable { border: 5px outset orange; border-collapse: separate;
border-spacing: 2px; width: 500px; margin: auto; }
#maTable caption { color: red; text-align: center; width: 100% }
#maTable th { background: #ff0; }
#maTable th,
#maTable td { border: 1px solid; text-align: right; width: 20% }
#maTable td:first-child { text-align: center }
#maTable thead th,
#maTable thead td,
#maTable th:first-child { text-align: center;
background: #ff9; font-weight: bold; color: blue; }
#maTable th:first-child { width: 40%; }
#maTable tfoot th,
#maTable tfoot th:first-child { text-align: right; }
</style>

IE ne connait pas ':first-child' :-(
S'il n'y a qu'une seule table, ou qu'elles soient toutes de même
présentation, on peut se passer des #maTable dans la CSS

--
sm

N'étant pas un expert du HTML et CSS je ne suis pas très sûr de ma
méthode de création des tableaux pour être conforme XHTML 1.0 Strict.

J'ai publié ma méthode ici http://www.legallou.com/HTMLCSS/130.html au
sein de mon tutoriel pour débutant.

Est-ce qu'un expert peu me dire, si je ne suis pas trop à côté de la
plaque,

Heu ... pourquoi XHTML ?
et pas simplement HTML 4.01 ?

Le Xhtml n'apportant que des e...des
ce qui n'empèche pas de faire du HTML propre ;-)
(proche du X-chose-la)

et comment faire mieux, car ma méthode nécessite un CSS par
taille de cellule.

Bon ... est-ce le lieu de faire un cour sur :
- html (table en particulier)
- css (utilisation des balises avant d'y coller des class redondantes)
?
Ne vaudrait-il pas mieux aller sur un ng dont c'est en charte ?
<news:fr.comp.infosystemes.www.auteurs>
par exemple

http://www.legallou.com/ - Email : mon prénom

Avant d'user d'Alsacreations (ou en parallèle) :
<http://www.yoyodesign.org/doc/w3c/css2/tables.html>
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#propdef-empty-cells>
et à garder à portée :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

Je ne vois pas où BBEdit ne sait pas faire du code "propre" pour un
table, il suffit de s'en servir comme il faut.

Un table est constitué de :
- balises table
- balises caption (optionnel)
- balises thead (optionnel)
- balises tbody
- balises tfoot (optionnel)

- caption, c'est mieux de l'avoir après balise ouvrante table
- thead et tfoot peuvent se mettre à la suite
- caption, thead et tfoot peuvent être mis n'importe où dans table mais
en dehors de tbody (il n'est pas interdit de les ranger dans l'ordre)
- tbody c'est là que ça se passe : il est obligatoire
(s'il n'y est pas le navigateur se le met, et IE ne peut s'en passer
pour les trucs en JavaScript)

- thead, tbody et tfoot contiennent au moins une rangée <tr>...</tr>
- une rangée contient au moins une cellule : <td> ... </td>
- une cellule peut être de type "titre" : <th>...</th>
- dans une rangée on peut mélanger TH et TD

ce qui peut, en exemple, se traduire par :

<table id="maTable">
<caption>Le titre</caption>
<thead>
<tr><th>art.</th><td>prix</td><td>quant</td><th>total</th></tr>
</thead>
<tbody>
<tr><th>01</th><td>1,25</td><td>12</td><th>15,00</th></tr>
<tr><th>02</th><td>2,75</td><td>5</td><th>13,75</th></tr>
<tr><th>03</th><td>3,40</td><td>23</td><th>78,20</th></tr>
</tbody>
<tfoot>
<tr><th colspan="3">TOTAL :</th><th>106,95</th></tr>
</tfoot>
</table>

la CSS :
======= <style type="text/css">
#maTable { border: 5px outset orange; border-collapse: separate;
border-spacing: 2px; width: 500px; margin: auto; }
#maTable caption { color: red; text-align: center; width: 100% }
#maTable th { background: #ff0; }
#maTable th,
#maTable td { border: 1px solid; text-align: right; width: 20% }
#maTable td:first-child { text-align: center }
#maTable thead th,
#maTable thead td,
#maTable th:first-child { text-align: center;
background: #ff9; font-weight: bold; color: blue; }
#maTable th:first-child { width: 40%; }
#maTable tfoot th,
#maTable tfoot th:first-child { text-align: right; }
</style>

IE ne connait pas ':first-child' :-(
S'il n'y a qu'une seule table, ou qu'elles soient toutes de même
présentation, on peut se passer des #maTable dans la CSS

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

N'étant pas un expert du HTML et CSS je ne suis pas très sûr de ma
méthode de création des tableaux pour être conforme XHTML 1.0 Strict.

J'ai publié ma méthode ici http://www.legallou.com/HTMLCSS/130.html au
sein de mon tutoriel pour débutant.

Est-ce qu'un expert peu me dire, si je ne suis pas trop à côté de la
plaque,

Heu ... pourquoi XHTML ?
et pas simplement HTML 4.01 ?

Le Xhtml n'apportant que des e...des
ce qui n'empèche pas de faire du HTML propre ;-)
(proche du X-chose-la)

et comment faire mieux, car ma méthode nécessite un CSS par
taille de cellule.

Bon ... est-ce le lieu de faire un cour sur :
- html (table en particulier)
- css (utilisation des balises avant d'y coller des class redondantes)
?
Ne vaudrait-il pas mieux aller sur un ng dont c'est en charte ?
<news:fr.comp.infosystemes.www.auteurs>
par exemple

http://www.legallou.com/ - Email : mon prénom

Avant d'user d'Alsacreations (ou en parallèle) :
<http://www.yoyodesign.org/doc/w3c/css2/tables.html>
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#propdef-empty-cells>
et à garder à portée :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

Je ne vois pas où BBEdit ne sait pas faire du code "propre" pour un
table, il suffit de s'en servir comme il faut.

Un table est constitué de :
- balises table
- balises caption (optionnel)
- balises thead (optionnel)
- balises tbody
- balises tfoot (optionnel)

- caption, c'est mieux de l'avoir après balise ouvrante table
- thead et tfoot peuvent se mettre à la suite
- caption, thead et tfoot peuvent être mis n'importe où dans table mais
en dehors de tbody (il n'est pas interdit de les ranger dans l'ordre)
- tbody c'est là que ça se passe : il est obligatoire
(s'il n'y est pas le navigateur se le met, et IE ne peut s'en passer
pour les trucs en JavaScript)

- thead, tbody et tfoot contiennent au moins une rangée <tr>...</tr>
- une rangée contient au moins une cellule : <td> ... </td>
- une cellule peut être de type "titre" : <th>...</th>
- dans une rangée on peut mélanger TH et TD

ce qui peut, en exemple, se traduire par :

<table id="maTable">
<caption>Le titre</caption>
<thead>
<tr><th>art.</th><td>prix</td><td>quant</td><th>total</th></tr>
</thead>
<tbody>
<tr><th>01</th><td>1,25</td><td>12</td><th>15,00</th></tr>
<tr><th>02</th><td>2,75</td><td>5</td><th>13,75</th></tr>
<tr><th>03</th><td>3,40</td><td>23</td><th>78,20</th></tr>
</tbody>
<tfoot>
<tr><th colspan="3">TOTAL :</th><th>106,95</th></tr>
</tfoot>
</table>

la CSS :
======= <style type="text/css">
#maTable { border: 5px outset orange; border-collapse: separate;
border-spacing: 2px; width: 500px; margin: auto; }
#maTable caption { color: red; text-align: center; width: 100% }
#maTable th { background: #ff0; }
#maTable th,
#maTable td { border: 1px solid; text-align: right; width: 20% }
#maTable td:first-child { text-align: center }
#maTable thead th,
#maTable thead td,
#maTable th:first-child { text-align: center;
background: #ff9; font-weight: bold; color: blue; }
#maTable th:first-child { width: 40%; }
#maTable tfoot th,
#maTable tfoot th:first-child { text-align: right; }
</style>

IE ne connait pas ':first-child' :-(
S'il n'y a qu'une seule table, ou qu'elles soient toutes de même
présentation, on peut se passer des #maTable dans la CSS

--
sm

francois.jacquemin

03/06/2008 à 06:03

Alain Le Gallou wrote:

N'étant pas un expert du HTML et CSS je ne suis pas très sûr de ma
méthode de création des tableaux pour être conforme XHTML 1.0 Strict.

J'ai publié ma méthode ici http://www.legallou.com/HTMLCSS/130.html au
sein de mon tutoriel pour débutant.

J'utilise BBEdit 8.7.2, et j'aimerais bien savoir en quoi ne rend-il pas

du XHTML 1.0 Strict si on le lui demande au niveau du type de document.

Est-ce qu'un expert peu me dire, si je ne suis pas trop à côté de la
plaque, et comment faire mieux, car ma méthode nécessite un CSS par
taille de cellule.

C'est que le HTML ne gérant pas les colonnes, il est nécessaire de faire
ainsi.
Par ailleurs, moi, je rajouterais un lien vers les tutoriaux du W3C,
pour ceux qui veulent du concret, facile à expérimenter et qui ne
redoutent pas l'anglois.

Merci

Alain Le Gallou
http://www.legallou.com/ - Email : mon prénom

--
F. J.

unbewusst.sein

03/06/2008 à 07:18

François Jacquemin wrote:

Par ailleurs, moi, je rajouterais un lien vers les tutoriaux du W3C,
pour ceux qui veulent du concret, facile à expérimenter et qui ne
redoutent pas l'anglois.

je dirais même plus, pourquoi un tutoriel html de + en 2008 ?
il y en a tellement sur le net.
mais trop de tutoriels sont mal fichus...

--
Une Bévue

unbewusst.sein

03/06/2008 à 07:18

Alain Le Gallou wrote:

Je ne connais pas. Je vais y voir.

euh, sois prudent, n'expose pas tout ton code ...
un extrait p'tet ;-)
--
Une Bévue

monPrenom

03/06/2008 à 09:23

SAM wrote:

Bon ... est-ce le lieu de faire un cour sur :
- html (table en particulier).....

probablement pas, mais, vos réponses me donnent du grain à moudre
et des adresses que je connaissais pas comme www.yoyodesign.org
et
<news:fr.comp.infosystemes.www.auteurs>

Je vais donc pouvoir progresser. merci à tous.

Alain Le Gallou
http://www.legallou.com/ - Email : mon prénom

francois.jacquemin

03/06/2008 à 10:12

Une Bévue wrote:

je dirais même plus, pourquoi un tutoriel html de + en 2008 ?
il y en a tellement sur le net.
mais trop de tutoriels sont mal fichus...

Tout à fait vrai. Pour moi, qui ne suis plus jeune, attaché au livre, je
préfère encore un ouvrage papier à un tutoriel sur le net, à moins qu'il
ne soit en image, ou encore éditable avec possibilité de voir le
changement produit comme c'est le cas sur le tutoriel du W3C,

<http://www.w3schools.com/>,

extraordinaire pour tout apprendre des techniques Web, on dirait
"technologies du Web" avec l'inflation verbale qui convient.
--
F. J.

unbewusst.sein

03/06/2008 à 10:32

François Jacquemin wrote:

extraordinaire pour tout apprendre des techniques Web, on dirait
"technologies du Web" avec l'inflation verbale qui convient.

las...

dans une société en perte de sens, le ouèbe devient sémantique ;-)
et toc !!!
--
Une Bévue

CSS pour créer un tableau

10 réponses

Veuillez sélectionner un problème