table-par-colonnes ~ empile les lignes par colonnes

Idéal pour afficher une table planning en responsive

🆙 table_by_columns (table_par_colonnes) : tables responsives par empilement des lignes d'une colonne.

Cliquer pour lire la documentation

Syntaxe {up table-par-colonnes}
< table> ... < /table>
{/up table-par-colonnes}
Les lignes sont empilées par colonnes. Très pratique pour des plannings
@author: lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: John Polacek @tags: Responsive
  • table_by_columns (table_par_colonnes): rien
  • model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
  • max-height: permet de limiter la place en hauteur par l'affichage d'un ascenseur
  • breakpoint = 720px: bascule en vue responsive
  • key-width = 35%: largeur de la première colonne en vue responsive
  • title-style: style pour la ligne titre en vue responsive

Style CSS

  • id: Identifiant
  • style: style inline pour balise table
  • class: classe(s) pour balise table (obsolète)
  • css-head (base-css): permet d'ajouter des style à la table incluse

Basé sur un script de John Polacek (Licence MIT)

Cette action permet d'afficher une table de façon responsive. Pour chaque colonne, elle affiche le couple valeur première colonne - valeur de la colonne. Si necéssaire, des ascenseurs (horizontal et/ou vertical) seront ajoutés.

Il suffit d'entourer la table saisie en HTML ou avec un éditeur WYSIWYG comme TinyMCE par les shortcodes de UP

On dispose d'options pratiques comme:

  • breakpoint: indication de la largeur pour bascule en vue responsive. Très pratique pour coller au contenu de la table.
  • max-height: possibilité de limiter la place en hauteur par l'affichage d'un ascenseur
  • modele: modele CSS prévu par le webmaster pour toutes les tables de la page
  • key-width: largeur de la première colonne en vue responsive
  • title-style: personnalisation CSS du titre en vue responsive
UP table par colonnes

Attention: les balises ROWSPAN, THEAD et TFOOTER ne sont pas supportées par le script

La mise en forme de la table peut se faire dans un éditeur wysiwyg

Exemple: Planning

Redimensionner votre navigateur pour voir l'effet responsive

Cet exemple fictif reprend les conférences du dernier JoomlaDay

{up table-par-colonnes | breakpoint=600px | title-style=background-color:#069 | key-width=20% | style=width:100%;text-align:center}
---- la table ----
{/up table-par-colonnes}

La bascule responsive se fait à 600px.
En vue responsive, le titre sera sur fond bleu avec une première colonne à 20% de largeur.
La table fera toujours 100% de large.

Heure Lundi 1 Mardi 2 Mercredi 3 Jeudi 4
8h30 Ouverture des portes
9h - 9h30 Keynote d’ouverture Présentation du programme journalier
9h30 - 10h30 Plusieurs millions de Joomleurs en France, c'est possible ! Votre transformation digitale facilitée avec le CMS Joomla! Lightning Talks Développer son business grâce à une bonne relation client
10h30 - 11h Pause
9h30 - 10h30 Vous saurez tout sur Joomla! 3.7 10 tendances SEO à mettre en œuvre avec Joomla! Akeeba Backup & Amazon S3 CCK : NapContent, une nouvelle alternative aux solutions existantes
12h - 13h30 déjeuner
13h30-15h Design de template sur mesure avec Template Creator CK Développer un Composant avec le Builder Cook Self Service Gestion de ses notes et documentation Découvrez le potentiel des champs personnalisés de Joomla 3.7
16h-18h Atelier : Créer une application SEBLOD côté front-end J'aurais dû rester au lit ce matin (conception d'une CVthèque avec Joomla!) Atelier : Surcharges, CSS et JS dans la 3.7 Coupler AcyMailing et ElasticEmail pour une gestion performante de ses newsletters
20h restaurant restaurant diner-spectacle restaurant

Les pays européens

Redimensionner votre navigateur pour voir l'effet responsive

{up table-par-colonnes | max-height=500px | style=border:2px solid red}
---- la table ----
{/up table-par-colonnes}

La bascule responsive n'étant pas spécifiée, elle se fera à la valeur par défaut: 720px. Redimensionnez votre écran pour voir que les 2 tables réagissent différement.
La table a une hauteur maximale de 500px. J'ai ajouté une bordure rouge pour le mettre en évidence.

