HTML : dans la version (« Code ») texte de la page. Remplacer le première ligne de code du tableau.
Style : « Propriétés du tableau » puis « Avancé » puis « Style ».
La largeur du tableau s’adapte au texte et bordures simples : Les espaces ne posent pas de problèmes.
Tableau de base 2×2 50% par colonne :
| qtrh | qjrrjjjjj |
| jffffffffff | gffffffffffffffffffffffffffj |
Tableau de base 2×2 adaptatif :
| qtrh | qjrrjjjjj |
| jffffffffff | gffffffffffffffffffffffffffj |
Tableau de base 3×2 adaptatif :
| qtrh | qjrrjjjjj | syyyyj |
| jffffffffff | gffffffffffffffffffffffffffj | jj |
1°/ Tableau avec https://divtable.com/table-styler/ : Tableau alterné bleu/blanc avec en-tête. La police sera plus petite, il faudra sélectionner toutes les cellules et passer de 14pt à 18pt. On pourra aussi centrer les cellules.
HTML : remplacer la première ligne <table> et juste avant <tbody> par
<table class= »blueTable »>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
Style : « Propriétés du tableau » mettre « Largeur » à auto.
| head1 | head2 | head3 | head4 |
|---|---|---|---|
| 12 | kj456 | 46565656565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546 hjhhhhhhhhh | xhhhhhhh hhn,546 | xn gfxn gfnw 1564 |
2°/ Tableau sans paramètres : Le tableau prend toute la largeur de l’écran (width: 100%;) et toutes les colonnes sont de la même largeur (width divisé par le nombre de colonnes).
HTML : <table style= »border-collapse: collapse; width: 100%; »>
Style : border-collapse: collapse; width: 100%; height: 72px;
| 12 | kj456 | 46565656565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546 hjhhhhhhhhh | xhhhhhhh hhn,546 | xn gfxn gfnw 1564 |
3°/ Tableau qui s’adapte au texte, largeurs fixes : La largeur du tableau s’adapte au texte et toutes les colonnes prennent la largeur de la plus grande. Les espaces ne posent pas de problèmes.
HTML : <table style= »table-layout: auto; width: auto; » class= »wp-block-table »>
Reécrit en : <table class= »wp-block-table » style= »table-layout: auto; width: auto; »>
Style : table-layout: auto; width: auto;
| 12 | kj456 | 465656 56565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546hjhhhhhhhhhpopo | xhhhhhpopopohhhhn,546 | xngfxngfnw1564 |
4°/ La largeur du tableau s’adapte au texte : Les espaces ne posent pas de problèmes.
HTML : <table class= »wp-block-table » style= »table-layout: auto; width: 46.102%; »>
Style : width: 46.102%; table-layout: auto; height: 72px;
| 12 | kj456 | 465656 56565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546hjhhhhhhhhhpopo | xhhhhhpopopohhhhn,546 | xngfxngfnw1564 |
5°/ La largeur du tableau s’adapte au texte et bordures simples : Les espaces ne posent pas de problèmes.
HTML : <table class= »wp-block-table » style= »height: 72px; width: 46.102%; table-layout: auto; border-style: solid; border-color: #000000; »>
Style : height: 72px; width: 46.102%; table-layout: auto; border-style: solid; border-color: #000000;
| 12 | kj456 | 465656 56565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546hjhhhhhhhhhpopo | xhhhhhpopopohhhhn,546 | xngfxngfnw1564 |
6°/ La largeur du tableau s’adapte au texte et bordures simples : Les espaces ne posent pas de problèmes.
HTML : <table class= »wp-block-table » style= »height: 72px; width: 46.102%; table-layout: auto; border-style: solid; border-color: #000000; »>
Style : height: 72px; width: 46.102%; table-layout: auto; border-style: solid; border-color: #000000;
| 12 | kj456 | 465656 56565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546hjhhhhhhhhhpopo | xhhhhhpopopohhhhn,546 | xngfxngfnw1564 |
Paramètres du tableau :
width: auto; table-layout: auto; border-style: solid; border-color: #000000;
| 12 | kj456 | 46565 656565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546hjhhhhhhhhh | xhhhhhhhhhn,546 | xn gfxn gfnw 1564 |
popo
| 12 | kj456 | 46565 656565 | xhhn645 |
| 4566 | hnjgj ghjfj | 45xhn | xnhnhnh1231312 |
| 897777 | 46546hjhhhhhhhhh | xhhhhhhhhhn,546 | xn gfxn gfnw 1564 |
Réponse à l’énigme : Sirop d’écorces d’oranges amères
| Mon premier est ce que disaient les Corses en voyant Napoléon. | Sire! |
| Mon second est ce que disait Napoléon en voyant des Corses. | Oh! Des Corses! |
| Mon troisième est ce que disait sa mère à Napoléon quand il était enfant, au lit. | Dors, Ange! |
| Mon quatrième est ce que répondait Napoléon à sa mère. | Ah, Mère! |
| Mon tout est une boisson alcoolisée très appréciée de Napoléon. | Sirop d’écorces d’oranges amères |
gklh
| head1 | head2 | head3 | head4 |
| cell1_1 | cell2_1 | cell3_1 | cell4_1 |
| cell1_2 | ce ll2_2 | cell3kkkkkkkkk kkkkkkkkkkkkk_2 | cell4_2 |
| cell1_3 | cell2_3 | cell3_3 | cell4_3 |
| cell1_4 | cell2_4 | cell3_4 | cell4_4 |
Réponse à l’énigme : Sirop d’écorces d’oranges amères
| gmm | Sire! |
| Dors, Ange! | |
| Mon quatrième à sa mère. | Ah, Mère! |
| Mon tout est éciée de Napoléon. | Sirop d’écorces d’oranges amères |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
2°/ Tableau sans paramètres : Le tableau prend toute la largeur de l’écran (width: 100%;) et toutes les colonnes sont de la même largeur (width divisé par le nombre de colonnes).
| qtrh | qjrrjjjjj | syyyyj |
| jffffffffff | gffffffffffffffffffffffffffj | jj |
3°/ Tableau qui s’adapte au texte, largeurs fixes : La largeur du tableau s’adapte au texte et toutes les colonnes prennent la largeur de la plus grande. Les espaces ne posent pas de problèmes. Bordures noires.
| qtrh | qjrrjjjjj | syyyyj |
| jffffffffff | gffffffffffffffffffffffffffj | jj |
5°/ La largeur du tableau s’adapte au texte et bordures simples : Les espaces ne posent pas de problèmes.
| qtrh | qjrrjjjjj | syyyyj |
| jffffffffff | gffffffffffffffffffffffffffj | jj |