
Idéal pour afficher une table planning en responsive
{up table-par-colonnes}
< table> ... < /table>
{/up table-par-colonnes}
Les lignes sont empilées par colonnes. Très pratique pour des plannings
- 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
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 |
upactionslist (1) addcsshead (1) modal (1) table-par-colonnes (2) jcontent-info (1)