Nom français Plaques minéralogiques Indicatif téléphonique TLD Capitale Nom anglais Population Superficie Latitude Longitude Altitude
Albanie AL 355 .al Tirana Albania 2.821.977 28.748 km2 41.111 20.027 708
Allemagne D 49 .de Berlin Germany 80.619.000 357.022 km2 51.202 10.382 263
Andorre AND 376 .ad Andorre-la-Vieille Andorra 76.098 468 km2 42.551 1.576 1996
Autriche A 43 .at Vienne Austria 8.504.850 83.858 km2 47.589 14.140 910
Belgique B 32 .be Bruxelles Belgium 11.132.269 32.545 km2 50.649 4.642 181
Bosnie-Herzégovine BIH 387 .ba Sarajevo Bosnia and Herzegovina 3.791.622 51.197 km2 44.169 17.783 500
Bulgarie BG 359 .bg Sofia Bulgaria 7.282.041 110.912 km2 42.767 25.282 472
Croatie HR 385 .hr Zagreb Croatia 4.290.612 56.538 km2 45.743 17.099 331
Danemark DK 45 .dk Copenhague Denmark 5.627.235 43.094 km2 56.102 9.556 34
Espagne E 34 .es Madrid Spain 46.609.700 505.992 km2 40.396 -3.551 660
Estonie EST 372 .ee Tallinn Estonia 1.311.870 45.100 km2 58.694 25.253 61
Finlande FIN 358 .fi Helsinki Finland 5.452.821 338.145 km2 64.290 25.992 164
France F 33 .fr Paris France 65.844.000 551.500 km2 46.642 2.338 375
Grèce GR 30 .gr Athènes Greece 10.815.197 131.957 km2 38.301 23.741 498
Hongrie H 36 .hu Budapest Hungary 9.906.000 93.032 km2 47.166 19.418 143
Irlande IRL 353 .ie Dublin Ireland 4.593.100 70.273 km2 53.183 -8.199 118
Islande IS 354 .is Reykjavik Iceland 325.671 103.000 km2 64.929 -18.962 557
Italie I 39 .it Rome Italy 59.943.933 301.318 km2 42.768 12.492 538
Kosovo RKS 381 .xk Pristina Kosovo 1.815.606 10.887 km2 42.576 20.899 433
Lettonie LV 371 .lv Riga Latvia 2.003.900 64.600 km2 56.869 24.841 87
Liechtenstein FL 41 .li Vaduz Liechtenstein 37.132 160 km2 47.145 9.554 519
Lituanie LT 370 .lt Vilnius Lithuania 2.941.953 65.300 km2 55.338 23.874 110
Luxembourg LT 352 .lu Luxembourg Luxembourg 537.000 2.586 km2 49.778 6.095 325
Macédoine MK 389 .mk Skopje Macedonia 2.062.294 25.713 km2 41.603 21.715 741
Malte M 356 .mt La Valette Malta 416.055 316 km2 35.933 14.381 50
Moldavie MD 373 .md Chisinau Moldova 3.559.500 33.851 km2 47.203 28.473 139
Monaco MC 337 .mc Monaco Monaco 36.136 2 km2 43.740 7.427 32
Norvège N 47 .no Oslo Norway 5.109.056 385.155 km2 65.398 13.242 460
Pays-Bas NL 31 .nl Amsterdam Netherlands 16.842.200 41.528 km2 52.342 5.528 30
Pologne PL 48 .pl Varsovie Poland 38.502.396 312.685 km2 52.147 19.378 173
Portugal P 351 .pt Lisbonne Portugal 10.487.289 91.982 km2 39.642 -8.346 372
République tchèque CZ 42 .cz Prague Czech Republic 10.513.800 78.866 km2 49.739 15.333 433
Roumanie RO 40 .ro Bucarest Romania 20.121.641 238.391 km2 45.839 25.009 414
Royaume-Uni GB 44 .uk Londres United Kingdom 63.705.000 242.900 km2 54.071 -2.784 162
Russie RUS 7 .ru Moscou Russia 143.700.000 17.098.200 km2 63.140 103.890 600
Saint-Marin RSM 378 .sm Saint-Marin San Marino 33.540 61 km2 43.944 12.459 112
Slovaquie SK 42 .sk Bratislava Slovakia 5.415.949 49.033 km2 48.707 19.487 458
Slovénie SLO 386 .si Ljubljana Slovenia 2.061.963 20.256 km2 46.120 14.821 492
Suède S 46 .se Stockholm Sweden 9.651.531 449.964 km2 62.915 16.237 320
Suisse CH 41 .ch Berne Switzerland 8.112.200 41.284 km2 46.806 8.226 1350
Turquie TR 90 .tr Ankara Turkey 76.667.864 783.562 km2 39.051 34.930 1132
Ukraine UA 380 .ua Kiev Ukraine 45.426.200 603.700 km2 48.927 31.478 175
Vatican / (Saint-Siège) V 379 .va Vatican Vatican City 839 0,44 km2 41.903 12.453 15
Pour info, cette page utilise 6 action(s) :
upactionslist (1) addcsshead (1) modal (1) table-par-colonnes (2) jcontent-info (1)
Détails