Editing
Template:Paired list grid
Jump to navigation
Jump to search
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
<includeonly>{{#if:{{{label|}}}|<div id="{{{label id|{{anchorencode:{{{label}}}}}}}}" style="text-align: center; font-weight: bold;">{{{label}}}</div>}}<dl {{#if:{{{label|}}}|aria-labelledby="{{{label id|{{anchorencode:{{{label}}}}}}}}"}} style="display: -ms-grid; display: grid; margin: 5px; border-top: 1px solid {{{border color|#c8ccd1}}}; border-right: 1px solid {{{border color|#c8ccd1}}}; border-bottom: 1px solid {{{border color|#c8ccd1}}}; border-radius: 3px; padding-left: 1px; overflow: hidden; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(12, 1fr); text-align: center;"> <div style="display: inline-block; display: grid; grid-column: span {{{span 1|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 1|}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 1|}}}</span> </div> {{#if:{{{key 2|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 2|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 2}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 2|}}}</span> </div> }}{{#if:{{{key 3|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 3|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 3}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 3|}}}</span> </div> }}{{#if:{{{key 4|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 4|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 4}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 4|}}}</span> </div> }}{{#if:{{{key 5|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 5|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 5}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 5|}}}</span> </div> }}{{#if:{{{key 6|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 6|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 6}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 6|}}}</span> </div> }}{{#if:{{{key 7|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 7|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 7}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 7|}}}</span> </div> }}{{#if:{{{key 8|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 8|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 8}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 8|}}}</span> </div> }}{{#if:{{{key 9|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 9|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 9}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 9|}}}</span> </div> }}{{#if:{{{key 10|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 10|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 10}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 10|}}}</span> </div> }}{{#if:{{{key 11|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 11|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 11}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 11|}}}</span> </div> }}{{#if:{{{key 12|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 12|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 12}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 12|}}}</span> </div> }}{{#if:{{{key 13|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 13|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 13}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 13|}}}</span> </div> }}{{#if:{{{key 14|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 14|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 14}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 14|}}}</span> </div> }}{{#if:{{{key 15|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 15|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 15}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 15|}}}</span> </div> }}{{#if:{{{key 16|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 16|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 16}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 16|}}}</span> </div> }}{{#if:{{{key 17|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 17|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 17}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 17|}}}</span> </div> }}{{#if:{{{key 18|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 18|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 18}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 18|}}}</span> </div> }}{{#if:{{{key 19|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 19|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 19}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 19|}}}</span> </div> }}{{#if:{{{key 20|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 20|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 20}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 20|}}}</span> </div> }}{{#if:{{{key 21|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 21|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 21}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 21|}}}</span> </div> }}{{#if:{{{key 22|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 22|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 22}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 22|}}}</span> </div> }}{{#if:{{{key 23|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 23|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 23}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 23|}}}</span> </div> }}{{#if:{{{key 24|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 24|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 24}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 24|}}}</span> </div> }}{{#if:{{{key 25|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 25|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 25}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 25|}}}</span> </div> }}{{#if:{{{key 26|}}}| <div style="display: inline-block; display: grid; grid-column: span {{{span 26|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};"><span>{{{key 26}}}</span> <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 26|}}}</span> </div> }} </dl></includeonly><noinclude>Displays a grid containing key-value pairs. The grid's width is split into 1/12ths, so 12 "span" values fill the width. Default span value is 3 — 3/12ths or 1/4th of the width. Mimics a table layout, but avoids certain SEO and accessibility issues, especially mixed-up reading order, with using a table for this layout. == Example == <pre> {{paired list grid | label = Stats | label id = stats | key background color = lightblue | border color = darkblue | span 1 = 4 | key 1 = Level | value 1 = 10 | span 2 = 4 | key 2 = HP | value 2 = 100 | span 3 = 4 | key 3 = MP | value 3 = 10 | key 4 = Attack | value 4 = 100 | key 5 = Defence | value 5 = 100 | key 6 = Agility | value 6 = 100 | key 7 = Luck | value 7 = 100 }} </pre> {{paired list grid | label = Stats | label id = stats | key background color = lightblue | border color = darkblue | span 1 = 4 | key 1 = Level | value 1 = 10 | span 2 = 4 | key 2 = HP | value 2 = 100 | span 3 = 4 | key 3 = MP | value 3 = 10 | key 4 = Attack | value 4 = 100 | key 5 = Defence | value 5 = 100 | key 6 = Agility | value 6 = 100 | key 7 = Luck | value 7 = 100 }} Appearance in narrow viewports: <div style="max-width: 360px;"> {{paired list grid | label = Stats | label id = stats | key background color = lightblue | border color = darkblue | span 1 = 4 | key 1 = Level | value 1 = 10 | span 2 = 4 | key 2 = HP | value 2 = 100 | span 3 = 4 | key 3 = MP | value 3 = 10 | key 4 = Attack | value 4 = 100 | key 5 = Defence | value 5 = 100 | key 6 = Agility | value 6 = 100 | key 7 = Luck | value 7 = 100 }} </div> [[Category:List templates]]</noinclude>
Summary:
Please note that all contributions to Dragon Quest Wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see
Dragon Quest Wiki:Copyrights
for details).
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)
Template used on this page:
Template:Paired list grid
(
edit
)
Navigation menu
Personal tools
Not logged in
Talk
Contributions
Create account
Log in
Namespaces
Template
Discussion
English
Views
Read
Edit source
View history
More
Search
Navigation
Main page
About
Community portal
Recent changes
Random page
Discord
Tools
What links here
Related changes
Special pages
Page information
Latest Updates
New Articles
New Files
Wanted Articles
Recurring aspects
What is Dragon Quest?
Heroes
Skills & spells
Monsters
Affiliates
Dragon's Den
Mystery Dungeon Franchise Wiki
Dragon Quest Plushes Wiki