CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Help:Sortable tables - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"2fc269d0-42fa-42ec-a143-bd89df999a23","wgCanonicalNamespace":"Help","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":12,"wgPageName":"Help:Sortable_tables","wgTitle":"Sortable tables","wgCurRevisionId":1248995605,"wgRevisionId":1248995605,"wgArticleId":8577126,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Wikipedia how-to","Wikipedia tables"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Help:Sortable_tables","wgRelevantArticleId":8577126,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true, "wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":80000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"source","wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q8615872","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform", "platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.inputBox.styles":"ready","ext.pygments":"ready","ext.cite.styles":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.tablesorter.styles":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=[ "ext.pygments.view","ext.cite.ux-enhancements","mediawiki.page.media","site","mediawiki.page.ready","jquery.tablesorter","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","wikibase.client.vector-2022","ext.checkUser.clientHints","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.discussionTools.init.styles%7Cext.inputBox.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cjquery.tablesorter.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Help:Sortable tables - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Help:Sortable_tables"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Help:Sortable_tables&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Help:Sortable_tables"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-12 ns-subject mw-editable page-Help_Sortable_tables rootpage-Help_Sortable_tables skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Help%3ASortable+tables" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Help%3ASortable+tables" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Help%3ASortable+tables" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Help%3ASortable+tables" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Creating_sortable_tables" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Creating_sortable_tables"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Creating sortable tables</span> </div> </a> <button aria-controls="toc-Creating_sortable_tables-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Creating sortable tables subsection</span> </button> <ul id="toc-Creating_sortable_tables-sublist" class="vector-toc-list"> <li id="toc-Simple_example" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Simple_example"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Simple example</span> </div> </a> <ul id="toc-Simple_example-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Initial_sort_order_of_rows" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Initial_sort_order_of_rows"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>Initial sort order of rows</span> </div> </a> <ul id="toc-Initial_sort_order_of_rows-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Using_sortable_tables" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Using_sortable_tables"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Using sortable tables</span> </div> </a> <button aria-controls="toc-Using_sortable_tables-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Using sortable tables subsection</span> </button> <ul id="toc-Using_sortable_tables-sublist" class="vector-toc-list"> <li id="toc-Example" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Example"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Example</span> </div> </a> <ul id="toc-Example-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tables_with_complex_headers" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Tables_with_complex_headers"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Tables with complex headers</span> </div> </a> <ul id="toc-Tables_with_complex_headers-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tables_with_merged_data_rows" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Tables_with_merged_data_rows"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>Tables with merged data rows</span> </div> </a> <ul id="toc-Tables_with_merged_data_rows-sublist" class="vector-toc-list"> <li id="toc-Online_table_editors_and_rowspan" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Online_table_editors_and_rowspan"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3.1</span> <span>Online table editors and rowspan</span> </div> </a> <ul id="toc-Online_table_editors_and_rowspan-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Secondary_key_and_multi-key_sorting" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Secondary_key_and_multi-key_sorting"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span> <span>Secondary key and multi-key sorting</span> </div> </a> <ul id="toc-Secondary_key_and_multi-key_sorting-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Optimising_tables_for_a_narrow_display" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Optimising_tables_for_a_narrow_display"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Optimising tables for a narrow display</span> </div> </a> <button aria-controls="toc-Optimising_tables_for_a_narrow_display-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Optimising tables for a narrow display subsection</span> </button> <ul id="toc-Optimising_tables_for_a_narrow_display-sublist" class="vector-toc-list"> <li id="toc-Vertical_headers" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Vertical_headers"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>Vertical headers</span> </div> </a> <ul id="toc-Vertical_headers-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Sort_under_template" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Sort_under_template"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Sort under template</span> </div> </a> <ul id="toc-Sort_under_template-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Restrictions_and_exclusions" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Restrictions_and_exclusions"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Restrictions and exclusions</span> </div> </a> <button aria-controls="toc-Restrictions_and_exclusions-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Restrictions and exclusions subsection</span> </button> <ul id="toc-Restrictions_and_exclusions-sublist" class="vector-toc-list"> <li id="toc-Making_selected_columns_unsortable" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Making_selected_columns_unsortable"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.1</span> <span>Making selected columns unsortable</span> </div> </a> <ul id="toc-Making_selected_columns_unsortable-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Excluding_final_rows_from_sorting" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Excluding_final_rows_from_sorting"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2</span> <span>Excluding final rows from sorting</span> </div> </a> <ul id="toc-Excluding_final_rows_from_sorting-sublist" class="vector-toc-list"> <li id="toc-Header_as_a_footer" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Header_as_a_footer"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2.1</span> <span>Header as a footer</span> </div> </a> <ul id="toc-Header_as_a_footer-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Summation_footer" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Summation_footer"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2.2</span> <span>Summation footer</span> </div> </a> <ul id="toc-Summation_footer-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Excluding_top_rows_from_sorting" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Excluding_top_rows_from_sorting"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.3</span> <span>Excluding top rows from sorting</span> </div> </a> <ul id="toc-Excluding_top_rows_from_sorting-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Configuring_the_sorting" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Configuring_the_sorting"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Configuring the sorting</span> </div> </a> <ul id="toc-Configuring_the_sorting-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Forcing_a_column_to_have_a_particular_data_type" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Forcing_a_column_to_have_a_particular_data_type"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>Forcing a column to have a particular data type</span> </div> </a> <button aria-controls="toc-Forcing_a_column_to_have_a_particular_data_type-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Forcing a column to have a particular data type subsection</span> </button> <ul id="toc-Forcing_a_column_to_have_a_particular_data_type-sublist" class="vector-toc-list"> <li id="toc-data-sort-type=text" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#data-sort-type=text"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.1</span> <span>data-sort-type=text</span> </div> </a> <ul id="toc-data-sort-type=text-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Default_data_type_of_a_column" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Default_data_type_of_a_column"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.2</span> <span>Default data type of a column</span> </div> </a> <ul id="toc-Default_data_type_of_a_column-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Specifying_a_sort_key_for_a_cell" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Specifying_a_sort_key_for_a_cell"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>Specifying a sort key for a cell</span> </div> </a> <button aria-controls="toc-Specifying_a_sort_key_for_a_cell-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Specifying a sort key for a cell subsection</span> </button> <ul id="toc-Specifying_a_sort_key_for_a_cell-sublist" class="vector-toc-list"> <li id="toc-Keeping_some_rows_together" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Keeping_some_rows_together"> <div class="vector-toc-text"> <span class="vector-toc-numb">8.1</span> <span>Keeping some rows together</span> </div> </a> <ul id="toc-Keeping_some_rows_together-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Examples_of_datatype_auto_detection._First_5_cells_in_a_column" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Examples_of_datatype_auto_detection._First_5_cells_in_a_column"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span> <span>Examples of datatype auto detection. First 5 cells in a column</span> </div> </a> <ul id="toc-Examples_of_datatype_auto_detection._First_5_cells_in_a_column-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Numerical_sorting_problems" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Numerical_sorting_problems"> <div class="vector-toc-text"> <span class="vector-toc-numb">10</span> <span>Numerical sorting problems</span> </div> </a> <button aria-controls="toc-Numerical_sorting_problems-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Numerical sorting problems subsection</span> </button> <ul id="toc-Numerical_sorting_problems-sublist" class="vector-toc-list"> <li id="toc-c._for_circa" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#c._for_circa"> <div class="vector-toc-text"> <span class="vector-toc-numb">10.1</span> <span>c. for circa</span> </div> </a> <ul id="toc-c._for_circa-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Numerical_ranges" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Numerical_ranges"> <div class="vector-toc-text"> <span class="vector-toc-numb">10.2</span> <span>Numerical ranges</span> </div> </a> <ul id="toc-Numerical_ranges-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Date_sorting_problems" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Date_sorting_problems"> <div class="vector-toc-text"> <span class="vector-toc-numb">11</span> <span>Date sorting problems</span> </div> </a> <button aria-controls="toc-Date_sorting_problems-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Date sorting problems subsection</span> </button> <ul id="toc-Date_sorting_problems-sublist" class="vector-toc-list"> <li id="toc-Month_names" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Month_names"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.1</span> <span>Month names</span> </div> </a> <ul id="toc-Month_names-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Year_only" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Year_only"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.2</span> <span>Year only</span> </div> </a> <ul id="toc-Year_only-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Year_and_month" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Year_and_month"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.3</span> <span>Year and month</span> </div> </a> <ul id="toc-Year_and_month-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Month_and_year" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Month_and_year"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.4</span> <span>Month and year</span> </div> </a> <ul id="toc-Month_and_year-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Full_dates_work._Year_must_be_on_the_end" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Full_dates_work._Year_must_be_on_the_end"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.5</span> <span>Full dates work. Year must be on the end</span> </div> </a> <ul id="toc-Full_dates_work._Year_must_be_on_the_end-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Year,_month,_day._Using_words_for_months" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Year,_month,_day._Using_words_for_months"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.6</span> <span>Year, month, day. Using words for months</span> </div> </a> <ul id="toc-Year,_month,_day._Using_words_for_months-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.7</span> <span>Year, month, day. Using numbers. ISO date YYYY-MM-DD</span> </div> </a> <ul id="toc-Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Years_BC_are_a_problem" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Years_BC_are_a_problem"> <div class="vector-toc-text"> <span class="vector-toc-numb">12</span> <span>Years BC are a problem</span> </div> </a> <ul id="toc-Years_BC_are_a_problem-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Date_table_sorting_template._Many_date_formats" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Date_table_sorting_template._Many_date_formats"> <div class="vector-toc-text"> <span class="vector-toc-numb">13</span> <span>Date table sorting template. Many date formats</span> </div> </a> <button aria-controls="toc-Date_table_sorting_template._Many_date_formats-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Date table sorting template. Many date formats subsection</span> </button> <ul id="toc-Date_table_sorting_template._Many_date_formats-sublist" class="vector-toc-list"> <li id="toc-Issues._Years_BC,_etc" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Issues._Years_BC,_etc"> <div class="vector-toc-text"> <span class="vector-toc-numb">13.1</span> <span>Issues. Years BC, etc</span> </div> </a> <ul id="toc-Issues._Years_BC,_etc-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Before_year_100._Any_date_format" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Before_year_100._Any_date_format"> <div class="vector-toc-text"> <span class="vector-toc-numb">14</span> <span>Before year 100. Any date format</span> </div> </a> <ul id="toc-Before_year_100._Any_date_format-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Background_colors_in_sortable_headers" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Background_colors_in_sortable_headers"> <div class="vector-toc-text"> <span class="vector-toc-numb">15</span> <span>Background colors in sortable headers</span> </div> </a> <ul id="toc-Background_colors_in_sortable_headers-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tips_and_tricks" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Tips_and_tricks"> <div class="vector-toc-text"> <span class="vector-toc-numb">16</span> <span>Tips and tricks</span> </div> </a> <button aria-controls="toc-Tips_and_tricks-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Tips and tricks subsection</span> </button> <ul id="toc-Tips_and_tricks-sublist" class="vector-toc-list"> <li id="toc-Padding" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Padding"> <div class="vector-toc-text"> <span class="vector-toc-numb">16.1</span> <span>Padding</span> </div> </a> <ul id="toc-Padding-sublist" class="vector-toc-list"> <li id="toc-Non-breaking_spaces" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Non-breaking_spaces"> <div class="vector-toc-text"> <span class="vector-toc-numb">16.1.1</span> <span>Non-breaking spaces</span> </div> </a> <ul id="toc-Non-breaking_spaces-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Padding_with_zeros" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Padding_with_zeros"> <div class="vector-toc-text"> <span class="vector-toc-numb">16.1.2</span> <span>Padding with zeros</span> </div> </a> <ul id="toc-Padding_with_zeros-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Controlling_sorting_and_display" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Controlling_sorting_and_display"> <div class="vector-toc-text"> <span class="vector-toc-numb">16.2</span> <span>Controlling sorting and display</span> </div> </a> <ul id="toc-Controlling_sorting_and_display-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Sorting_with_increase/decrease/steady_templates" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Sorting_with_increase/decrease/steady_templates"> <div class="vector-toc-text"> <span class="vector-toc-numb">16.3</span> <span>Sorting with increase/decrease/steady templates</span> </div> </a> <ul id="toc-Sorting_with_increase/decrease/steady_templates-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Maintaining_tables_sorted_alphabetically_or_by_rank" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Maintaining_tables_sorted_alphabetically_or_by_rank"> <div class="vector-toc-text"> <span class="vector-toc-numb">17</span> <span>Maintaining tables sorted alphabetically or by rank</span> </div> </a> <button aria-controls="toc-Maintaining_tables_sorted_alphabetically_or_by_rank-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Maintaining tables sorted alphabetically or by rank subsection</span> </button> <ul id="toc-Maintaining_tables_sorted_alphabetically_or_by_rank-sublist" class="vector-toc-list"> <li id="toc-Putting_a_table_in_initial_alphabetical_order" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Putting_a_table_in_initial_alphabetical_order"> <div class="vector-toc-text"> <span class="vector-toc-numb">17.1</span> <span>Putting a table in initial alphabetical order</span> </div> </a> <ul id="toc-Putting_a_table_in_initial_alphabetical_order-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Initial_alphabetical_sort_versus_initial_sort_by_rank_order" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Initial_alphabetical_sort_versus_initial_sort_by_rank_order"> <div class="vector-toc-text"> <span class="vector-toc-numb">17.2</span> <span>Initial alphabetical sort versus initial sort by rank order</span> </div> </a> <ul id="toc-Initial_alphabetical_sort_versus_initial_sort_by_rank_order-sublist" class="vector-toc-list"> <li id="toc-Removing_an_old_rank_column_(1,2,3)_from_a_table" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Removing_an_old_rank_column_(1,2,3)_from_a_table"> <div class="vector-toc-text"> <span class="vector-toc-numb">17.2.1</span> <span>Removing an old rank column (1,2,3) from a table</span> </div> </a> <ul id="toc-Removing_an_old_rank_column_(1,2,3)_from_a_table-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)"> <div class="vector-toc-text"> <span class="vector-toc-numb">17.3</span> <span>Auto-ranking or adding a row numbering column (1,2,3)</span> </div> </a> <ul id="toc-Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Alphabetic_sorting_order" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Alphabetic_sorting_order"> <div class="vector-toc-text"> <span class="vector-toc-numb">18</span> <span>Alphabetic sorting order</span> </div> </a> <ul id="toc-Alphabetic_sorting_order-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Numerical_sorting_order_examples" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Numerical_sorting_order_examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">19</span> <span>Numerical sorting order examples</span> </div> </a> <ul id="toc-Numerical_sorting_order_examples-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">20</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Notes" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Notes"> <div class="vector-toc-text"> <span class="vector-toc-numb">21</span> <span>Notes</span> </div> </a> <ul id="toc-Notes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">22</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Help</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Sortable tables</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 7 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-7" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">7 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D9%85%D8%B3%D8%A7%D8%B9%D8%AF%D8%A9:%D9%81%D8%B1%D8%B2_%D8%A7%D9%84%D8%AC%D8%AF%D8%A7%D9%88%D9%84" title="مساعدة:فرز الجداول – Arabic" lang="ar" hreflang="ar" data-title="مساعدة:فرز الجداول" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Hilfe:Tabellen_f%C3%BCr_Fortgeschrittene" title="Hilfe:Tabellen für Fortgeschrittene – German" lang="de" hreflang="de" data-title="Hilfe:Tabellen für Fortgeschrittene" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-ms mw-list-item"><a href="https://ms.wikipedia.org/wiki/Bantuan:Sorting" title="Bantuan:Sorting – Malay" lang="ms" hreflang="ms" data-title="Bantuan:Sorting" data-language-autonym="Bahasa Melayu" data-language-local-name="Malay" class="interlanguage-link-target"><span>Bahasa Melayu</span></a></li><li class="interlanguage-link interwiki-si mw-list-item"><a href="https://si.wikipedia.org/wiki/%E0%B6%8B%E0%B6%AF%E0%B7%80%E0%B7%94:Sortable_tables" title="උදවු:Sortable tables – Sinhala" lang="si" hreflang="si" data-title="උදවු:Sortable tables" data-language-autonym="සිංහල" data-language-local-name="Sinhala" class="interlanguage-link-target"><span>සිංහල</span></a></li><li class="interlanguage-link interwiki-sl mw-list-item"><a href="https://sl.wikipedia.org/wiki/Pomo%C4%8D:Razvrstljive_tabele" title="Pomoč:Razvrstljive tabele – Slovenian" lang="sl" hreflang="sl" data-title="Pomoč:Razvrstljive tabele" data-language-autonym="Slovenščina" data-language-local-name="Slovenian" class="interlanguage-link-target"><span>Slovenščina</span></a></li><li class="interlanguage-link interwiki-th mw-list-item"><a href="https://th.wikipedia.org/wiki/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89:%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%87%E0%B8%A5%E0%B8%B3%E0%B8%94%E0%B8%B1%E0%B8%9A" title="วิธีใช้:การเรียงลำดับ – Thai" lang="th" hreflang="th" data-title="วิธีใช้:การเรียงลำดับ" data-language-autonym="ไทย" data-language-local-name="Thai" class="interlanguage-link-target"><span>ไทย</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/Help:%E5%8F%AF%E6%8E%92%E5%BA%8F%E8%A1%A8%E6%A0%BC" title="Help:可排序表格 – Chinese" lang="zh" hreflang="zh" data-title="Help:可排序表格" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q8615872#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-help" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Help:Sortable_tables" title="View the help page [c]" accesskey="c"><span>Help page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Help_talk:Sortable_tables" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Help:Sortable_tables"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Help:Sortable_tables&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Help:Sortable_tables&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Help:Sortable_tables"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Help:Sortable_tables&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Help:Sortable_tables&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Help:Sortable_tables" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Help:Sortable_tables" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Help:Sortable_tables&oldid=1248995605" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Help:Sortable_tables&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHelp%3ASortable_tables"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHelp%3ASortable_tables"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Help%3ASortable_tables&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Help:Sortable_tables&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-mediawiki mw-list-item"><a href="https://www.mediawiki.org/wiki/Help:Sortable_tables" hreflang="en"><span>MediaWiki</span></a></li><li class="wb-otherproject-link wb-otherproject-meta mw-list-item"><a href="https://meta.wikimedia.org/wiki/Help:Sorting" hreflang="en"><span>Meta-Wiki</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q8615872" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">Help with sorting of rows in tables</div> <style data-mw-deduplicate="TemplateStyles:r1236090951">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}</style><div role="note" class="hatnote navigation-not-searchable">For other uses, see <a href="/wiki/Help:Sorting" class="mw-disambig" title="Help:Sorting">Help:Sorting</a>.</div> <div style="border:solid 1px; padding-left:7px; padding-right:7px; padding-bottom:7px; padding-top:4px;"> <style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><div class="hlist"> <ul><li><a href="/wiki/Help:Table" title="Help:Table">Help:Table</a> (main page)</li> <li><a href="/wiki/Help:Introduction_to_tables_with_Wiki_Markup/1" title="Help:Introduction to tables with Wiki Markup/1">Introduction</a> <ul><li><a href="/wiki/Help:Introduction_to_tables_with_Wiki_Markup/2" title="Help:Introduction to tables with Wiki Markup/2">2</a></li> <li><a href="/wiki/Help:Introduction_to_tables_with_Wiki_Markup/3" title="Help:Introduction to tables with Wiki Markup/3">3</a></li> <li><a href="/wiki/Help:Introduction_to_tables_with_Wiki_Markup/4" title="Help:Introduction to tables with Wiki Markup/4">4</a></li> <li><a href="/wiki/Help:Introduction_to_tables_with_Wiki_Markup/All" title="Help:Introduction to tables with Wiki Markup/All">All</a></li></ul></li> <li><a href="/wiki/Help:Introduction_to_tables_with_VisualEditor/1" title="Help:Introduction to tables with VisualEditor/1">VisualEditor</a> <ul><li><a href="/wiki/Help:Introduction_to_tables_with_VisualEditor/2" title="Help:Introduction to tables with VisualEditor/2">2</a></li> <li><a href="/wiki/Help:Introduction_to_tables_with_VisualEditor/3" title="Help:Introduction to tables with VisualEditor/3">3</a></li> <li><a href="/wiki/Help:Introduction_to_tables_with_VisualEditor/4" title="Help:Introduction to tables with VisualEditor/4">4</a></li> <li><a href="/wiki/Help:Introduction_to_tables_with_VisualEditor/5" title="Help:Introduction to tables with VisualEditor/5">5</a></li></ul></li> <li><a href="/wiki/Help:Basic_table_markup" title="Help:Basic table markup">Basics</a></li> <li><a href="/wiki/Help:Creating_tables" title="Help:Creating tables">Creation</a></li> <li><a href="/wiki/Help:Tables_and_locations" title="Help:Tables and locations">Locations</a></li> <li><a href="/wiki/Help:Table/Advanced" title="Help:Table/Advanced">Advanced</a> <ul><li><a href="/wiki/Help:Advanced_table_formatting" title="Help:Advanced table formatting">Formatting</a></li> <li><a href="/wiki/Help:Collapsing_tables_and_more" title="Help:Collapsing tables and more">Collapsing</a></li> <li><a class="mw-selflink selflink">Sortable</a></li> <li><a href="/wiki/Help:Conditional_tables" title="Help:Conditional tables">Conditional</a></li></ul></li> <li><a href="/wiki/Category:Wikipedia_tables" title="Category:Wikipedia tables">Category</a> <ul><li><a href="/wiki/Category:Table_templates" title="Category:Table templates">Templates</a></li></ul></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Tables" title="Wikipedia:Manual of Style/Tables">MOS</a> (<a href="/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial" title="Wikipedia:Manual of Style/Accessibility/Data tables tutorial">Accessibility</a>).</li></ul> </div><div class="mw-inputbox-centered" style=""><form name="searchbox" class="searchbox mw-inputbox-form-inline" action="/wiki/Special:Search" id="style-searchbox"><div class="cdx-text-input"><input class="mw-searchInput searchboxInput cdx-text-input__input" name="search" placeholder="" size="18" dir="ltr"/></div><input type="hidden" value="hastemplate:"Table help" intitle:/table/i" name="searchfilter"/> <input type="hidden" name="ns12" value="1" id="mw-inputbox-ns12-style-searchbox0.186741434951" checked=""/> <input type="submit" name="fulltext" value="Search all" class="cdx-button"/><input type="hidden" value="Search" name="fulltext"/></form></div></div> <style data-mw-deduplicate="TemplateStyles:r1238436933">.mw-parser-output .ombox{margin:4px 0;border-collapse:collapse;border:1px solid #a2a9b1;background-color:var(--background-color-neutral-subtle,#f8f9fa);box-sizing:border-box;color:var(--color-base,#202122)}.mw-parser-output .ombox.mbox-small{font-size:88%;line-height:1.25em}.mw-parser-output .ombox-speedy{border:2px solid #b32424;background-color:#fee7e6}.mw-parser-output .ombox-delete{border:2px solid #b32424}.mw-parser-output .ombox-content{border:1px solid #f28500}.mw-parser-output .ombox-style{border:1px solid #fc3}.mw-parser-output .ombox-move{border:1px solid #9932cc}.mw-parser-output .ombox-protection{border:2px solid #a2a9b1}.mw-parser-output .ombox .mbox-text{border:none;padding:0.25em 0.9em;width:100%}.mw-parser-output .ombox .mbox-image{border:none;padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .ombox .mbox-imageright{border:none;padding:2px 0.9em 2px 0;text-align:center}.mw-parser-output .ombox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox .mbox-invalid-type{text-align:center}@media(min-width:720px){.mw-parser-output .ombox{margin:4px 10%}.mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;width:238px}}body.skin--responsive .mw-parser-output table.ombox img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .ombox-speedy{background-color:#310402}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .ombox-speedy{background-color:#310402}}</style><table class="plainlinks ombox ombox-notice" role="presentation"><tbody><tr><td class="mbox-image"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Twemoji_1f527.svg/30px-Twemoji_1f527.svg.png" decoding="async" width="30" height="30" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Twemoji_1f527.svg/45px-Twemoji_1f527.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Twemoji_1f527.svg/60px-Twemoji_1f527.svg.png 2x" data-file-width="512" data-file-height="512"/></span></span></td><td class="mbox-text"><div style="padding-top: 6px; padding-bottom: 5px;"><b>This help page is a <a href="/wiki/Wikipedia:Project_namespace#Wikipedia_how-to_and_information_pages" title="Wikipedia:Project namespace">how-to guide</a>.</b><br/><div style="font-size: 90%;">It explains concepts or processes used by the Wikipedia community. It is not one of <a href="/wiki/Wikipedia:Policies_and_guidelines" title="Wikipedia:Policies and guidelines">Wikipedia's policies or guidelines</a>, and may reflect varying levels of <a href="/wiki/Wikipedia:Consensus" title="Wikipedia:Consensus">consensus</a>.</div></div></td><td class="mbox-imageright"><style data-mw-deduplicate="TemplateStyles:r1252059228">.mw-parser-output .module-shortcutboxplain{float:right;margin:0 0 0 1em;border:1px solid var(--border-color-base,#a2a9b1);background-color:var(--background-color-base,#fff);padding:0.3em 0.6em 0.2em 0.6em;text-align:center;font-size:85%}.mw-parser-output .module-shortcutboxleft{float:left;margin:0 1em 0 0}.mw-parser-output .module-shortcutlist{display:inline-block;border-bottom:1px solid var(--border-color-base,#a2a9b1);margin-bottom:0.2em}.mw-parser-output .module-shortcutboxplain ul{font-weight:bold}.mw-parser-output .module-shortcutanchordiv{position:relative;top:-3em}.mw-parser-output li .module-shortcutanchordiv{float:right}.mw-parser-output .mbox-imageright .module-shortcutboxplain{padding:0.4em 1em 0.4em 1em;line-height:1.3;margin:0}</style><div class="module-shortcutanchordiv"><span id="WP:TABLESORT"></span><span id="WP:SORT"></span></div><div class="module-shortcutboxplain noprint" role="note"><div class="module-shortcutlist"><a href="/wiki/Wikipedia:Shortcut" title="Wikipedia:Shortcut">Shortcuts</a></div><style data-mw-deduplicate="TemplateStyles:r1126788409">.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}</style><div class="plainlist"><ul><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:TABLESORT&redirect=no">WP:TABLESORT</a></span></li><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:SORT&redirect=no">WP:SORT</a></span></li></ul></div></div></td></tr></tbody></table> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1126788409"><style data-mw-deduplicate="TemplateStyles:r1246091330">.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}</style><style data-mw-deduplicate="TemplateStyles:r1232484023">.mw-parser-output .help-box{background:#f5faff;line-height:1.6em}.mw-parser-output .help-box .sidebar-title{background:#cee0f2;font-size:130%;padding-left:0.4em;padding-right:0.4em;margin-bottom:6px}.mw-parser-output .help-box .sidebar-heading{background:#cee0f2;padding:0.1em 0.7em 0.15em}.mw-parser-output .help-box .sidebar-content,.mw-parser-output .help-box .sidebar-content-with-subgroup{padding-top:0.15em}@media all and (min-width:720px){.mw-parser-output .help-box{width:auto;max-width:22em}}html.skin-theme-clientpref-night .mw-parser-output .help-box{background:#0d1a27}html.skin-theme-clientpref-night .mw-parser-output .help-box .sidebar-title,html.skin-theme-clientpref-night .mw-parser-output .help-box .sidebar-heading{background:#082849}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .help-box{background-color:#0d1a27}html.skin-theme-clientpref-os .mw-parser-output .help-box .sidebar-title,html.skin-theme-clientpref-os .mw-parser-output .help-box .sidebar-heading{background:#082849}}</style><table class="sidebar nomobile nowraplinks help-box noprint plainlist"><tbody><tr><th class="sidebar-title"><a href="/wiki/Help:Wikitext" title="Help:Wikitext">Wikitext</a></th></tr><tr><td class="sidebar-content"> <ul><li><a href="/wiki/Help:Cheatsheet" title="Help:Cheatsheet">Cheatsheet</a></li> <li><a href="/wiki/Help:Wikitext" title="Help:Wikitext">All wikitext</a></li> <li><a href="/wiki/Help:Sound_file_markup" title="Help:Sound file markup">Sound files</a></li> <li><a href="/wiki/Help:Visual_file_markup" title="Help:Visual file markup">Visual files</a></li> <li><a href="/wiki/Help:Table" title="Help:Table">Tables</a></li> <li><a href="/wiki/Help:Template" title="Help:Template">Templates</a> <a href="/wiki/Help:A_quick_guide_to_templates" title="Help:A quick guide to templates">(quick guide)</a></li> <li><a href="/wiki/Help:HTML_in_wikitext" title="Help:HTML in wikitext">Using HTML codes within wikitext</a></li> <li><a href="/wiki/Help:Pipe_trick" title="Help:Pipe trick">Pipe trick</a></li></ul></td> </tr><tr><td class="sidebar-navbar"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Wikitext_navbox" title="Template:Wikitext navbox"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Wikitext_navbox" title="Template talk:Wikitext navbox"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Wikitext_navbox" title="Special:EditPage/Template:Wikitext navbox"><abbr title="Edit this template">e</abbr></a></li></ul></div></td></tr></tbody></table> <style data-mw-deduplicate="TemplateStyles:r886046785">.mw-parser-output .toclimit-2 .toclevel-1 ul,.mw-parser-output .toclimit-3 .toclevel-2 ul,.mw-parser-output .toclimit-4 .toclevel-3 ul,.mw-parser-output .toclimit-5 .toclevel-4 ul,.mw-parser-output .toclimit-6 .toclevel-5 ul,.mw-parser-output .toclimit-7 .toclevel-6 ul{display:none}</style><div class="toclimit-3"><meta property="mw:PageProp/toc"/></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Creating_sortable_tables" data-mw-thread-id="h-Creating_sortable_tables"><span data-mw-comment-start="" id="h-Creating_sortable_tables"></span>Creating sortable tables<span data-mw-comment-end="h-Creating_sortable_tables"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=1" title="Edit section: Creating sortable tables"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Wikipedia_VisualEditor_Table_Properties.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Wikipedia_VisualEditor_Table_Properties.png/220px-Wikipedia_VisualEditor_Table_Properties.png" decoding="async" width="220" height="115" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Wikipedia_VisualEditor_Table_Properties.png/330px-Wikipedia_VisualEditor_Table_Properties.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Wikipedia_VisualEditor_Table_Properties.png/440px-Wikipedia_VisualEditor_Table_Properties.png 2x" data-file-width="1130" data-file-height="590"/></a><figcaption>The properties panel of a table in VisualEditor allows you to mark a table as sortable.</figcaption></figure> <p>Tables can be made sortable via <a href="/wiki/Client-side_JavaScript" class="mw-redirect" title="Client-side JavaScript">client-side JavaScript</a> by adding <code>class="wikitable sortable"</code> to their top line. These tables need to be properly formatted, with the correct number of cells. Additionally, you need to make sure that the headers of your column are properly indicated in the <a href="/wiki/Help:Wiki_markup" class="mw-redirect" title="Help:Wiki markup">wikitext</a>. For this, the <code>!</code> character is used in the table syntax. </p><p>If you are using the <a href="/wiki/Wikipedia:VisualEditor" title="Wikipedia:VisualEditor">Visual Editor</a>, you can open the properties dialog of a table and select the sortable option. </p> <div class="mw-heading mw-heading3"><h3 id="Simple_example" data-mw-thread-id="h-Simple_example-Creating_sortable_tables"><span data-mw-comment-start="" id="h-Simple_example-Creating_sortable_tables"></span>Simple example<span data-mw-comment-end="h-Simple_example-Creating_sortable_tables"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=2" title="Edit section: Simple example"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This is the wikitext of the table <a class="mw-selflink-fragment" href="#Example">shown</a> in the first section and shows the typical way to enable table sorting: </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> name</span> <span class="p">!</span><span class="gu"> data</span> <span class="p">!</span><span class="gu"> more data</span> <span class="p">|-</span> <span class="p">|</span> cats <span class="p">|</span> 273 <span class="p">|</span> 53 <span class="p">|-</span> <span class="p">|</span> dogs <span class="p">|</span> 65 <span class="p">|</span> 8,492 <span class="p">|-</span> <span class="p">|</span> mice <span class="p">|</span> 1,649 <span class="p">|</span> 548 <span class="p">|}</span> </pre></div> <p>The <code>!</code> indicates cells that are header cells. In order for a table to be sortable, the first row(s) of a table need to be entirely made up out of these header cells. You can learn more about the basic table syntax by taking the <a href="/wiki/Help:Table/Introduction_to_tables" class="mw-redirect" title="Help:Table/Introduction to tables">Introduction to tables</a> for source editing. </p> <div class="mw-heading mw-heading3"><h3 id="Initial_sort_order_of_rows" data-mw-thread-id="h-Initial_sort_order_of_rows-Creating_sortable_tables"><span data-mw-comment-start="" id="h-Initial_sort_order_of_rows-Creating_sortable_tables"></span>Initial sort order of rows<span data-mw-comment-end="h-Initial_sort_order_of_rows-Creating_sortable_tables"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=3" title="Edit section: Initial sort order of rows"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>When users are first presented with a table, the rows will always appear in the same order as in the wikitext. If you want a table to appear sorted by a certain column, you must sort the wikitext itself in that order. This is usually done for the first column. The VisualEditor makes it easy to move individual table columns and rows around. For info about that, and also about putting a table in initial alphabetical order see <a href="#initial_alphabetical_order">§ Initial alphabetical order</a>. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Using_sortable_tables" data-mw-thread-id="h-Using_sortable_tables"><span data-mw-comment-start="" id="h-Using_sortable_tables"></span>Using sortable tables<span data-mw-comment-end="h-Using_sortable_tables"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=4" title="Edit section: Using sortable tables"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>When browsing Wikipedia you may encounter <a href="/wiki/Help:Table" title="Help:Table">tables</a> that have been made <i><a href="/wiki/Help:Table#Sorting" title="Help:Table">sortable</a></i>. A sortable table is a type of table used to allow readers to sort its data by clicking on the header cells of columns. It is identifiable by the arrows in one or more of its header cells. Typically, readers can sort data in ascending or descending order based on the values in the selected column. The first click on the header cell will sort the column’s data in ascending order, a second click of the same arrow descending order, and a third click will restore the original order of the entire table. For example; a third click causes <a href="/wiki/List_of_countries_by_intentional_homicide_rate" title="List of countries by intentional homicide rate">List of countries by intentional homicide rate</a> to reset to its original order by subregion. </p><p>Sortable tables are particularly useful for organizing and navigating large sets of data. For example, you might have a table displaying names, dates, or numerical data. By making the table sortable, you allow readers to click on the column header to sort by, for example, alphabetical order (A–Z or Z–A) for names, chronological order for dates, or numerical order for numbers (low to high or high to low). </p><p>The actual sorting process will happen on the computer-side using <a href="/wiki/Client-side_JavaScript" class="mw-redirect" title="Client-side JavaScript">client-side JavaScript</a>. For this reason, it is <i>only</i> possible to use this functionality if you have JavaScript enabled in your web browser. The sorting process is also dependent on your computer and the amount of data. Sorting a very large table on a low-performance computer may take a long time. </p> <div class="mw-heading mw-heading3"><h3 id="Example" data-mw-thread-id="h-Example-Using_sortable_tables"><span data-mw-comment-start="" id="h-Example-Using_sortable_tables"></span>Example<span data-mw-comment-end="h-Example-Using_sortable_tables"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=5" title="Edit section: Example"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This is an example of a small sortable table: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th>name </th> <th>data </th> <th>more data </th></tr> <tr> <td>cats </td> <td>273 </td> <td>53 </td></tr> <tr> <td>dogs </td> <td>65 </td> <td>8,492 </td></tr> <tr> <td>mice </td> <td>1,649 </td> <td>548 </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> name</span> <span class="p">!</span><span class="gu"> data</span> <span class="p">!</span><span class="gu"> more data</span> <span class="p">|-</span> <span class="p">|</span> cats <span class="p">|</span> 273 <span class="p">|</span> 53 <span class="p">|-</span> <span class="p">|</span> dogs <span class="p">|</span> 65 <span class="p">|</span> 8,492 <span class="p">|-</span> <span class="p">|</span> mice <span class="p">|</span> 1,649 <span class="p">|</span> 548 <span class="p">|}</span> </pre></div></div> <div class="mw-heading mw-heading3"><h3 id="Tables_with_complex_headers" data-mw-thread-id="h-Tables_with_complex_headers-Using_sortable_tables"><span data-mw-comment-start="" id="h-Tables_with_complex_headers-Using_sortable_tables"></span>Tables with complex headers<span data-mw-comment-end="h-Tables_with_complex_headers-Using_sortable_tables"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=6" title="Edit section: Tables with complex headers"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Tables with more complex headers than before now sort correctly. For example: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th rowspan="2">name </th> <th colspan="2">data columns </th></tr> <tr> <th>data </th> <th>more data </th></tr> <tr> <td>cats </td> <td>273 </td> <td>53 </td></tr> <tr> <td>dogs </td> <td>65 </td> <td>8,492 </td></tr> <tr> <td>mice </td> <td>1,649 </td> <td>548 </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s">2</span><span class="w"> </span><span class="p">|</span><span class="gu"> name</span> </span><span class="hll"><span class="p">!</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s">2</span><span class="w"> </span><span class="p">|</span><span class="gu"> data columns</span> </span><span class="p">|-</span> <span class="p">!</span><span class="gu"> data</span> <span class="p">!</span><span class="gu"> more data</span> <span class="p">|-</span> <span class="p">|</span> cats <span class="p">|</span> 273 <span class="p">|</span> 53 <span class="p">|-</span> <span class="p">|</span> dogs <span class="p">|</span> 65 <span class="p">|</span> 8,492 <span class="p">|-</span> <span class="p">|</span> mice <span class="p">|</span> 1,649 <span class="p">|</span> 548 <span class="p">|}</span> </pre></div></div> <p>Using two or more header rows, the sort arrows are placed on the bottom or lowest header row by default. They can be placed a maximum of one row higher than the lowest header row by setting <code>class="sorttop"</code> at the top of the bottom header row. For example: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <table> <tbody><tr> <td><b>Default</b> <table class="wikitable sortable"> <tbody><tr> <th>column 1 </th> <th>column 2 </th></tr> <tr> <th style="text-align:left;">3 </th> <th style="text-align:left;">7 </th></tr> <tr> <td>1 </td> <td>3 </td></tr> <tr> <td>2 </td> <td>4 </td></tr></tbody></table> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> column 1</span> <span class="p">!</span><span class="gu"> column 2</span> <span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s2">"text-align:left;"</span><span class="w"> </span><span class="p">|</span><span class="gu"> 3</span> </span><span class="hll"><span class="p">!</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s2">"text-align:left;"</span><span class="w"> </span><span class="p">|</span><span class="gu"> 7</span> </span><span class="p">|-</span> <span class="p">|</span> 1 <span class="p">|</span> 3 <span class="p">|-</span> <span class="p">|</span> 2 <span class="p">|</span> 4 <span class="p">|}</span> </pre></div> </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <table> <tbody><tr> <td><b>Using <code>class="sorttop"</code></b> <table class="wikitable sortable"> <tbody><tr> <th>column 1 </th> <th>column 2 </th></tr> <tr class="sorttop"> <th style="text-align:left;">3 </th> <th style="text-align:left;">7 </th></tr> <tr> <td>1 </td> <td>3 </td></tr> <tr> <td>2 </td> <td>4 </td></tr></tbody></table> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> column 1</span> <span class="p">!</span><span class="gu"> column 2</span> <span class="hll"><span class="p">|-</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"sorttop"</span> </span><span class="hll"><span class="p">!</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s2">"text-align:left;"</span><span class="w"> </span><span class="p">|</span><span class="gu"> 3</span> </span><span class="hll"><span class="p">!</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s2">"text-align:left;"</span><span class="w"> </span><span class="p">|</span><span class="gu"> 7</span> </span><span class="p">|-</span> <span class="p">|</span> 1 <span class="p">|</span> 3 <span class="p">|-</span> <span class="p">|</span> 2 <span class="p">|</span> 4 <span class="p">|}</span> </pre></div> </td></tr></tbody></table> </div> <div class="mw-heading mw-heading3"><h3 id="Tables_with_merged_data_rows" data-mw-thread-id="h-Tables_with_merged_data_rows-Using_sortable_tables"><span data-mw-comment-start="" id="h-Tables_with_merged_data_rows-Using_sortable_tables"></span>Tables with merged data rows<span data-mw-comment-end="h-Tables_with_merged_data_rows-Using_sortable_tables"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=7" title="Edit section: Tables with merged data rows"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><span class="anchor" id="Tables_with_complex_data_rows"></span> </p> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Further information: <a href="/wiki/Help:Tables#Colspan_and_rowspan" class="mw-redirect" title="Help:Tables">Help:Tables § Colspan and rowspan</a>, and <a href="/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial#Complex_tables" title="Wikipedia:Manual of Style/Accessibility/Data tables tutorial">Wikipedia:Manual of Style/Accessibility/Data tables tutorial § Complex tables</a></div> <dl><dd></dd></dl> <p>It is possible to create tables with cells that stretch over two or more columns or rows (also known as merged cells). For columns, one uses <code>|colspan=<var>n</var> | <var>content</var></code>, whereas for rows, one uses <code>|rowspan=<var>m</var> | <var>content</var></code>. In the table code, one must <i>leave out the cells that are covered by such a span</i>. The resulting column- and row-counting must fit. Tables can have cells spanning multiple rows, using <code>|rowspan=<i>n</i></code>. </p><p>The number of rows must be indicated with each use of rowspan. Before any sorting can be done, the rowspan setup must be correct. The wikitext must be correct. An incorrect rowspan organization can break sorting, cause weird table formatting, move data to the wrong column, etc. </p><p>See examples below. </p><p>When sorted all the rows are filled. Tables without rowspan are much easier to maintain by less experienced editors, and by editors who are stopping by only once to edit the table. </p><p>Correct rowspan numbers and wikitext, with sorting in working order: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th>name </th> <th>data </th> <th>year </th></tr> <tr> <td>cats </td> <td>273 </td> <td>2013 </td></tr> <tr> <td>dogs </td> <td>65 </td> <td rowspan="2">2014 </td></tr> <tr> <td>mice </td> <td>1,649 </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr mw-highlight-lines" dir="ltr"><pre><span></span><span class="linenos" data-line="1"></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="linenos" data-line="2"></span><span class="p">|-</span> <span class="linenos" data-line="3"></span><span class="p">!</span><span class="gu"> name</span> <span class="linenos" data-line="4"></span><span class="p">!</span><span class="gu"> data</span> <span class="linenos" data-line="5"></span><span class="p">!</span><span class="gu"> year</span> <span class="linenos" data-line="6"></span><span class="p">|-</span> <span class="linenos" data-line="7"></span><span class="p">|</span> cats <span class="linenos" data-line="8"></span><span class="p">|</span> 273 <span class="linenos" data-line="9"></span><span class="p">|</span> 2013 <span class="linenos" data-line="10"></span><span class="p">|-</span> <span class="linenos" data-line="11"></span><span class="p">|</span> dogs <span class="linenos" data-line="12"></span><span class="p">|</span> 65 <span class="hll"><span class="linenos" data-line="13"></span><span class="p">|</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s">2</span><span class="w"> </span><span class="p">|</span> 2014 </span><span class="linenos" data-line="14"></span><span class="p">|-</span> <span class="linenos" data-line="15"></span><span class="p">|</span> mice <span class="linenos" data-line="16"></span><span class="p">|</span> 1,649 <span class="hll"><span class="linenos" data-line="17"></span><span class="cm"></span> </span><span class="linenos" data-line="18"></span><span class="p">|}</span> </pre></div></div> <p>Note that, after sorting, the rowspanning cells are cut into rows and their content is repeated (the year "2014" in the example). If the original order of a table is restored by clicking a third time on the same arrow, then the cells will remain repeated and not revert to the original rowspan. </p><p>See example below. The wikitext is incorrect. Line 17 should not exist. Compare to correct table above. Result in this case is an added empty column. </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th>name </th> <th>data </th> <th>year </th></tr> <tr> <td>cats </td> <td>273 </td> <td>2013 </td></tr> <tr> <td>dogs </td> <td>65 </td> <td rowspan="2">2014 </td></tr> <tr> <td>mice </td> <td>1,649 </td> <td> </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr mw-highlight-lines" dir="ltr"><pre><span></span><span class="linenos" data-line="1"></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="linenos" data-line="2"></span><span class="p">|-</span> <span class="linenos" data-line="3"></span><span class="p">!</span><span class="gu"> name</span> <span class="linenos" data-line="4"></span><span class="p">!</span><span class="gu"> data</span> <span class="linenos" data-line="5"></span><span class="p">!</span><span class="gu"> year</span> <span class="linenos" data-line="6"></span><span class="p">|-</span> <span class="linenos" data-line="7"></span><span class="p">|</span> cats <span class="linenos" data-line="8"></span><span class="p">|</span> 273 <span class="linenos" data-line="9"></span><span class="p">|</span> 2013 <span class="linenos" data-line="10"></span><span class="p">|-</span> <span class="linenos" data-line="11"></span><span class="p">|</span> dogs <span class="linenos" data-line="12"></span><span class="p">|</span> 65 <span class="linenos" data-line="13"></span><span class="p">|</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s">2</span><span class="w"> </span><span class="p">|</span> 2014 <span class="linenos" data-line="14"></span><span class="p">|-</span> <span class="linenos" data-line="15"></span><span class="p">|</span> mice <span class="linenos" data-line="16"></span><span class="p">|</span> 1,649 <span class="hll"><span class="linenos" data-line="17"></span><span class="p">|</span> </span><span class="linenos" data-line="18"></span><span class="p">|}</span> </pre></div></div> <div class="mw-heading mw-heading4"><h4 id="Online_table_editors_and_rowspan" data-mw-thread-id="h-Online_table_editors_and_rowspan-Tables_with_merged_data_rows"><span data-mw-comment-start="" id="h-Online_table_editors_and_rowspan-Tables_with_merged_data_rows"></span>Online table editors and rowspan<span data-mw-comment-end="h-Online_table_editors_and_rowspan-Tables_with_merged_data_rows"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=8" title="Edit section: Online table editors and rowspan"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There is an easy online wiki table editor here: </p> <ul><li><a rel="nofollow" class="external text" href="http://wikitable.eu5.org">wikitable.eu5.org</a></li></ul> <p>It makes it easy to edit the text and links in individual cells of a table. It is especially easy when there are no rowspans in the body of a table. See the <a class="mw-selflink-fragment" href="#Previous_section">previous section</a>. Without rowspans it is easier to change the underlying framework of a table, and move stuff around. Once the wikitext framework is simpler, the online table editor is simpler too, because you do not have to edit the wikitext as much in order to edit the table. </p> <div class="mw-heading mw-heading3"><h3 id="Secondary_key_and_multi-key_sorting" data-mw-thread-id="h-Secondary_key_and_multi-key_sorting-Using_sortable_tables"><span data-mw-comment-start="" id="h-Secondary_key_and_multi-key_sorting-Using_sortable_tables"></span>Secondary key and multi-key sorting<span data-mw-comment-end="h-Secondary_key_and_multi-key_sorting-Using_sortable_tables"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=9" title="Edit section: Secondary key and multi-key sorting"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>When a column contains repeated values, sorting the column should maintain the original order of rows within each subset that shares the same value. This is known as <a href="/wiki/Stable_sorting" class="mw-redirect" title="Stable sorting"><i>stable sorting</i></a>. As a result, multi-key sorting (sorting by primary, secondary, tertiary keys, etc.) can be achieved by sorting the least significant key first and the most significant key last. For example, to sort the table by the "Text" column and then by the "Numbers" column, you would first click on and sort by the "Numbers" column, the <i>secondary key</i>, and then click on and sort by the "Text" column, <i>primary key</i>. </p><p>Another method for multi-key sorting is to hold down the <style data-mw-deduplicate="TemplateStyles:r1249182868">.mw-parser-output .keyboard-key{border:1px solid #aaa;border-radius:0.2em;box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.1);background-color:var(--background-color-neutral-subtle,#f8f9fa);background-image:linear-gradient(to bottom,var(--background-color-neutral,#eaecf0),var(--background-color-neutral-subtle,#f8f9fa),var(--background-color-neutral,#eaecf0));color:var(--color-base,#202122);padding:0.1em 0.3em;font-family:inherit;font-size:0.85em}</style><kbd class="keyboard-key nowrap">⇧ Shift</kbd> key while clicking on column headings. For instance, to sort by the "Text" column followed by the “Numbers" column, you would first click on the “Text” column heading (primary key), then hold down the <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1249182868"><kbd class="keyboard-key nowrap">⇧ Shift</kbd> key and click on the “Numbers" column heading (secondary key). </p><p>There can be a problem with sorting if the <a href="/wiki/User:Endo999/GoogleTrans" title="User:Endo999/GoogleTrans">Google translation gadget</a> (see <a href="/wiki/User_talk:Endo999/GoogleTrans#Interference_with_secondary_sorting_in_tables" title="User talk:Endo999/GoogleTrans">discussion</a>) is enabled in <span class="example" style="font-family: Georgia, serif;"><a href="/wiki/Special:Preferences" title="Special:Preferences">Preferences</a> → <a href="/wiki/Special:Preferences#mw-prefsection-gadgets" title="Special:Preferences">Gadgets</a> → <span class="nowrap"><span typeof="mw:File"><a href="/wiki/File:MediaWiki_checkbox_empty.svg" class="mw-file-description"><img alt="Empty" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c2/MediaWiki_checkbox_empty.svg/20px-MediaWiki_checkbox_empty.svg.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c2/MediaWiki_checkbox_empty.svg/30px-MediaWiki_checkbox_empty.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c2/MediaWiki_checkbox_empty.svg/40px-MediaWiki_checkbox_empty.svg.png 2x" data-file-width="25" data-file-height="25"/></a></span> <span class="wrap">GoogleTrans</span></span></span>. It may seem like shift-click secondary sorting is not working because of the delay due to the translation popup for the name in the column head. The gadget can be turned on and off quickly, once enabled in preferences, from the "Tools" menu at the upper right of any page. There are many browser translation addons (such as Simple Translate for <a rel="nofollow" class="external text" href="https://addons.mozilla.org/en-US/firefox/addon/simple-translate">Firefox</a>, <a rel="nofollow" class="external text" href="https://microsoftedge.microsoft.com/addons/detail/simple-translate/cllnohpbfenopiakdcjmjcbaeapmkcdl">Chrome</a>, and <a rel="nofollow" class="external text" href="https://chrome.google.com/webstore/detail/simple-translate/ibplnjkanclpjokhdolnendpplpjiace">Edge</a>) that work as well or better than the gadget. </p> <table class="wikitable sortable"> <tbody><tr> <th>Numbers</th> <th>Text</th> <th>More text </th></tr> <tr> <td>4</td> <td>a</td> <td>row 1 </td></tr> <tr> <td>5</td> <td>a</td> <td>row 2 </td></tr> <tr> <td>1</td> <td>b</td> <td>row 3 </td></tr> <tr> <td>1</td> <td>a</td> <td>row 4 </td></tr> <tr> <td>2</td> <td>x</td> <td>row 5 </td></tr> <tr> <td>2</td> <td>a</td> <td>row 6 </td></tr> <tr> <td>3</td> <td>a</td> <td>row 7 </td></tr> <tr> <td>3</td> <td>z</td> <td>row 8 </td></tr> <tr> <td>3</td> <td>z</td> <td>row 9 </td></tr> <tr> <td>3</td> <td>z</td> <td>row 10 </td></tr> <tr> <td>3</td> <td>z</td> <td>row 11 </td></tr> <tr> <td>25</td> <td>z</td> <td>row 12 </td></tr> <tr class="sortbottom"> <th>Bottom</th> <th></th> <th> </th></tr> </tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Optimising_tables_for_a_narrow_display" data-mw-thread-id="h-Optimising_tables_for_a_narrow_display"><span data-mw-comment-start="" id="h-Optimising_tables_for_a_narrow_display"></span>Optimising tables for a narrow display<span data-mw-comment-end="h-Optimising_tables_for_a_narrow_display"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=10" title="Edit section: Optimising tables for a narrow display"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="Vertical_headers" data-mw-thread-id="h-Vertical_headers-Optimising_tables_for_a_narrow_display"><span data-mw-comment-start="" id="h-Vertical_headers-Optimising_tables_for_a_narrow_display"></span>Vertical headers<span data-mw-comment-end="h-Vertical_headers-Optimising_tables_for_a_narrow_display"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=11" title="Edit section: Vertical headers"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Further information: <a href="/wiki/Template:Vert_header" class="mw-redirect" title="Template:Vert header">Template:Vert header</a></div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th class="nowrap ts-vertical-header" style=""><div style=""><style data-mw-deduplicate="TemplateStyles:r1221560606">@supports(writing-mode:vertical-rl){.mw-parser-output .ts-vertical-header{line-height:1;max-width:1em;padding:0.4em;vertical-align:bottom;width:1em}html.client-js .mw-parser-output .sortable:not(.jquery-tablesorter) .ts-vertical-header:not(.unsortable),html.client-js .mw-parser-output .ts-vertical-header.headerSort{background-position:50%.4em;padding-right:0.4em;padding-top:21px}.mw-parser-output .ts-vertical-header.is-valign-top{vertical-align:top}.mw-parser-output .ts-vertical-header.is-valign-middle{vertical-align:middle}.mw-parser-output .ts-vertical-header.is-normal{font-weight:normal}.mw-parser-output .ts-vertical-header>*{display:inline-block;transform:rotate(180deg);writing-mode:vertical-rl}@supports(writing-mode:sideways-lr){.mw-parser-output .ts-vertical-header>*{transform:none;writing-mode:sideways-lr}}}</style>name</div> </th> <th class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">data</div> </th> <th class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">more data</div> </th> <th class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">another column</div> </th></tr> <tr> <td>cats </td> <td>273 </td> <td>53 </td> <td>1 </td></tr> <tr> <td>dogs </td> <td>65 </td> <td>8,492 </td> <td>2 </td></tr> <tr> <td>mice </td> <td>1,649 </td> <td>548 </td> <td>3 </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="gu"> {{vert header|stp=1|name}}</span> </span><span class="hll"><span class="p">!</span><span class="gu"> {{vert header|stp=1|data}}</span> </span><span class="hll"><span class="p">!</span><span class="gu"> {{vert header|stp=1|more data}}</span> </span><span class="hll"><span class="p">!</span><span class="gu"> {{vert header|stp=1|another column}}</span> </span><span class="p">|-</span> <span class="p">|</span> cats <span class="p">|</span> 273 <span class="p">|</span> 53 <span class="p">|</span> 1 <span class="p">|-</span> <span class="p">|</span> dogs <span class="p">|</span> 65 <span class="p">|</span> 8,492 <span class="p">|</span> 2 <span class="p">|-</span> <span class="p">|</span> mice <span class="p">|</span> 1,649 <span class="p">|</span> 548 <span class="p">|</span> 3 <span class="p">|}</span> </pre></div></div> <p><span class="nowrap">{{</span><a href="/wiki/Template:Vertical_header" title="Template:Vertical header">vertical header</a><span class="nowrap">}}</span> also works with headers that span rows or columns (using <code>rowspan</code> and col<code>span</code>). <b>Note</b> that there is no vertical bar <code>|</code> between <code>rowspan=2</code> and <code>{{vertical header}}</code> </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th rowspan="2" class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">name</div> </th> <th colspan="2" class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">data columns</div> </th> <th rowspan="2" class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">another column</div> </th></tr> <tr> <th class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">data</div> </th> <th class="nowrap ts-vertical-header" style=""><div style=""><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1221560606">more data</div> </th></tr> <tr> <td>cats </td> <td>273 </td> <td>53 </td> <td>1 </td></tr> <tr> <td>dogs </td> <td>65 </td> <td>8,492 </td> <td>2 </td></tr> <tr> <td>mice </td> <td>1,649 </td> <td>548 </td> <td>3 </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="gu"> rowspan=2 {{vert header|stp=1|name}}</span> </span><span class="hll"><span class="p">!</span><span class="gu"> colspan=2 {{vert header|data columns}}</span> </span><span class="hll"><span class="p">!</span><span class="gu"> rowspan=2 {{vert header|stp=1|another column}}</span> </span><span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="gu"> {{vert header|stp=1|data}}</span> </span><span class="hll"><span class="p">!</span><span class="gu"> {{vert header|stp=1|more data}}</span> </span><span class="p">|-</span> <span class="p">|</span> cats <span class="p">|</span> 273 <span class="p">|</span> 53 <span class="p">|</span> 1 <span class="p">|-</span> <span class="p">|</span> dogs <span class="p">|</span> 65 <span class="p">|</span> 8,492 <span class="p">|</span> 2 <span class="p">|-</span> <span class="p">|</span> mice <span class="p">|</span> 1,649 <span class="p">|</span> 548 <span class="p">|</span> 3 <span class="p">|}</span> </pre></div> </div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Sort_under_template" data-mw-thread-id="h-Sort_under_template"><span data-mw-comment-start="" id="h-Sort_under_template"></span>Sort under template<span data-mw-comment-end="h-Sort_under_template"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=12" title="Edit section: Sort under template"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1227084136">.mw-parser-output .tracked{float:right;clear:right;margin:0 0 1em 1em;width:12em;border:1px solid #72777d;border-radius:2px;background-color:var(--background-color-interactive,#EAECF0);color:var(--color-base,#202122);font-size:85%;text-align:center;padding:0.5em}.mw-parser-output .tracked-url{font-weight:bold}.mw-parser-output .tracked-closure{color:black;font-weight:bold;text-transform:uppercase}.mw-parser-output .tracked-resolved{color:green}</style><div role="note" class="tracked plainlinks mw-trackedTemplate">Tracked in <a href="https://phabricator.wikimedia.org/" class="extiw" title="phabricator:">Phabricator</a><br/><span class="tracked-url"><a href="https://phabricator.wikimedia.org/T35249" class="extiw" title="phabricator:T35249"><span class="trakfab-T35249"> Task T35249</span></a></span><br/></div> <p><span class="nowrap">{{</span><a href="/wiki/Template:Sort_under" title="Template:Sort under">sort under</a><span class="nowrap">}}</span> can be used to make the sorting arrows appear underneath the header text, which may be desirable to narrow the width of a column. </p> <style data-mw-deduplicate="TemplateStyles:r1245584064">@media screen{html.client-js .mw-parser-output .sort-under.sortable.wikitable th.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable.wikitable th.headerSort,html.client-js .mw-parser-output .sort-under-center.sortable.wikitable th.headerSort{padding-right:0.4em}html.client-js .mw-parser-output .sort-under.sortable:not(.wikitable) th.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable:not(.wikitable) th.headerSort,html.client-js .mw-parser-output .sort-under-center.sortable:not(.wikitable) th.headerSort{padding-right:1px}html.client-js body.skin-minerva .mw-parser-output .sort-under.sortable.wikitable th.headerSort,html.client-js body.skin-minerva .mw-parser-output .sort-under-right.sortable.wikitable th.headerSort,html.client-js body.skin-minerva .mw-parser-output .sort-under-center.sortable.wikitable th.headerSort{padding-right:0.2em}html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable.wikitable th.headerSort{padding-right:0.5em}html.client-js .mw-parser-output .sort-under-center.sortable th.headerSort{background-position:center bottom 0.2em}html.client-js .mw-parser-output .sort-under.sortable th.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable th.headerSort{background-position:right bottom 0.2em}html.client-js .mw-parser-output .sort-under.sortable th.headerSort,html.client-js .mw-parser-output .sort-under.sortable th.unsortable,html.client-js .mw-parser-output .sort-under-right.sortable th.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable th.unsortable,html.client-js .mw-parser-output .sort-under-center.sortable th.headerSort,html.client-js .mw-parser-output .sort-under-center.sortable th.unsortable{padding-bottom:1em}html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable.wikitable th.unsortable,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable.wikitable th.unsortable,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable.wikitable th.unsortable{padding-bottom:1.2em}html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable:not(.wikitable) th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable:not(.wikitable) th.unsortable,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable:not(.wikitable) th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable:not(.wikitable) th.unsortable,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable:not(.wikitable) th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable:not(.wikitable) th.unsortable,html.client-js body.skin-minerva .mw-parser-output .sort-under.sortable:not(.wikitable) th.headerSort,html.client-js body.skin-minerva .mw-parser-output .sort-under.sortable:not(.wikitable) th.unsortable,html.client-js body.skin-minerva .mw-parser-output .sort-under-right.sortable:not(.wikitable) th.headerSort,html.client-js body.skin-minerva .mw-parser-output .sort-under-right.sortable:not(.wikitable) th.unsortable,html.client-js body.skin-minerva .mw-parser-output .sort-under-center.sortable:not(.wikitable) th.headerSort,html.client-js body.skin-minerva .mw-parser-output .sort-under-center.sortable:not(.wikitable) th.unsortable{padding-bottom:0.8em}html.client-js .mw-parser-output .static-row-numbers.sort-under.sortable thead tr:only-child::before,html.client-js .mw-parser-output .static-row-numbers.sort-under-right.sortable thead tr:only-child::before,html.client-js .mw-parser-output .static-row-numbers.sort-under-center.sortable thead tr:only-child::before{padding-bottom:0.9em}html.client-js body.skin-timeless .mw-parser-output .static-row-numbers.sort-under.sortable thead tr:only-child::before,html.client-js body.skin-timeless .mw-parser-output .static-row-numbers.sort-under-right.sortable thead tr:only-child::before,html.client-js body.skin-timeless .mw-parser-output .static-row-numbers.sort-under-center.sortable thead tr:only-child::before,html.client-js body.skin-minerva .mw-parser-output .static-row-numbers.sort-under.sortable thead tr:only-child::before,html.client-js body.skin-minerva .mw-parser-output .static-row-numbers.sort-under-right.sortable thead tr:only-child::before,html.client-js body.skin-minerva .mw-parser-output .static-row-numbers.sort-under-center.sortable thead tr:only-child::before{padding-bottom:0.8em}html.client-js .mw-parser-output .sort-under.sortable.wikitable th.ts-vertical-header.headerSort,html.client-js .mw-parser-output .sort-under.sortable.wikitable th.ts-vertical-header.unsortable,html.client-js .mw-parser-output .sort-under-right.sortable.wikitable th.ts-vertical-header.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable.wikitable th.ts-vertical-header.unsortable,html.client-js .mw-parser-output .sort-under-center.sortable.wikitable th.ts-vertical-header.headerSort,html.client-js .mw-parser-output .sort-under-center.sortable.wikitable th.ts-vertical-header.unsortable{padding-top:0.4em}html.client-js .mw-parser-output .sort-under.sortable:not(.wikitable) th.ts-vertical-header.headerSort,html.client-js .mw-parser-output .sort-under.sortable:not(.wikitable) th.ts-vertical-header.unsortable,html.client-js .mw-parser-output .sort-under-right.sortable:not(.wikitable) th.ts-vertical-header.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable:not(.wikitable) th.ts-vertical-header.unsortable,html.client-js .mw-parser-output .sort-under-center.sortable:not(.wikitable) th.ts-vertical-header.headerSort,html.client-js .mw-parser-output .sort-under-center.sortable:not(.wikitable) th.ts-vertical-header.unsortable{padding-top:1px}html.client-js .mw-parser-output .sort-under.sortable .ts-vertical-header>div,html.client-js .mw-parser-output .sort-under-right.sortable .ts-vertical-header>div,html.client-js .mw-parser-output .sort-under-center.sortable .ts-vertical-header>div{padding-top:4px}html.client-js .mw-parser-output .sort-under.sortable:not(.wikitable) .ts-vertical-header>div,html.client-js .mw-parser-output .sort-under-right.sortable:not(.wikitable) .ts-vertical-header>div,html.client-js .mw-parser-output .sort-under-center.sortable:not(.wikitable) .ts-vertical-header>div{padding-bottom:4px}html.client-js body.skin-minerva .mw-parser-output .sort-under.sortable.wikitable .ts-vertical-header>div,html.client-js body.skin-minerva .mw-parser-output .sort-under-right.sortable.wikitable .ts-vertical-header>div,html.client-js body.skin-minerva .mw-parser-output .sort-under-center.sortable.wikitable .ts-vertical-header>div{padding-top:2px}html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable.wikitable .ts-vertical-header>div,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable.wikitable .ts-vertical-header>div,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable.wikitable .ts-vertical-header>div{padding-top:0}@media(pointer:coarse){html.client-js .mw-parser-output .sort-under-center.sortable.wikitable th.headerSort{background-position:center bottom 0.5em}html.client-js .mw-parser-output .sort-under.sortable.wikitable th.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable.wikitable th.headerSort{background-position:right bottom 0.5em}html.client-js .mw-parser-output .sort-under.sortable.wikitable th.headerSort,html.client-js .mw-parser-output .sort-under.sortable.wikitable th.unsortable,html.client-js .mw-parser-output .sort-under-right.sortable.wikitable th.headerSort,html.client-js .mw-parser-output .sort-under-right.sortable.wikitable th.unsortable,html.client-js .mw-parser-output .sort-under-center.sortable.wikitable th.headerSort,html.client-js .mw-parser-output .sort-under-center.sortable.wikitable th.unsortable{padding-bottom:1.6em}html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under.sortable.wikitable th.unsortable,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-right.sortable.wikitable th.unsortable,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable.wikitable th.headerSort,html.client-js body.skin-timeless .mw-parser-output .sort-under-center.sortable.wikitable th.unsortable{padding-bottom:1.8em}html.client-js .mw-parser-output .static-row-numbers.sort-under.sortable.wikitable thead tr:only-child::before,html.client-js .mw-parser-output .static-row-numbers.sort-under-right.sortable.wikitable thead tr:only-child::before,html.client-js .mw-parser-output .static-row-numbers.sort-under-center.sortable.wikitable thead tr:only-child::before{padding-bottom:1.5em}html.client-js body.skin-timeless .mw-parser-output .static-row-numbers.sort-under.sortable.wikitable thead tr:only-child::before,html.client-js body.skin-timeless .mw-parser-output .static-row-numbers.sort-under-right.sortable.wikitable thead tr:only-child::before,html.client-js body.skin-timeless .mw-parser-output .static-row-numbers.sort-under-center.sortable.wikitable thead tr:only-child::before,html.client-js body.skin-minerva .mw-parser-output .static-row-numbers.sort-under.sortable.wikitable thead tr:only-child::before,html.client-js body.skin-minerva .mw-parser-output .static-row-numbers.sort-under-right.sortable.wikitable thead tr:only-child::before,html.client-js body.skin-minerva .mw-parser-output .static-row-numbers.sort-under-center.sortable.wikitable thead tr:only-child::before{padding-bottom:1.4em}}}</style> <table class="wikitable sortable sort-under"> <tbody><tr> <th rowspan="2">name </th> <th colspan="2">data columns </th></tr> <tr> <th>data </th> <th>more data </th></tr> <tr> <td>cats </td> <td>273 </td> <td>53 </td></tr> <tr> <td>dogs </td> <td>65 </td> <td>8,492 </td></tr> <tr> <td>mice </td> <td>1,649 </td> <td>548 </td></tr></tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Restrictions_and_exclusions" data-mw-thread-id="h-Restrictions_and_exclusions"><span data-mw-comment-start="" id="h-Restrictions_and_exclusions"></span>Restrictions and exclusions<span data-mw-comment-end="h-Restrictions_and_exclusions"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=13" title="Edit section: Restrictions and exclusions"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Tables can only be sorted vertically by clicking on the column headers (topmost cells). When a column header is clicked, the rows of the table reorder themselves in an up-and-down manner, based on the values in that column. However, there is no functionality to sort columns horizontally by clicking on a cell in the leftmost row. Thus, the table columns will not rearrange themselves left-to-right based on their data, as sorting horizontally is not supported in typical sortable table implementations. </p> <div class="mw-heading mw-heading3"><h3 id="Making_selected_columns_unsortable" data-mw-thread-id="h-Making_selected_columns_unsortable-Restrictions_and_exclusions"><span data-mw-comment-start="" id="h-Making_selected_columns_unsortable-Restrictions_and_exclusions"></span>Making selected columns unsortable<span data-mw-comment-end="h-Making_selected_columns_unsortable-Restrictions_and_exclusions"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=14" title="Edit section: Making selected columns unsortable"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>If you want a specific column not to be sortable, specify <code>class=unsortable</code> in the attributes of its header cell. If you have a sorting row then <code>class=unsortable</code> must be in the header cell with the sorting icon. </p><p>(When using <span class="nowrap">{{</span><a href="/wiki/Template:Vert_header" class="mw-redirect" title="Template:Vert header">vert header</a><span class="nowrap">}}</span>, disable column sorting by omitting <code>|stp=1</code> in that template, which overrides anything placed before it.) </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="hll"><span class="p">!</span><span class="na">Numbers</span><span class="err">!!</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"unsortable"</span><span class="w"> </span><span class="p">|</span><span class="gu">Unsortable</span> </span><span class="p">|-</span> <span class="p">|</span>1<span class="p">||</span>This <span class="p">|-</span> <span class="p">|</span>2<span class="p">||</span>Column <span class="p">|-</span> <span class="p">|</span>3<span class="p">||</span>Is <span class="p">|-</span> <span class="p">|</span>4<span class="p">||</span>Unsortable <span class="p">|-</span> <span class="p">|</span>5<span class="p">||</span>See? <span class="p">|-</span> <span class="p">!</span><span class="gu">Total: 15</span><span class="p">!!</span> <span class="p">|}</span> </pre></div> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> <span class="anchor" id="Sortable_looks"></span> </p> <table class="wikitable sortable"> <tbody><tr> <th>Numbers</th> <th class="unsortable">Unsortable </th></tr> <tr> <td>1</td> <td>This </td></tr> <tr> <td>2</td> <td>Column </td></tr> <tr> <td>3</td> <td>Is </td></tr> <tr> <td>4</td> <td>Unsortable </td></tr> <tr> <td>5</td> <td>See? </td></tr> <tr> <th>Total: 15</th> <th> </th></tr></tbody></table> </div> <div class="mw-heading mw-heading3"><h3 id="Excluding_final_rows_from_sorting" data-mw-thread-id="h-Excluding_final_rows_from_sorting-Restrictions_and_exclusions"><span data-mw-comment-start="" id="h-Excluding_final_rows_from_sorting-Restrictions_and_exclusions"></span>Excluding final rows from sorting<span data-mw-comment-end="h-Excluding_final_rows_from_sorting-Restrictions_and_exclusions"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=15" title="Edit section: Excluding final rows from sorting"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Sometimes it is helpful to exclude the last row of a table from the sorting process. There are two methods to achieve this. </p> <div class="mw-heading mw-heading4"><h4 id="Header_as_a_footer" data-mw-thread-id="h-Header_as_a_footer-Excluding_final_rows_from_sorting"><span data-mw-comment-start="" id="h-Header_as_a_footer-Excluding_final_rows_from_sorting"></span>Header as a footer<span data-mw-comment-end="h-Header_as_a_footer-Excluding_final_rows_from_sorting"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=16" title="Edit section: Header as a footer"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>You want a repeat of the header at the bottom. You do this by using the <code>!</code> (exclamation mark) syntax for all cells in the last row of the table. This will be recognized as a footer and the row will not be part of the sorting. This footer makes it a complex table, and so scopes help accessibility via <a href="/wiki/Screen_readers" class="mw-redirect" title="Screen readers">screen readers</a>. </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|+</span><span class="gh"> Header as footer example</span> <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Name</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Surname</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Height</span> <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">row</span><span class="p">|</span><span class="gu"> John</span> <span class="p">|</span> Smith <span class="p">|</span> 1.85 <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">row</span><span class="p">|</span><span class="gu"> Ron</span> <span class="p">|</span> Ray <span class="p">|</span> 1.89 <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">row</span><span class="p">|</span><span class="gu"> Mario</span> <span class="p">|</span> Bianchi <span class="p">|</span> 1.72 <span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Name</span> </span><span class="hll"><span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Surname</span> </span><span class="hll"><span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Height</span> </span><span class="p">|}</span> </pre></div> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <caption>Header as footer example </caption> <tbody><tr> <th scope="col">Name </th> <th scope="col">Surname </th> <th scope="col">Height </th></tr> <tr> <th scope="row">John </th> <td>Smith </td> <td>1.85 </td></tr> <tr> <th scope="row">Ron </th> <td>Ray </td> <td>1.89 </td></tr> <tr> <th scope="row">Mario </th> <td>Bianchi </td> <td>1.72 </td></tr> <tr> <th scope="col">Name </th> <th scope="col">Surname </th> <th scope="col">Height </th></tr></tbody></table> </div> <p>This applies to all rows at the end of the table that are consecutive and fully made up out of header cells. Those rows will not sort. </p> <div class="mw-heading mw-heading4"><h4 id="Summation_footer" data-mw-thread-id="h-Summation_footer-Excluding_final_rows_from_sorting"><span data-mw-comment-start="" id="h-Summation_footer-Excluding_final_rows_from_sorting"></span>Summation footer<span data-mw-comment-end="h-Summation_footer-Excluding_final_rows_from_sorting"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=17" title="Edit section: Summation footer"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This can be achieved using <code>class=sortbottom</code> on the desired table row (line starting with <code>|-</code>). </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|+</span><span class="gh"> Summation footer example</span> <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Name</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Surname</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">col</span><span class="p">|</span><span class="gu"> Height</span> <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">row</span><span class="p">|</span><span class="gu"> John</span> <span class="p">|</span> Smith <span class="p">|</span> 1.85 <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">row</span><span class="p">|</span><span class="gu"> Ron</span> <span class="p">|</span> Ray <span class="p">|</span> 1.89 <span class="p">|-</span> <span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">row</span><span class="p">|</span><span class="gu"> Mario</span> <span class="p">|</span> Bianchi <span class="p">|</span> 1.72 <span class="hll"><span class="p">|-</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s">sortbottom</span> </span><span class="hll"><span class="p">!</span><span class="na">scope</span><span class="o">=</span><span class="s">row</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s">2</span><span class="w"> </span><span class="p">|</span><span class="gu"> Average:</span><span class="p">||</span><span class="gu">1.82</span> </span><span class="p">|}</span> </pre></div> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <caption>Summation footer example </caption> <tbody><tr> <th scope="col">Name </th> <th scope="col">Surname </th> <th scope="col">Height </th></tr> <tr> <th scope="row">John </th> <td>Smith </td> <td>1.85 </td></tr> <tr> <th scope="row">Ron </th> <td>Ray </td> <td>1.89 </td></tr> <tr> <th scope="row">Mario </th> <td>Bianchi </td> <td>1.72 </td></tr> <tr class="sortbottom"> <th scope="row" colspan="2">Average: </th> <td>1.82 </td></tr></tbody></table> </div> <p>This is a complex table due to the "Average" cell spanning 2 columns. "Average" is also the row heading for the last row. Using the <code>!</code> (exclamation mark) syntax with <code>scope=row</code> causes the correct header HTML to be generated, which aids in <a href="/wiki/Wikipedia:ACCESS" class="mw-redirect" title="Wikipedia:ACCESS">accessibility</a>, e.g., for those using screen readers. </p><p>It is possible to keep multiple lines fixed at the bottom, as long as the lines are consecutive. </p><p>If the "sortbottom" rows are not consecutive, then when the original order of a table is restored by clicking a third time on the same arrow then rows with <code>class=sortbottom</code> will remain at the bottom even if they were not originally at the bottom. </p> <div class="mw-heading mw-heading3"><h3 id="Excluding_top_rows_from_sorting" data-mw-thread-id="h-Excluding_top_rows_from_sorting-Restrictions_and_exclusions"><span data-mw-comment-start="" id="h-Excluding_top_rows_from_sorting-Restrictions_and_exclusions"></span>Excluding top rows from sorting<span data-mw-comment-end="h-Excluding_top_rows_from_sorting-Restrictions_and_exclusions"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=18" title="Edit section: Excluding top rows from sorting"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This works the same as above for plain (non-header) rows at the top. This can be achieved using <code>class="sorttop"</code> on the desired table row (line starting with <code>|-</code>). It is possible to keep multiple lines fixed at the top, as long as the lines are consecutive. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Configuring_the_sorting" data-mw-thread-id="h-Configuring_the_sorting"><span data-mw-comment-start="" id="h-Configuring_the_sorting"></span>Configuring the sorting<span data-mw-comment-end="h-Configuring_the_sorting"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=19" title="Edit section: Configuring the sorting"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>By default, the system tries to guess the data type in each column. It does this by looking at the first five rows and evaluating their contents. This process works most of the time but can also easily get confused if you have inconsistent values or additional specifiers that the system doesn't know about. To avoid this ambiguity you can force a particular data type or override the value of a cell. For numeric values, consider using template <span class="nowrap">{{</span><a href="/wiki/Template:Val" title="Template:Val">Val</a><span class="nowrap">}}</span>, see examples at <a href="/wiki/Template:Val#Sorting" title="Template:Val">Template:Val § Sorting</a>. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Forcing_a_column_to_have_a_particular_data_type" data-mw-thread-id="h-Forcing_a_column_to_have_a_particular_data_type"><span data-mw-comment-start="" id="h-Forcing_a_column_to_have_a_particular_data_type"></span>Forcing a column to have a particular data type<span data-mw-comment-end="h-Forcing_a_column_to_have_a_particular_data_type"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=20" title="Edit section: Forcing a column to have a particular data type"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Further information: <a href="https://meta.wikimedia.org/wiki/Help:Sorting#Forcing_the_sort_mode_for_a_column" class="extiw" title="meta:Help:Sorting">meta:Help:Sorting § Forcing the sort mode for a column</a></div> <p>The <code>data-sort-type="..."</code> attribute can be added inside the header of a column to ensure that the cells underneath are <i>all</i> treated as a specified type of data. <span typeof="mw:File"><a href="/wiki/File:Symbol_information_vote.svg" class="mw-file-description"><img alt="information" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Symbol_information_vote.svg/18px-Symbol_information_vote.svg.png" decoding="async" width="18" height="19" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Symbol_information_vote.svg/27px-Symbol_information_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Symbol_information_vote.svg/36px-Symbol_information_vote.svg.png 2x" data-file-width="180" data-file-height="185"/></a></span><b> It must go in the header cell with the sorting icon</b>. It will not work in a header cell without a sorting icon. For example; when there are two rows of headers, the bottom row will always have the sorting icons, as explained previously. </p><p>The following (case-insensitive) values are valid for <code>data-sort-type</code>: </p> <ul><li><code>text</code></li> <li><code>number</code></li> <li><code>currency</code></li> <li><code>url</code> for website addresses</li> <li><code>IPAddress</code> for numeric <a href="/wiki/IP_address" title="IP address">internet protocol addresses</a></li> <li><code>date</code> for language specific standard date format</li> <li><code>isoDate</code> for dates in <a href="/wiki/ISO_8601" title="ISO 8601">ISO 8601</a> format (i.e. YYYY-MM-DD)</li> <li><code>usLongDate</code> for dates in the US format of month day, year. Must have all 3 to work.</li> <li><code>time</code></li></ul> <div class="mw-heading mw-heading3"><h3 id="data-sort-type=text" data-mw-thread-id="h-data-sort-type=text-Forcing_a_column_to_have_a_particular_data_type"><span id="data-sort-type.3Dtext"></span><span data-mw-comment-start="" id="h-data-sort-type=text-Forcing_a_column_to_have_a_particular_data_type"></span>data-sort-type=text<span data-mw-comment-end="h-data-sort-type=text-Forcing_a_column_to_have_a_particular_data_type"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=21" title="Edit section: data-sort-type=text"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><code>data-sort-type=text</code> uses alphabetical sorting of text, but numbers are sorted numerically within that alphabetical sorting. See <a href="/wiki/Natural_sort_order" title="Natural sort order">natural sort order</a>. </p><p>For example: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <table class="wikitable"> <tbody><tr> <th>Without any <code>data-sort-type</code> </th></tr> <tr> <td><div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> Album</span> <span class="p">|-</span> ... etc ... <span class="p">|}</span> </pre></div> <table class="wikitable sortable"> <tbody><tr> <th>Album </th></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/19_(Adele_album)" title="19 (Adele album)">193</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">215</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/19_(Adele_album)" title="19 (Adele album)">19</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/Matin%C3%A9e_(album)" title="Matinée (album)">Matinée</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/19_(Adele_album)" title="19 (Adele album)">19</a></i> </td></tr> <tr> <td><i><a href="/wiki/Everything_Is_New" title="Everything Is New">Everything Is New</a></i> </td></tr> <tr> <td><i><a href="/wiki/Love_%26_War_(Daniel_Merriweather_album)" title="Love & War (Daniel Merriweather album)">Love & War</a></i> </td></tr></tbody></table> </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <table class="wikitable"> <tbody><tr> <th>With <code>data-sort-type=text</code> </th></tr> <tr> <td><div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="w"> </span><span class="na">data-sort-type</span><span class="o">=</span><span class="s">text</span><span class="w"> </span><span class="p">|</span><span class="gu"> Album</span> </span><span class="p">|-</span> ... etc ... <span class="p">|}</span> </pre></div> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="text">Album </th></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/19_(Adele_album)" title="19 (Adele album)">193</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">215</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/19_(Adele_album)" title="19 (Adele album)">19</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/Matin%C3%A9e_(album)" title="Matinée (album)">Matinée</a></i> </td></tr> <tr> <td><i><a href="/wiki/21_(Adele_album)" title="21 (Adele album)">21</a></i> </td></tr> <tr> <td><i><a href="/wiki/19_(Adele_album)" title="19 (Adele album)">19</a></i> </td></tr> <tr> <td><i><a href="/wiki/Everything_Is_New" title="Everything Is New">Everything Is New</a></i> </td></tr> <tr> <td><i><a href="/wiki/Love_%26_War_(Daniel_Merriweather_album)" title="Love & War (Daniel Merriweather album)">Love & War</a></i> </td></tr></tbody></table> </td></tr></tbody></table> </div> <p>Without <code>data-sort-type=text</code> in the header, the tablesorter gets confused by the numeric titles in the first few rows into treating the entire column as numeric. This results in it wrongly sorting the non-numeric titles as zero regardless of the alphabetical ordering of their text. </p><p>Note that if a column without declared sort-type contains only numeric values within the first top five cells, <i>but with a reference</i> <code><ref>...</ref></code> immediately after the last digit of at least one number in those first five cells, this may cause the column to be sorted as text. This can be avoided by declaring a different sort type such as: <code>data-sort-type=number</code> </p> <div class="mw-heading mw-heading3"><h3 id="Default_data_type_of_a_column" data-mw-thread-id="h-Default_data_type_of_a_column-Forcing_a_column_to_have_a_particular_data_type"><span data-mw-comment-start="" id="h-Default_data_type_of_a_column-Forcing_a_column_to_have_a_particular_data_type"></span>Default data type of a column<span data-mw-comment-end="h-Default_data_type_of_a_column-Forcing_a_column_to_have_a_particular_data_type"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=22" title="Edit section: Default data type of a column"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>If you do not specify a <code>data-sort-type</code>, the sort modes (the <a href="/wiki/Data_type" title="Data type">data types</a>, which, in addition to the choice "ascending" or "descending", determine the sorting order) are as follows: </p> <dl><dt>date (see also below)</dt> <dd> <ul><li>criterion: the first non-blank element is of the form "DD-MM-YYYY", "DD-MM-YY", or "DD mmm YYYY"</li> <li>order: numeric value of YYYYMMDD; The string DDsMMsYYYY of length 10 (if characters positioned at s are equal together and are either '/' or '-' separator) is positioned as YYYYMMDD, the string DDsMMsYY of length 8 (if characters positioned at s are equal together and are either '/' or '-' separator) as 19YYMMDD if YY >= 50 and 20YYMMDD otherwise, and the string "DD mmm YYYY" with mmm an (abbreviated) month name.</li></ul></dd></dl> <dl><dt>isoDate (ISO 8601)</dt> <dd> <ul><li>criterion: format "±YYYY-MM-DD", with 1-4 digits for year "YYYY" from -9999 to 9999, month only with digits, format "±YYYY-MM-DDThh:mm:ss.sss±TH:TM" with time hour "hh", minutes "mm", seconds "ss.sss", and time zone offset "TH:TM, right values are optional.</li> <li>order: numeric, with time in milliseconds after 01 January, 1970 UTC.</li></ul></dd></dl> <dl><dt>currency (this mode can be useful for other data also)</dt> <dd> <ul><li>criterion: the first non-blank element starts with $, £, €, or ¥</li> <li>order: numeric, ignoring these symbols and all ordinary letters and commas, but not spaces; note that scientific notation cannot be used, as e and E are removed</li></ul></dd></dl> <dl><dt>number</dt> <dd> <ul><li>criterion: the first non-blank element consists of just digits, points, commas, spaces, "+", "-", possibly followed by "e" or "E" and a string consisting of "+", "-", digits</li> <li>order: after removing the commas and spaces, if any, if the string starts with a number the order is numeric according to the first number in the string (<a rel="nofollow" class="external text" href="https://web.archive.org/20121226161834/www.devguru.com/technologies/ecmascript/QuickRef/parsefloat.html">parseFloat</a> is applied); it is regarded as zero if it is empty; in other cases (parseFloat returns <a href="/wiki/NaN" title="NaN">NaN</a>), the element is positioned like -∞.</li></ul></dd></dl> <dl><dt>string</dt> <dd> <ul><li>criterion: all other cases;</li> <li>order: uses locale specific (so in this case English) ordering if your browser supports it. Alternatively after conversion of capitals to lowercase the order is <a href="/wiki/ASCII" title="ASCII">ASCII</a> – partial list showing the order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é— (see also below; a blank space comes before every other character; a <a href="/wiki/Non-breaking_space" title="Non-breaking space">non-breaking space</a> code <code>&nbsp;</code> counts as a space; two adjacent ordinary blank spaces count as one; for multiple blank spaces one can use <code>&nbsp;</code> or alternate <code>&nbsp;</code> and ordinary blank spaces)</li></ul></dd></dl> <p>If more than one possible type matches, the first type in the above order is chosen. For example, "24-12-2007" matches as a date, so is not treated as a number. Formatting and markup tags are ignored when determining the matching type. </p><p>The sort mode is determined by the first 5 non-blank rows below the header after loading the page. This can also change after deleting a row, or adding a column. Therefore, it is wise to make sure that every element matches the criterion for the required data type. Using a <a href="/wiki/Help:Table#Row_template" title="Help:Table">row template</a> this can be done very conveniently. </p><p>The method of making sure the sort mode of each column is as desired, is specify a <code>data-sort-type</code>, see <a href="#Forcing_a_column_to_have_a_particular_data_type">above</a>. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Specifying_a_sort_key_for_a_cell" data-mw-thread-id="h-Specifying_a_sort_key_for_a_cell"><span data-mw-comment-start="" id="h-Specifying_a_sort_key_for_a_cell"></span>Specifying a sort key for a cell<span data-mw-comment-end="h-Specifying_a_sort_key_for_a_cell"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=23" title="Edit section: Specifying a sort key for a cell"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Sometimes the value of a cell is not correctly parsed or one wants to sort the row in a special way. (e.g. a cell containing 'John Doe' should actually be sorted as 'Doe' and not as 'John'). This can be easily achieved by using <code>{{<a href="/wiki/Template:Sortname" title="Template:Sortname">sortname</a>}}</code>, like this: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <table> <tbody><tr> <td> <pre>{|class="wikitable sortable" !Name and surname!!Height |- |{{sortname|John|Smith|nolink=1}}||1.85 |- |{{sortname|Ian|Ray|nolink=1}}||1.89 |- |{{sortname|Zachary|Bianchi|nolink=1}}||1.72 |- !Average:||1.82 |} </pre> </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th>Name and surname</th> <th>Height </th></tr> <tr> <td><span data-sort-value="Smith, John"><span class="vcard"><span class="fn">John Smith</span></span></span></td> <td>1.85 </td></tr> <tr> <td><span data-sort-value="Ray, Ian"><span class="vcard"><span class="fn">Ian Ray</span></span></span></td> <td>1.89 </td></tr> <tr> <td><span data-sort-value="Bianchi, Zachary"><span class="vcard"><span class="fn">Zachary Bianchi</span></span></span></td> <td>1.72 </td></tr> <tr> <th>Average:</th> <th>1.82 </th></tr></tbody></table> </div> <p>Alternatively, you can set the <code>data-sort-value</code> attribute: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <table> <tbody><tr> <td> <pre>{|class="wikitable sortable" !Name and surname!!Height |- |<b style="color:red">data-sort-value="Smith, John"</b>|John Smith||1.85 |- |<b style="color:red">data-sort-value="Ray, Ian"</b>|Ian Ray||1.89 |- |<b style="color:red">data-sort-value="Bianchi, Zachary"</b>|Zachary Bianchi||1.72 |- !Average:||1.82 |} </pre> </td></tr></tbody></table> </div> <p>For example, this is handy to sort military ranks in rank-seniority order: </p><p><b>Wiki markup</b> </p> <pre>{|class="wikitable sortable" !Name and surname!!Rank |- |<b style="color:red">data-sort-value="Smith, John"</b>|John Smith||<b style="color:blue">data-sort-value="16"</b>|[[Corporal|Cpl]] |- |<b style="color:red">data-sort-value="Ray, Ian"</b>|Ian Ray||<b style="color:blue">data-sort-value="8"</b>|[[Captain (OF-2)|Capt]] |- |<b style="color:red">data-sort-value="Bianchi, Zachary"</b>|Zachary Bianchi||<b style="color:blue">data-sort-value="10"</b>|[[2nd Lieutenant|2 Lt]] |} </pre> <p>This gives: </p> <table class="wikitable sortable"> <tbody><tr> <th>Name and surname</th> <th>Rank </th></tr> <tr> <td data-sort-value="Smith, John">John Smith</td> <td data-sort-value="16"><a href="/wiki/Corporal" title="Corporal">Cpl</a> </td></tr> <tr> <td data-sort-value="Ray, Ian">Ian Ray</td> <td data-sort-value="8"><a href="/wiki/Captain_(OF-2)" class="mw-redirect" title="Captain (OF-2)">Capt</a> </td></tr> <tr> <td data-sort-value="Bianchi, Zachary">Zachary Bianchi</td> <td data-sort-value="10"><a href="/wiki/2nd_Lieutenant" class="mw-redirect" title="2nd Lieutenant">2 Lt</a> </td></tr> </tbody></table> <p>See also <a href="https://www.mediawiki.org/wiki/Help:Sorting#Specifying_a_sort_key" class="extiw" title="mw:Help:Sorting">mw:Help:Sorting#Specifying a sort key</a>. </p><p><b>If you have a list where all the entries start with quotes ("),</b> and you want to set a sort key for one of the entries, then you will need to use the <a rel="nofollow" class="external text" href="http://www.ascii.cl/htmlcodes.htm">HTML name or number</a> for quotes at the beginning of that sort key (see also <a href="/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML" title="List of XML and HTML character entity references">List of XML and HTML character entity references § Character entity references in HTML</a>). Lists of song titles for example sometimes have each song title in quotes. So to sort by a particular word in a song title use one of these: </p><p><code style="font-weight:bold;">data-sort-value="&quot;WORD"</code> </p><p><code style="font-weight:bold;">data-sort-value="&#34;WORD"</code> </p> <div class="mw-heading mw-heading3"><h3 id="Keeping_some_rows_together" data-mw-thread-id="h-Keeping_some_rows_together-Specifying_a_sort_key_for_a_cell"><span data-mw-comment-start="" id="h-Keeping_some_rows_together-Specifying_a_sort_key_for_a_cell"></span>Keeping some rows together<span data-mw-comment-end="h-Keeping_some_rows_together-Specifying_a_sort_key_for_a_cell"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=24" title="Edit section: Keeping some rows together"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><code>data-sort-value</code> can be used to keep certain rows together. The specified order of these rows is preserved. An example is to keep "South Holland" immediately after "Netherlands", whatever the sort order or column: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th>Country/province</th> <th>Capital </th></tr> <tr> <td>France</td> <td>Paris </td></tr> <tr> <td>Netherlands</td> <td>Amsterdam </td></tr> <tr> <td data-sort-value="Netherlands">South Holland</td> <td data-sort-value="Amsterdam">The Hague </td></tr> <tr> <td>Poland</td> <td>Warsaw </td></tr> <tr> <td>UK</td> <td>London </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">!</span><span class="gu">Country/province </span><span class="p">!!</span><span class="gu">Capital</span> <span class="p">|-</span> <span class="p">|</span>France <span class="p">||</span>Paris <span class="p">|-</span> <span class="p">|</span>Netherlands <span class="p">||</span>Amsterdam <span class="p">|-</span> <span class="hll"><span class="p">|</span><span class="na">data-sort-value</span><span class="o">=</span><span class="s">Netherlands</span><span class="w"> </span><span class="p">|</span>South Holland <span class="p">||</span><span class="na">data-sort-value</span><span class="o">=</span><span class="s">Amsterdam</span><span class="w"> </span><span class="p">|</span>The Hague </span><span class="p">|-</span> <span class="p">|</span>UK<span class="p">||</span>London <span class="p">|}</span> </pre></div></div> <p>If you have rows that contain colspans, this might become a little difficult. You can also use the <code>class="expand-child"</code> on a row; it will then always be below the row just above it in the table source, wherever that row may be sorted in the table. </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th style="width:9.3em">Country</th> <th>Capital </th></tr> <tr> <td><b>France</b> </td> <td>Paris </td></tr> <tr class="expand-child"> <td colspan="2">In Paris is the Eiffel Tower. </td></tr> <tr> <td><b>UK</b> </td> <td>London </td></tr> <tr class="expand-child"> <td colspan="2">In the U.K. you cannot pay with euros, </td></tr> <tr class="expand-child"> <td colspan="2">and you drive on the left. </td></tr> <tr> <td><b>Germany</b> </td> <td>Berlin </td></tr> <tr class="expand-child"> <td colspan="2">Germany includes the former DDR. </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">!</span><span class="na">style</span><span class="o">=</span><span class="s2">"width:9.3em"</span><span class="w"> </span><span class="p">|</span><span class="gu">Country </span><span class="p">!!</span><span class="gu">Capital</span> <span class="p">|-</span> <span class="p">|</span><span class="gs">'''France'''</span> <span class="p">|</span>Paris <span class="hll"><span class="p">|-</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"expand-child"</span> </span><span class="p">|</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span> In Paris is the Eiffel Tower. <span class="p">|-</span> <span class="p">|</span><span class="gs">'''UK'''</span> <span class="p">|</span>London <span class="hll"><span class="p">|-</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"expand-child"</span> </span><span class="p">|</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span> In the U.K. you cannot pay with euros, <span class="hll"><span class="p">|-</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"expand-child"</span> </span><span class="p">|</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span> and you drive on the left. <span class="p">|-</span> <span class="p">|</span><span class="gs">'''Germany'''</span> <span class="p">|</span>Berlin <span class="hll"><span class="p">|-</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"expand-child"</span> </span><span class="p">|</span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span> Germany includes the former DDR. <span class="p">|}</span> </pre></div></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Examples_of_datatype_auto_detection._First_5_cells_in_a_column" data-mw-thread-id="h-Examples_of_datatype_auto_detection._First_5_cells_in_a_column"><span data-mw-comment-start="" id="h-Examples_of_datatype_auto_detection._First_5_cells_in_a_column"></span>Examples of datatype auto detection. First 5 cells in a column<span data-mw-comment-end="h-Examples_of_datatype_auto_detection._First_5_cells_in_a_column"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=25" title="Edit section: Examples of datatype auto detection. First 5 cells in a column"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The script sees what the first 5 cells in a column contain. The sorting mode becomes <b>numeric</b> if the first 5 cells contain <u>a number only</u> (comma and period used in number formatting are accepted as number). The numeric sorting order is maintained even when text is found in the cells that follow the 5th cell. 123,564,589.7e12 is in <a href="/wiki/Scientific_notation" title="Scientific notation">scientific notation</a> and is treated as a number. An empty cell is treated as a non-number when sorting numerically. There is an empty cell initially at the bottom of each of the 2 tables just below. </p><p><b>Datatype auto detection is inconsistent.</b> It is <b>always better to add</b> a <b><code>data-sort-type</code></b> to the <b>column header.</b> </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Sort order<br/>auto-detected<br/>as text </th></tr> <tr> <td>123,564,589.7e12 </td></tr> <tr> <td>9 </td></tr> <tr> <td>70 </td></tr> <tr> <td>80 <span style="color:red">approx</span> </td></tr> <tr> <td>-80 </td></tr> <tr> <td>abc 80 </td></tr> <tr> <td>aaa </td></tr> <tr> <td>600 </td></tr> <tr> <td>300,000,000 </td></tr> <tr> <td>3,000,000 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Sort order<br/>auto-detected<br/>as number </th></tr> <tr> <td>123,564,589.7e12 </td></tr> <tr> <td>9 </td></tr> <tr> <td>70 </td></tr> <tr> <td>-80 </td></tr> <tr> <td>600 </td></tr> <tr> <td>80 <span style="color:red">approx</span> </td></tr> <tr> <td>abc 80 </td></tr> <tr> <td>aaa </td></tr> <tr> <td>300,000,000 </td></tr> <tr> <td>3,000,000 </td></tr></tbody></table> </div> <p>Single currency character, or single alphabetic character, does not currently change what the script determines via the first 5 cells in a column: <b>Numerical order.</b> </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>currencies </th></tr> <tr> <td>$ 9 </td></tr> <tr> <td>$ 80 </td></tr> <tr> <td>$ 70 </td></tr> <tr> <td>$ 600 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>currencies </th></tr> <tr> <td>€ 9 </td></tr> <tr> <td>€ 80 </td></tr> <tr> <td>€ 70 </td></tr> <tr> <td>€ 600 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>currencies </th></tr> <tr> <td>£ 9 </td></tr> <tr> <td>£ 80 </td></tr> <tr> <td>£ 70 </td></tr> <tr> <td>£ 600 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>currencies </th></tr> <tr> <td>¥ 9 </td></tr> <tr> <td>¥ 80 </td></tr> <tr> <td>¥ 70 </td></tr> <tr> <td>¥ 600 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>a </th></tr> <tr> <td>a 9 </td></tr> <tr> <td>a 80 </td></tr> <tr> <td>a 70 </td></tr> <tr> <td>a 600 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>e </th></tr> <tr> <td>e 9 </td></tr> <tr> <td>e 80 </td></tr> <tr> <td>e 70 </td></tr> <tr> <td>e 600 </td></tr></tbody></table> </div> <p>Percentage sign does not change from determination as <b>numerical order.</b> Number combinations with minus or divide signs within them are still detected as numbers. Their numerical ordering though is determined by the number before the minus or divide sign. </p> <table> <tbody><tr> <td> <table class="wikitable sortable"> <tbody><tr> <th>Percentage </th></tr> <tr> <td>7% </td></tr> <tr> <td>2 </td></tr> <tr> <td>4 </td></tr> <tr> <td>22 </td></tr> <tr> <td>111 </td></tr></tbody></table> </td> <td> <table class="wikitable sortable"> <tbody><tr> <th>Number combinations </th></tr> <tr> <td>7-4 </td></tr> <tr> <td>2 </td></tr> <tr> <td>4 </td></tr> <tr> <td>22/7 </td></tr> <tr> <td>111 </td></tr></tbody></table> </td></tr></tbody></table> <p>A <b>plus sign</b> in an <b>empty cell</b> among the first 5 cells breaks default numerical sorting. As does a <b>plus sign after a number</b> if it is in one of the first 5 cells in a column. </p> <table> <tbody><tr style="vertical-align:top;"> <td> <table class="wikitable sortable"> <tbody><tr> <th>Sort order<br/>auto-detected<br/>as text </th></tr> <tr> <td>400 </td></tr> <tr> <td>40,000 </td></tr> <tr> <td>+ </td></tr> <tr> <td>60,000 </td></tr> <tr> <td>20,000 </td></tr> <tr> <td>6,000 </td></tr> <tr> <td>5,000 </td></tr></tbody></table> </td> <td> <table class="wikitable sortable"> <tbody><tr> <th>Sort order<br/>auto-detected<br/>as text </th></tr> <tr> <td>400 </td></tr> <tr> <td>40,000 </td></tr> <tr> <td>300+ </td></tr> <tr> <td>60,000 </td></tr> <tr> <td>20,000 </td></tr> <tr> <td>6,000 </td></tr> <tr> <td>5,000 </td></tr></tbody></table> </td></tr></tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Numerical_sorting_problems" data-mw-thread-id="h-Numerical_sorting_problems"><span data-mw-comment-start="" id="h-Numerical_sorting_problems"></span>Numerical sorting problems<span data-mw-comment-end="h-Numerical_sorting_problems"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=26" title="Edit section: Numerical sorting problems"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><i><b>Note:</b> See the section above about datatype auto detection via the first 5 cells in a column.</i></dd></dl> <p>Most of these problems can now be fixed by manually specifying the sort mode of a column by putting <code>data-sort-type=number</code> in the column header. See the example tables above and below. See also <a href="https://meta.wikimedia.org/wiki/Help:Sorting#Sort_modes" class="extiw" title="meta:Help:Sorting">meta:Help:Sorting#Sort modes</a> and the section about forcing the sort mode of a column. </p><p>To work <b><code>data-sort-type=number</code></b> needs to be in the <b>header cell</b> that <b>contains the sorting icon.</b> In tables with multi-row headers, the sorting icon will be in the lowest header cells. </p><p>References <code><ref>...</ref></code> after a number in any cell (including the first five cells) no longer break numerical sorting. </p><p>Text breaks default numerical sorting if it is before or after a number in one of the first 5 cells in a column. </p><p>A colon by itself (to signify no data, for example) in one of the first 5 cells in a column breaks numerical sorting. </p><p>Even when using <code>data-sort-type=number</code> in the column header, text in front of a number in any cell breaks numerical sorting of that cell. Text after a number is not a problem if the sort order of a column is specified by using <code>data-sort-type=number</code>. </p><p>Leading zeroes are not necessary for numerical sorting of a column. If it seems that way, then that means the column is being sorted alphabetically. Look in the first 5 cells for anything other than numbers, and correct those cells according to these rules. Better yet, add <code>data-sort-type=number</code> to the column header. Later editing by other editors will not break numerical sorting. </p><p>A dash, of any kind, in a blank cell in one of the first 5 cells in a column breaks default numerical sorting of a column. </p><p>A dash in front of a number does not break numerical sorting. </p><p>Dashes are allowed anywhere in cells if <code>data-sort-type=number</code> is used in the column header. </p><p>The <span class="nowrap">{{</span><a href="/wiki/Template:N/A" class="mw-redirect" title="Template:N/A">N/A</a><span class="nowrap">}}</span> template in the first five cells of a column is inconsistent in its effect on automatic datatype detection. It is always better to specify a <code>data-sort-type</code> in the column header. </p> <div class="mw-heading mw-heading3"><h3 id="c._for_circa" data-mw-thread-id="h-c._for_circa-Numerical_sorting_problems"><span data-mw-comment-start="" id="h-c._for_circa-Numerical_sorting_problems"></span>c. for circa<span data-mw-comment-end="h-c._for_circa-Numerical_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=27" title="Edit section: c. for circa"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">See also: <a href="#Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD">§ Year, month, day. Using numbers. ISO date YYYY-MM-DD</a></div> <p>"<b>c.</b>" (<a href="https://en.wiktionary.org/wiki/circa" class="extiw" title="wiktionary:circa">circa</a>, indicates "approximately") is often found in columns of numbers and dates. It often breaks sorting. The addition of <code>data-sort-type="..."</code> to the column header does not allow c. to be put in front of the number. </p><p>Using the <b><span class="nowrap">{{</span><a href="/wiki/Template:Circa" title="Template:Circa">circa</a><span class="nowrap">}}</span></b> template fixes sorting when c. is in front of the number, but only if the <i><b><code>sortable=yes</code></b></i> parameter is added to the template. See: <a href="/wiki/Template:Circa/doc/sortable" title="Template:Circa/doc/sortable">Template:Circa/doc/sortable</a>. </p> <dl><dd><code>{{circa|NUMBER|sortable=yes}}</code></dd> <dd><span style="display:none; speak:none;">NUMBER </span><abbr title="circa">c.</abbr><span style="white-space:nowrap;"> NUMBER</span></dd></dl> <p>Alternatively, c. can be put after the number. Or it can be moved to a different column. </p> <div class="mw-heading mw-heading3"><h3 id="Numerical_ranges" data-mw-thread-id="h-Numerical_ranges-Numerical_sorting_problems"><span data-mw-comment-start="" id="h-Numerical_ranges-Numerical_sorting_problems"></span>Numerical ranges<span data-mw-comment-end="h-Numerical_ranges-Numerical_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=28" title="Edit section: Numerical ranges"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><i><b>Note:</b> Most problems are fixed by adding <b><code>data-sort-type=number</code></b> to the column header. It also prevents problems caused by later editing.</i></dd></dl> <p>A dash after a number no longer breaks default numerical sorting of a column. Therefore, a range (30–40) now works. </p><p>A plus sign after a number breaks default numerical sorting if it is in one of the first 5 cells in a column. </p><p>A plus sign in an otherwise empty cell breaks default numerical sorting of a column. That is if the cell is one of the first 5 cells in the column. </p><p>You can also use 2 columns for a range if you want to sort by either the lower or upper range. If you want the upper range to sort best all cells need to be filled in with numbers. For example, you can use the same number in both the lower and upper range. You can also add a plus sign after the number in the upper range. </p><p><b>The first set of tables below do not sort correctly,</b> except for the lower range which has no complicating factors. Note that <b>"400+"</b> and <b>"400 +"</b> do not sort correctly in their columns. These tables do not have <code>data-sort-type=number</code> in their column headers. </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <caption>One column </caption> <tbody><tr> <th>Estimated<br/>attendance </th></tr> <tr> <td>400 + </td></tr> <tr> <td>40,000+ </td></tr> <tr> <td>200,000–400,000 </td></tr> <tr> <td>400,000+ </td></tr> <tr> <td>60,000–350,000 </td></tr> <tr> <td>40,000 </td></tr> <tr> <td>40,000–50,000 </td></tr> <tr> <td>20,000–100,000 </td></tr> <tr> <td>10,000–100,000 </td></tr> <tr> <td>6,000–7,000 </td></tr> <tr> <td>5,000–10,000 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <caption>One column </caption> <tbody><tr> <th>Estimated<br/>attendance </th></tr> <tr> <td>400+ </td></tr> <tr> <td>40,000+ </td></tr> <tr> <td>200,000–400,000 </td></tr> <tr> <td>400,000+ </td></tr> <tr> <td>60,000–350,000 </td></tr> <tr> <td>40,000 </td></tr> <tr> <td>40,000–50,000 </td></tr> <tr> <td>20,000–100,000 </td></tr> <tr> <td>10,000–100,000 </td></tr> <tr> <td>6,000–7,000 </td></tr> <tr> <td>5,000–10,000 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <caption>Two columns </caption> <tbody><tr> <th colspan="2">Estimated<br/>attendance </th></tr> <tr> <th>(lower)</th> <th>(upper) </th></tr> <tr> <td>400</td> <td>400+ </td></tr> <tr> <td>40,000</td> <td>40,000+ </td></tr> <tr> <td>200,000</td> <td>400,000 </td></tr> <tr> <td>400,000</td> <td>+ </td></tr> <tr> <td>60,000</td> <td>350,000 </td></tr> <tr> <td>40,000</td> <td> </td></tr> <tr> <td>40,000</td> <td>50,000 </td></tr> <tr> <td>20,000</td> <td>100,000 </td></tr> <tr> <td>10,000</td> <td>100,000 </td></tr> <tr> <td>6,000</td> <td>7,000 </td></tr> <tr> <td>5,000</td> <td>10,000 </td></tr></tbody></table> </div> <p><b><code>data-sort-type=number</code></b> has <b>fixed the sorting in the tables below.</b> Note the sorting of <b>400+</b> and <b>400 +</b>. </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <caption>One column </caption> <tbody><tr> <th data-sort-type="number">Estimated<br/>attendance </th></tr> <tr> <td>400 + </td></tr> <tr> <td>40,000+ </td></tr> <tr> <td>200,000–400,000 </td></tr> <tr> <td>400,000+ </td></tr> <tr> <td>60,000–350,000 </td></tr> <tr> <td>40,000 </td></tr> <tr> <td>40,000–50,000 </td></tr> <tr> <td>20,000–100,000 </td></tr> <tr> <td>10,000–100,000 </td></tr> <tr> <td>6,000–7,000 </td></tr> <tr> <td>5,000–10,000 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <caption>One column </caption> <tbody><tr> <th data-sort-type="number">Estimated<br/>attendance </th></tr> <tr> <td>400+ </td></tr> <tr> <td>40,000+ </td></tr> <tr> <td>200,000–400,000 </td></tr> <tr> <td>400,000+ </td></tr> <tr> <td>60,000–350,000 </td></tr> <tr> <td>40,000 </td></tr> <tr> <td>40,000–50,000 </td></tr> <tr> <td>20,000–100,000 </td></tr> <tr> <td>10,000–100,000 </td></tr> <tr> <td>6,000–7,000 </td></tr> <tr> <td>5,000–10,000 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <caption>Two columns </caption> <tbody><tr> <th colspan="2">Estimated<br/>attendance </th></tr> <tr> <th data-sort-type="number">(lower)</th> <th data-sort-type="number">(upper) </th></tr> <tr> <td>400</td> <td>400+ </td></tr> <tr> <td>40,000</td> <td>40,000+ </td></tr> <tr> <td>200,000</td> <td>400,000 </td></tr> <tr> <td>400,000</td> <td>+ </td></tr> <tr> <td>60,000</td> <td>350,000 </td></tr> <tr> <td>40,000</td> <td> </td></tr> <tr> <td>40,000</td> <td>50,000 </td></tr> <tr> <td>20,000</td> <td>100,000 </td></tr> <tr> <td>10,000</td> <td>100,000 </td></tr> <tr> <td>6,000</td> <td>7,000 </td></tr> <tr> <td>5,000</td> <td>10,000 </td></tr></tbody></table> </div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Date_sorting_problems" data-mw-thread-id="h-Date_sorting_problems"><span data-mw-comment-start="" id="h-Date_sorting_problems"></span>Date sorting problems<span data-mw-comment-end="h-Date_sorting_problems"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=29" title="Edit section: Date sorting problems"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The <b><span class="nowrap">{{</span><a href="/wiki/Template:Date_table_sorting" title="Template:Date table sorting">Date table sorting</a><span class="nowrap">}}</span></b> or <b><span class="nowrap">{{</span><a href="/wiki/Template:Dts" class="mw-redirect" title="Template:Dts">dts</a><span class="nowrap">}}</span></b> template will work with any combination of years, months, days. See example <b><a href="/wiki/List_of_PC_games_(A)" title="List of PC games (A)">here</a>.</b> See template documentation and section farther down for more info. </p> <div class="mw-heading mw-heading3"><h3 id="Month_names" data-mw-thread-id="h-Month_names-Date_sorting_problems"><span data-mw-comment-start="" id="h-Month_names-Date_sorting_problems"></span>Month names<span data-mw-comment-end="h-Month_names-Date_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=30" title="Edit section: Month names"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>All sorting involving month names may fail for registered users who have changed the default language setting "en - English" at <a href="/wiki/Special:Preferences" title="Special:Preferences">Special:Preferences</a> (reported at <a href="https://phabricator.wikimedia.org/T126744" class="extiw" title="phab:T126744">phab:T126744</a>). It affects relatively few users on the English Wikipedia and can be ignored. </p> <div class="mw-heading mw-heading3"><h3 id="Year_only" data-mw-thread-id="h-Year_only-Date_sorting_problems"><span data-mw-comment-start="" id="h-Year_only-Date_sorting_problems"></span>Year only<span data-mw-comment-end="h-Year_only-Date_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=31" title="Edit section: Year only"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Year sorting of a column works as long as the year is the first text in each cell in the column. Adding <code>data-sort-type=date</code> to the column header does not change this. </p><p>Text is OK <i>after</i> a year in a cell. "FY" (<a href="/wiki/Fiscal_year" title="Fiscal year">fiscal year</a>), for example, should go after the year. References after the year are OK. Put "c." after the year, or use "est." after the year instead. </p><p>A dash, of any kind, in a blank cell breaks year sorting of a column. Dashes after the year are OK. </p><p>Unlike for numerical sorting the <span class="nowrap">{{</span><a href="/wiki/Template:N/A" class="mw-redirect" title="Template:N/A">N/A</a><span class="nowrap">}}</span> template in any cell in a year column does <i>not</i> break year sorting of that column. </p><p>If there are problems with year sorting check for any cells in the column with text or a dash (of any kind) as the first thing in a cell. Remove that text or dash, and the column should sort correctly. </p> <div class="mw-heading mw-heading3"><h3 id="Year_and_month" data-mw-thread-id="h-Year_and_month-Date_sorting_problems"><span data-mw-comment-start="" id="h-Year_and_month-Date_sorting_problems"></span>Year and month<span data-mw-comment-end="h-Year_and_month-Date_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=32" title="Edit section: Year and month"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Date sorting <b>does not work</b> for columns with only the year before the month (no day). </p><p>Adding <code>data-sort-type=date</code> or <code>data-sort-type=isoDate</code> to the column header <b>does not help.</b> Click each column header a couple times in the tables below to see. Note the column headed <code>data-sort-type=isoDate</code> may sort correctly in some browsers, but it is not reliable. <br/><b>Year and month in numerical form (YYYY-MM) works with <code>data-sort-type=isoDate</code></b> (see relevant section farther down). </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th style="max-width:5em">Year and month </th></tr> <tr> <td>1999 Dec </td></tr> <tr> <td>1999 Jan </td></tr> <tr> <td>2004 May </td></tr> <tr> <td>2004 Aug </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th style="max-width:5em">Year and month </th></tr> <tr> <td>1999 December </td></tr> <tr> <td>1999 January </td></tr> <tr> <td>2004 May </td></tr> <tr> <td>2004 August </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="date">Year and month<br/><small><code>data-sort-type=date</code></small> </th></tr> <tr> <td>1999 Dec </td></tr> <tr> <td>1999 Jan </td></tr> <tr> <td>2004 May </td></tr> <tr> <td>2004 Aug </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="date">Year and month<br/><small><code>data-sort-type=date</code></small> </th></tr> <tr> <td>1999 December </td></tr> <tr> <td>1999 January </td></tr> <tr> <td>2004 May </td></tr> <tr> <td>2004 August </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate">Year and month<br/><small><code>data-sort-type=isodate</code></small> </th></tr> <tr> <td>1999 December </td></tr> <tr> <td>1999 January </td></tr> <tr> <td>2004 May </td></tr> <tr> <td>2004 August </td></tr></tbody></table> </div> <div class="mw-heading mw-heading3"><h3 id="Month_and_year" data-mw-thread-id="h-Month_and_year-Date_sorting_problems"><span data-mw-comment-start="" id="h-Month_and_year-Date_sorting_problems"></span>Month and year<span data-mw-comment-end="h-Month_and_year-Date_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=33" title="Edit section: Month and year"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Date sorting <b>does not work</b> for columns with only the month before the year (no day). Adding <b><code>data-sort-type=date</code></b> to the column header <b>does not help.</b> </p> <table> <tbody><tr style="vertical-align:text-top;"> <td> <table class="wikitable sortable"> <tbody><tr> <th>Month and year </th></tr> <tr> <td>Dec 1999 </td></tr> <tr> <td>Jan 1999 </td></tr> <tr> <td>May 2004 </td></tr> <tr> <td>Aug 2004 </td></tr></tbody></table> </td> <td> <table class="wikitable sortable"> <tbody><tr> <th>Month and year </th></tr> <tr> <td>December 1999 </td></tr> <tr> <td>January 1999 </td></tr> <tr> <td>May 2004 </td></tr> <tr> <td>August 2004 </td></tr></tbody></table> </td></tr></tbody></table> <table> <tbody><tr style="vertical-align:text-top;"> <td> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="date">Month and year<br/><code>data-sort-type=date</code> </th></tr> <tr> <td>Dec 1999 </td></tr> <tr> <td>Jan 1999 </td></tr> <tr> <td>May 2004 </td></tr> <tr> <td>Aug 2004 </td></tr></tbody></table> </td> <td> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="date">Month and year<br/><code>data-sort-type=date</code> </th></tr> <tr> <td>December 1999 </td></tr> <tr> <td>January 1999 </td></tr> <tr> <td>May 2004 </td></tr> <tr> <td>August 2004 </td></tr></tbody></table> </td></tr></tbody></table> <div class="mw-heading mw-heading3"><h3 id="Full_dates_work._Year_must_be_on_the_end" data-mw-thread-id="h-Full_dates_work._Year_must_be_on_the_end-Date_sorting_problems"><span data-mw-comment-start="" id="h-Full_dates_work._Year_must_be_on_the_end-Date_sorting_problems"></span>Full dates work. Year must be on the end<span data-mw-comment-end="h-Full_dates_work._Year_must_be_on_the_end-Date_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=34" title="Edit section: Full dates work. Year must be on the end"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This shows that any full date works <i>without</i> <b>data-sort-type=date</b> in the table. Month-day-year or day-month-year. If a number for a day is missing, date sorting is broken. Abbreviated months work too. The year must be on the end, and a number can not be used for the month. Either will break date sorting. </p><p>Date sorting works correctly in the first 2 tables below. Years before 100 (for example, year 99) break sorting. </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Full dates </th></tr> <tr> <td>Dec 5, 1999 </td></tr> <tr> <td>Jan 7, 1999 </td></tr> <tr> <td>May 14, 2004 </td></tr> <tr> <td>Aug 4, 2004 </td></tr> <tr> <td>5 Dec 1999 </td></tr> <tr> <td>7 Jan 1999 </td></tr> <tr> <td>14 May 2004 </td></tr> <tr> <td>4 Aug 2004 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Full dates </th></tr> <tr> <td>December 5, 1999 </td></tr> <tr> <td>January 7, 1999 </td></tr> <tr> <td>May 14, 2004 </td></tr> <tr> <td>August 4, 2004 </td></tr> <tr> <td>5 December 1999 </td></tr> <tr> <td>7 January 1999 </td></tr> <tr> <td>14 May 2004 </td></tr> <tr> <td>4 August 2004 </td></tr></tbody></table> </div> <p><b>data-sort-type=date</b> in the header for the date column allows date sorting to work for all entries not missing a day number. So it is good to add it in case editors forget day numbers for some entries. That can be fixed later. The rest of the dates will sort correctly by date. Test date sorting below. <b>Some entries below are missing the day number.</b> They end up at the top or bottom of the <i>data-sort-type=date</i> list upon sorting. The list below without <i>data-sort-type=date</i> does not sort by date. </p><p>The 2 tables below are identical except for the addition of <b>data-sort-type=date</b> to the second table. </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">data-sort-type</span><span class="o">=</span><span class="s">date</span><span class="w"> </span><span class="p">|</span><span class="gu"> Full dates.<br><code>data-sort-type=date</code></span> </pre></div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Full dates.<br/>A mix of formats </th></tr> <tr> <td>Dec 5, 1999 </td></tr> <tr> <td>Jan 7, 1999 </td></tr> <tr> <td>May 2004 </td></tr> <tr> <td>Aug 4, 2004 </td></tr> <tr> <td>5 Dec 1999 </td></tr> <tr> <td>7 Jan 1999 </td></tr> <tr> <td>14 May 2004 </td></tr> <tr> <td>4 Aug 2004 </td></tr> <tr> <td>December 1999 </td></tr> <tr> <td>January 7, 1999 </td></tr> <tr> <td>May 14, 2004 </td></tr> <tr> <td>August 4, 2004 </td></tr> <tr> <td>5 December 1999 </td></tr> <tr> <td>January 1999 </td></tr> <tr> <td>14 May 2004 </td></tr> <tr> <td>4 August 2004 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="date">Full dates.<br/><code>data-sort-type=date</code> </th></tr> <tr> <td>Dec 5, 1999 </td></tr> <tr> <td>Jan 7, 1999 </td></tr> <tr> <td>May 2004 </td></tr> <tr> <td>Aug 4, 2004 </td></tr> <tr> <td>5 Dec 1999 </td></tr> <tr> <td>7 Jan 1999 </td></tr> <tr> <td>14 May 2004 </td></tr> <tr> <td>4 Aug 2004 </td></tr> <tr> <td>December 1999 </td></tr> <tr> <td>January 7, 1999 </td></tr> <tr> <td>May 14, 2004 </td></tr> <tr> <td>August 4, 2004 </td></tr> <tr> <td>5 December 1999 </td></tr> <tr> <td>January 1999 </td></tr> <tr> <td>14 May 2004 </td></tr> <tr> <td>4 August 2004 </td></tr></tbody></table> </div> <div class="mw-heading mw-heading3"><h3 id="Year,_month,_day._Using_words_for_months" data-mw-thread-id="h-Year,_month,_day._Using_words_for_months-Date_sorting_problems"><span id="Year.2C_month.2C_day._Using_words_for_months"></span><span data-mw-comment-start="" id="h-Year,_month,_day._Using_words_for_months-Date_sorting_problems"></span>Year, month, day. Using words for months<span data-mw-comment-end="h-Year,_month,_day._Using_words_for_months-Date_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=35" title="Edit section: Year, month, day. Using words for months"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Sorting does not work for this date order. </p> <dl><dd><i><b>data-sort-type=date</b></i></dd> <dd><i><b>data-sort-type=isoDate</b></i></dd></dl> <p>The addition of any <b>data-sort-type</b> to the column header does not help. See examples below. </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Date <p><small>no data-sort-type</small> </p> </th></tr> <tr> <td>2007 January 5 </td></tr> <tr> <td>2007 February 12 </td></tr> <tr> <td>2007 March 9 </td></tr> <tr> <td>2007 April 1 </td></tr> <tr> <td>2007 May 23 </td></tr> <tr> <td>2007 June 29 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="date">Date <p><small>data-sort-type=date</small> </p> </th></tr> <tr> <td>2007 January 5 </td></tr> <tr> <td>2007 February 12 </td></tr> <tr> <td>2007 March 9 </td></tr> <tr> <td>2007 April 1 </td></tr> <tr> <td>2007 May 23 </td></tr> <tr> <td>2007 June 29 </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate">Date <p><small>data-sort-type=isoDate</small> </p> </th></tr> <tr> <td>2007 January 5 </td></tr> <tr> <td>2007 February 12 </td></tr> <tr> <td>2007 March 9 </td></tr> <tr> <td>2007 April 1 </td></tr> <tr> <td>2007 May 23 </td></tr> <tr> <td>2007 June 29 </td></tr></tbody></table> </div> <div class="mw-heading mw-heading3"><h3 id="Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD" data-mw-thread-id="h-Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD-Date_sorting_problems"><span id="Year.2C_month.2C_day._Using_numbers._ISO_date_YYYY-MM-DD"></span><span data-mw-comment-start="" id="h-Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD-Date_sorting_problems"></span>Year, month, day. Using numbers. ISO date YYYY-MM-DD<span data-mw-comment-end="h-Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD-Date_sorting_problems"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=36" title="Edit section: Year, month, day. Using numbers. ISO date YYYY-MM-DD"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>See: <b><a href="/wiki/ISO_date" class="mw-redirect" title="ISO date">ISO date</a>.</b> "±YYYY-MM-DD", with 1 to 4 digits for year "YYYY" from -9999 to 9999. Year by itself is fine. As is the year followed by just the month. Some stuff after the date is allowed. Such as references after the date. To save header space you can add a tooltip to the "Date" column header instead of "year, month, day" below it. See: <a href="/wiki/Template:Tooltip" title="Template:Tooltip">Template:Tooltip</a>. Tooltips have been added to the tables in this section. </p><p>See section higher up: <a href="#Examples_of_datatype_auto_detection._First_5_cells_in_a_column">#Examples of datatype auto detection. First 5 cells in a column</a>. Datatype auto detection is inconsistent. That is why ISO date sorting works best with <i><b><code>data-sort-type=isoDate</code></b></i> added to the column header. It also avoids problems when only one digit is used for the month or day. <a href="/wiki/Leading_zeros" class="mw-redirect" title="Leading zeros">Leading zeros</a> are no longer needed. All tables below have <i><b><code>data-sort-type=isoDate</code></b></i> added to the column headers. </p><p>Remember to leave a space in the wikitext before years that are a negative number. Otherwise, <b><code>|-</code></b> will be used as table formatting instead of <b><code>|</code></b>. </p><p>"<b>c.</b>" stands for <b><a href="https://en.wiktionary.org/wiki/circa" class="extiw" title="wiktionary:circa">circa</a></b> (approximately). "<b>c.</b>" before the date breaks sorting in the first table. Using the <b><span class="nowrap">{{</span><a href="/wiki/Template:Circa" title="Template:Circa">circa</a><span class="nowrap">}}</span></b> template fixes sorting, but only if the <i><b><code>sortable=yes</code></b></i> parameter is added to the template. See: <a href="/wiki/Template:Circa/doc/sortable" title="Template:Circa/doc/sortable">Template:Circa/doc/sortable</a>. See: <a href="#c._for_circa">#c. for circa</a>. </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate"><style data-mw-deduplicate="TemplateStyles:r1038841319">.mw-parser-output .tooltip-dotted{border-bottom:1px dotted;cursor:help}</style><span class="rt-commentedText tooltip tooltip-dotted" title="Year, month, day">Date</span><br/><small>With "<b>c.</b>"<br/>Sorting broken.</small> </th></tr> <tr> <td>-90 </td></tr> <tr> <td>c. 90 </td></tr> <tr> <td>90-7-13 </td></tr> <tr> <td>90-12-5 </td></tr> <tr> <td>1011-08-01<sup style="color:gray">[2]</sup> </td></tr> <tr> <td>c. 207-11<sup style="color:gray">[1]</sup> </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1038841319"><span class="rt-commentedText tooltip tooltip-dotted" title="Year, month, day">Date</span><br/><small>"c." removed.<br/>Sorting works.</small> </th></tr> <tr> <td>-90 </td></tr> <tr> <td>90 </td></tr> <tr> <td>90-7-13 </td></tr> <tr> <td>90-12-5 </td></tr> <tr> <td>1011-08-1<sup style="color:gray">[2]</sup> </td></tr> <tr> <td>207-11<sup style="color:gray">[1]</sup> </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1038841319"><span class="rt-commentedText tooltip tooltip-dotted" title="Year, month, day">Date</span><br/><small><span class="nowrap">{{</span><a href="/wiki/Template:Circa" title="Template:Circa">circa</a><span class="nowrap">}}</span> used.<br/>Sorting works.</small> </th></tr> <tr> <td>-90 </td></tr> <tr> <td><span style="display:none; speak:none;">0090 </span><abbr title="circa">c.</abbr><span style="white-space:nowrap;"> 90</span> </td></tr> <tr> <td>90-7-13 </td></tr> <tr> <td>90-12-5 </td></tr> <tr> <td>1011-08-01<sup style="color:gray">[2]</sup> </td></tr> <tr> <td><span style="display:none; speak:none;">207-11 </span><abbr title="circa">c.</abbr><span style="white-space:nowrap;"> 207-11</span><sup style="color:gray">[1]</sup> </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top; max-width:650px;"> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">data-sort-type</span><span class="o">=</span><span class="s">isoDate</span><span class="w"> </span><span class="p">|</span><span class="gu">{{Tooltip|Date|Year, month, day}}<br><small>{{tl|circa}} used.<br>Sorting works.</small></span> <span class="p">|-</span> <span class="p">|</span> -90 <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">circa</span><span class="p">|</span><span class="nl">sortable</span><span class="o">=</span>yes<span class="p">|</span>90<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span> 90-7-13 <span class="p">|-</span> <span class="p">|</span> 90-12-5 <span class="p">|-</span> <span class="p">|</span> 1011-08-01<span class="p"><</span><span class="nt">sup</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s2">"color:gray"</span><span class="p">></span>[2]<span class="p"></</span><span class="nt">sup</span><span class="p">></span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">circa</span><span class="p">|</span><span class="nl">sortable</span><span class="o">=</span>yes<span class="p">|</span>207-11<span class="p">}}<</span><span class="nt">sup</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s2">"color:gray"</span><span class="p">></span>[1]<span class="p"></</span><span class="nt">sup</span><span class="p">></span> <span class="p">|}</span> </pre></div> </div> <p>Adding BCE, CE, BC, etc. after the date does not break sorting. But <a rel="nofollow" class="external text" href="https://www.grammar-monster.com/lessons/abbreviations_AD_BC_BCE_CE.htm">adding AD before the date</a> breaks sorting. Test additions before and after dates. Additions before the date are almost always a problem. </p> <table> <tbody><tr style="vertical-align:text-top;"> <td> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1038841319"><span class="rt-commentedText tooltip tooltip-dotted" title="Year, month, day">Date</span><br/><small>BCE added after.<br/>Sorting works.</small> </th></tr> <tr> <td>-90 BCE </td></tr> <tr> <td><span style="display:none; speak:none;">0090 </span><abbr title="circa">c.</abbr><span style="white-space:nowrap;"> 90</span> </td></tr> <tr> <td>90-7-13 </td></tr> <tr> <td>90-12-5 </td></tr> <tr> <td>1011-08-1<sup style="color:gray">[2]</sup> </td></tr> <tr> <td><span style="display:none; speak:none;">207-11 </span><abbr title="circa">c.</abbr><span style="white-space:nowrap;"> 207-11</span><sup style="color:gray">[1]</sup> </td></tr></tbody></table> </td> <td> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1038841319"><span class="rt-commentedText tooltip tooltip-dotted" title="Year, month, day">Date</span><br/><small>AD added before.<br/>Sorting broken.</small> </th></tr> <tr> <td>-90 BCE </td></tr> <tr> <td>AD <span style="display:none; speak:none;">0090 </span><abbr title="circa">c.</abbr><span style="white-space:nowrap;"> 90</span> </td></tr> <tr> <td>90-7-13 </td></tr> <tr> <td>90-12-5 </td></tr> <tr> <td>1011-08-1<sup style="color:gray">[2]</sup> </td></tr> <tr> <td><span style="display:none; speak:none;">207-11 </span><abbr title="circa">c.</abbr><span style="white-space:nowrap;"> 207-11</span><sup style="color:gray">[1]</sup> </td></tr></tbody></table> </td></tr></tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Years_BC_are_a_problem" data-mw-thread-id="h-Years_BC_are_a_problem"><span data-mw-comment-start="" id="h-Years_BC_are_a_problem"></span>Years BC are a problem<span data-mw-comment-end="h-Years_BC_are_a_problem"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=37" title="Edit section: Years BC are a problem"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><i><b>Note.</b> See also the section farther down about the date table sorting template. It has additional info about dealing with negative years (BC, BCE).</i></dd></dl> <p>From <a class="external text" href="https://en.wikipedia.org/w/index.php?title=List_of_reported_UFO_sightings&oldid=1141129035">this version</a> of <a href="/wiki/List_of_reported_UFO_sightings" title="List of reported UFO sightings">List of reported UFO sightings</a>. The "Antiquity" section has a table with some hidden notes. Adapted here: </p><p>To sort the dates before AD 1000 you will need one of the following: </p> <ul><li><code>|data-sort-value="XXXX"</code> - Year. Use <a href="/wiki/Leading_zeros" class="mw-redirect" title="Leading zeros">leading zeros</a>, and negative for BC.</li> <li><code>{{Date table sorting|X}}</code> - Use negative for BC. See: <span class="nowrap">{{</span><a href="/wiki/Template:Date_table_sorting" title="Template:Date table sorting">Date table sorting</a><span class="nowrap">}}</span>.</li> <li><code>{{circa|sortable=yes|lk=no|X}}</code> - <span class="nowrap">{{</span><a href="/wiki/Template:Circa" title="Template:Circa">circa</a><span class="nowrap">}}</span> is AD only.</li></ul> <p>The date column it is referring to was pulled out of the larger table, simplified, and placed below. It is sorting correctly. Look at the wikitext to see the methods discussed in the hidden notes. </p> <div style="display:inline-table; vertical-align:top;"> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span><span class="w"> </span> <span class="p">|-</span> <span class="p">!</span><span class="gu">Date</span> <span class="p">|-</span> <span class="p">|</span><span class="na">data-sort-value</span><span class="o">=</span><span class="s">-1440</span><span class="p">|</span>c. 1440 BC <span class="p">|-</span> <span class="p">|{{</span><span class="nt">Date table sorting</span><span class="p">|</span>-218<span class="p">}}</span> <span class="p">|-</span> <span class="p">|{{</span><span class="nt">Date table sorting</span><span class="p">|</span>-76<span class="p">}}</span> <span class="p">|-</span> <span class="p">|{{</span><span class="nt">Date table sorting</span><span class="p">|</span>-7<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span><span class="na">data-sort-value</span><span class="o">=</span><span class="s">0065</span><span class="p">|</span>AD 65 <span class="p">|-</span> <span class="p">|</span><span class="na">data-sort-value</span><span class="o">=</span><span class="s">0196</span><span class="p">|</span>AD 196 <span class="p">|-</span> <span class="p">|</span><span class="na">data-sort-value</span><span class="o">=</span><span class="s">0740</span><span class="p">|</span>AD c. 740 <span class="p">|}</span> </pre></div></div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Date </th></tr> <tr> <td data-sort-value="-1440">c. 1440 BC </td></tr> <tr> <td><span data-sort-value="-999999999782-01-01-0000" style="white-space:nowrap">218 BC</span> </td></tr> <tr> <td><span data-sort-value="-999999999924-01-01-0000" style="white-space:nowrap">76 BC</span> </td></tr> <tr> <td><span data-sort-value="-999999999993-01-01-0000" style="white-space:nowrap">7 BC</span> </td></tr> <tr> <td data-sort-value="0065">AD 65 </td></tr> <tr> <td data-sort-value="0196">AD 196 </td></tr> <tr> <td data-sort-value="0740">AD c. 740 </td></tr></tbody></table> </div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Date_table_sorting_template._Many_date_formats" data-mw-thread-id="h-Date_table_sorting_template._Many_date_formats"><span data-mw-comment-start="" id="h-Date_table_sorting_template._Many_date_formats"></span>Date table sorting template. Many date formats<span data-mw-comment-end="h-Date_table_sorting_template._Many_date_formats"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=38" title="Edit section: Date table sorting template. Many date formats"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><span class="anchor" id="Date_table_sorting_template"></span> The simplest way to format sortable dates in a table is to use the <b><span class="nowrap">{{</span><a href="/wiki/Template:Date_table_sorting" title="Template:Date table sorting">Date table sorting</a><span class="nowrap">}}</span></b> template. A redirect: <b><span class="nowrap">{{</span><a href="/wiki/Template:Dts" class="mw-redirect" title="Template:Dts">dts</a><span class="nowrap">}}</span></b> </p><p>It can be used with many date formats mixed together. Note the many formats used <b><a href="/wiki/List_of_PC_games_(A)" title="List of PC games (A)">here</a>.</b> See <a href="/wiki/Template:Date_table_sorting" title="Template:Date table sorting">Template:Date table sorting</a> for more info. </p><p>See example tables below. They all sort correctly. The wikitext for the first entry in each table in the first row is shown in the table header. </p><p><b>Note:</b> None of the table columns use the <code>data-sort-type=</code> modifier. Using <code>data-sort-type=</code> can sometimes break sorting when used with the template. If you want the column to be narrower, you can use month abbreviations (<i><b>abbr=on</b></i> parameter). You can also allow the text to wrap (<i><b>nowrap=off</b></i> parameter). Use <i><b>format=dmy</b></i> or <i><b>format=mdy</b></i>, etc. to control output format, if desired. </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Date<br/>(Day and month only)<br/><small><code>{{dts|4 Jan}}</code></small> </th></tr> <tr> <td><span data-sort-value="000000002024-01-04-0000" style="white-space:nowrap">4 Jan</span> </td></tr> <tr> <td><span data-sort-value="000000002024-08-28-0000" style="white-space:nowrap">28 Aug</span> </td></tr> <tr> <td><span data-sort-value="000000002024-01-03-0000" style="white-space:nowrap">3 Jan</span> </td></tr> <tr> <td><span data-sort-value="000000002024-08-29-0000" style="white-space:nowrap">29 Aug</span> </td></tr> <tr> <td><span data-sort-value="000000002024-12-14-0000" style="white-space:nowrap">14 Dec</span> </td></tr> <tr> <td><span data-sort-value="000000002024-01-01-0000" style="white-space:nowrap">1 Jan</span> </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Date<br/>(Month and day only)<br/><small><code>{{dts|January 4}}</code></small> </th></tr> <tr> <td><span data-sort-value="000000002024-01-04-0000" style="white-space:nowrap">January 4</span> </td></tr> <tr> <td><span data-sort-value="000000002024-08-28-0000" style="white-space:nowrap">August 28</span> </td></tr> <tr> <td><span data-sort-value="000000002024-01-03-0000" style="white-space:nowrap">January 3</span> </td></tr> <tr> <td><span data-sort-value="000000002024-08-29-0000" style="white-space:nowrap">August 29</span> </td></tr> <tr> <td><span data-sort-value="000000002024-12-14-0000" style="white-space:nowrap">December 14</span> </td></tr> <tr> <td><span data-sort-value="000000002024-01-01-0000" style="white-space:nowrap">January 1</span> </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Date<br/>(Month, day, year)<br/><small><code>{{dts|1990|4|27}}</code></small> </th></tr> <tr> <td><span data-sort-value="000000001990-04-27-0000" style="white-space:nowrap">April 27, 1990</span> </td></tr> <tr> <td><span data-sort-value="000000001989-08-08-0000" style="white-space:nowrap">August 8, 1989</span> </td></tr> <tr> <td><span data-sort-value="000000002006-02-03-0000" style="white-space:nowrap">February 3, 2006</span> </td></tr> <tr> <td><span data-sort-value="000000002006-10-04-0000" style="white-space:nowrap">October 4, 2006</span> </td></tr> <tr> <td><span data-sort-value="000000002004-11-01-0000" style="white-space:nowrap">November 1, 2004</span> </td></tr> <tr> <td><span data-sort-value="000000002004-01-11-0000" style="white-space:nowrap">January 11, 2004</span> </td></tr></tbody></table> </div> <p><br/> </p> <div style="display:inline-table; vertical-align:top;"> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> Dates.<br>Various formats</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>Jan 1980<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>Aug 1981<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>1992<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>August 28 1993<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>1990<span class="p">|</span>4<span class="p">|</span>27<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>1989<span class="p">|</span>8<span class="p">|</span>8<span class="p">}}</span> <span class="p">|}</span> </pre></div> </div> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th>Dates.<br/>Various formats </th></tr> <tr> <td><span data-sort-value="000000001980-01-01-0000" style="white-space:nowrap">Jan 1980</span> </td></tr> <tr> <td><span data-sort-value="000000001981-08-01-0000" style="white-space:nowrap">Aug 1981</span> </td></tr> <tr> <td><span data-sort-value="000000001992-01-01-0000" style="white-space:nowrap">1992</span> </td></tr> <tr> <td><span data-sort-value="000000001993-08-28-0000" style="white-space:nowrap">August 28, 1993</span> </td></tr> <tr> <td><span data-sort-value="000000001990-04-27-0000" style="white-space:nowrap">April 27, 1990</span> </td></tr> <tr> <td><span data-sort-value="000000001989-08-08-0000" style="white-space:nowrap">August 8, 1989</span> </td></tr></tbody></table> </div> <div class="mw-heading mw-heading3"><h3 id="Issues._Years_BC,_etc" data-mw-thread-id="h-Issues._Years_BC,_etc-Date_table_sorting_template._Many_date_formats"><span id="Issues._Years_BC.2C_etc"></span><span data-mw-comment-start="" id="h-Issues._Years_BC,_etc-Date_table_sorting_template._Many_date_formats"></span>Issues. Years BC, etc<span data-mw-comment-end="h-Issues._Years_BC,_etc-Date_table_sorting_template._Many_date_formats"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=39" title="Edit section: Issues. Years BC, etc"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>For years BC, <code>!9937-09-23</code> can be used for -0062-09-23 (62 BC): Simply subtract the year BC from 10,000. </p> <ul><li>See also: <a href="https://bugzilla.wikimedia.org/show_bug.cgi?id=8226" class="extiw" title="bugzilla:8226">bugzilla:8226</a><div style="clear:both;" class=""></div></li></ul> <p>Date sorting works by formatting dates so they can be sorted numerically. For example: </p> <ul><li><code><b>yyyy mm dd</b></code></li></ul> <p>or </p> <ul><li><code><b>2001 07 21</b></code></li></ul> <p>...for 21 July 2001. The <code>display:none</code> style can be used to hide a sortable numeric date before the displayed date. See wikitext of table just below. Alternatively, <span class="nowrap">{{</span><a href="/wiki/Template:Date_table_sorting" title="Template:Date table sorting">Date table sorting</a><span class="nowrap">}}</span> does this automatically, and is recommended in most cases. </p> <table class="wikitable sortable"> <tbody><tr> <th>Displayed </th> <th>What is being sorted </th></tr> <tr> <td><span style="display:none">2006-12-03</span>2006-12-03 </td> <td>2006-12-03 </td></tr> <tr> <td><span style="display:none">0000-03-27</span>0000-03-27 </td> <td>0000-03-27 </td></tr> <tr> <td><span style="display:none">2006-12</span>December 2006 </td> <td>2006-12 </td></tr> <tr> <td><span style="display:none">!9936-04</span>April 64 BC </td> <td>!9936-04 </td></tr> <tr> <td><span style="display:none">!9900-07-13</span>-0099-07-13 </td> <td>!9900-07-13 </td></tr> <tr> <td><span style="display:none">!9937-09-23</span>-0062-09-23 </td> <td>!9937-09-23 </td></tr> <tr> <td><span style="display:none">!9937-10-08</span>-0062-10-08 </td> <td>!9937-10-08 </td></tr> <tr> <td><span style="display:none">!9998-12-21</span>-0001-12-21 </td> <td>!9998-12-21 </td></tr> <tr> <td><span style="display:none">2006-11-08</span>2006-11-08 </td> <td>2006-11-08 </td></tr> <tr> <td><span style="display:none">0304-12-31</span>0304-12-31 </td> <td>0304-12-31 </td></tr> <tr> <td><span style="display:none">2005-05-15</span>2005-05-15 </td> <td>2005-05-15 </td></tr></tbody></table> <p>You can use <span data-sort-value="000000002012-07-07-0000" style="white-space:nowrap">July 7, 2012</span> etc. to get sortable dates. Example, including one date with a different display format: </p> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Rendered result</b> </p> <table class="wikitable sortable"> <tbody><tr> <th>Date </th></tr> <tr> <td><span data-sort-value="000000002012-01-07-0000" style="white-space:nowrap">January 7, 2012</span> </td></tr> <tr> <td><span data-sort-value="000000002012-05-07-0000" style="white-space:nowrap">May 7, 2012</span> </td></tr> <tr> <td><span data-sort-value="000000002012-07-04-0000" style="white-space:nowrap">4 July 2012</span> </td></tr> <tr> <td><span data-sort-value="000000002012-07-07-0000" style="white-space:nowrap">July 7, 2012</span> </td></tr></tbody></table> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p><b>Wiki source</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> Date</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>2012-01-07<span class="p">}}</span> <span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>2012-05-07<span class="p">}}</span> <span class="p">|-</span> <span class="hll"><span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>4 July 2012<span class="p">}}</span> <span class="cm"></span> </span><span class="p">|-</span> <span class="p">|</span> <span class="p">{{</span><span class="nt">dts</span><span class="p">|</span>2012-07-07<span class="p">}}</span> <span class="p">|}</span> </pre></div> </div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Before_year_100._Any_date_format" data-mw-thread-id="h-Before_year_100._Any_date_format"><span data-mw-comment-start="" id="h-Before_year_100._Any_date_format"></span>Before year 100. Any date format<span data-mw-comment-end="h-Before_year_100._Any_date_format"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=40" title="Edit section: Before year 100. Any date format"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1256386598">.mw-parser-output .cot-header-mainspace{background:#F0F2F5;color:inherit}.mw-parser-output .cot-header-other{background:#CCFFCC;color:inherit}@media screen{html.skin-theme-clientpref-night .mw-parser-output .cot-header-mainspace{background:#14181F;color:inherit}html.skin-theme-clientpref-night .mw-parser-output .cot-header-other{background:#003500;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cot-header-mainspace{background:#14181F;color:inherit}html.skin-theme-clientpref-os .mw-parser-output .cot-header-other{background:#003500;color:inherit}}</style> <div style="margin-left:0"> <table class="mw-collapsible mw-archivedtalk mw-collapsed" style="color:inherit; background: transparent; text-align: left; border: 1px solid Silver; margin: 0.2em auto auto; width:100%; clear: both; padding: 1px;"> <tbody><tr> <th class="cot-header-other" style="; font-size:87%; padding:0.2em 0.3em; text-align:center;"><div style="font-size:115%;margin:0 4em">Note: This no longer seems to be working.</div> </th></tr> <tr> <td style="color:inherit; border: solid 1px Silver; padding: 0.6em; background: var(--background-color-base, #fff);"> <p>Sorting can be done via the hidden <b><code>data-sort-value</code></b> using the <a href="/wiki/ISO_date" class="mw-redirect" title="ISO date">ISO date</a>. Combined with <b><code>data-sort-type=isoDate</code></b> </p><p><b>Note:</b> The sorting wikitext is the same for the 2 tables below. <b>Any date format can be shown to the readers.</b> </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate">Date </th></tr> <tr> <td data-sort-value="111-12-05">5 Dec 111 </td></tr> <tr> <td data-sort-value="35-01-07">7 Jan 35 </td></tr> <tr> <td data-sort-value="207-12-05">5 Dec 207 </td></tr> <tr> <td data-sort-value="-111">111 BC </td></tr> <tr> <td data-sort-value="-35-01-07">7 Jan 35 BC </td></tr> <tr> <td data-sort-value="-207-12">Dec 207 BC </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span><span class="w"> </span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">data-sort-type</span><span class="o">=</span><span class="s">isoDate</span><span class="w"> </span><span class="p">|</span><span class="gu"> Date</span> <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"111-12-05"</span><span class="w"> </span><span class="p">|</span> 5 Dec 111 <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"35-01-07"</span><span class="w"> </span><span class="p">|</span> 7 Jan 35 <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"207-12-05"</span><span class="w"> </span><span class="p">|</span> 5 Dec 207 <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"-111"</span><span class="w"> </span><span class="p">|</span> 111 BC <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"-35-01-07"</span><span class="w"> </span><span class="p">|</span> 7 Jan 35 BC <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"-207-12"</span><span class="w"> </span><span class="p">|</span> Dec 207 BC <span class="p">|}</span> </pre></div> </div> <p>The table below uses the same isoDate values for <b><code>data-sort-value</code></b> as the above table. But <b>multiple formats are used for showing the dates to the reader.</b> </p> <div style="display:inline-table; vertical-align:top;"> <table class="wikitable sortable"> <tbody><tr> <th data-sort-type="isoDate">Date </th></tr> <tr> <td data-sort-value="111-12-05">5 Dec 111 </td></tr> <tr> <td data-sort-value="35-01-07">7 January 35 </td></tr> <tr> <td data-sort-value="207-12-05">Dec 5, 207 </td></tr> <tr> <td data-sort-value="-111">about 111 BC </td></tr> <tr> <td data-sort-value="-35-01-07">Jan 7, 35 BC </td></tr> <tr> <td data-sort-value="-207-12">December 207 BC </td></tr></tbody></table> </div> <div style="display:inline-table; vertical-align:top;"> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">data-sort-type</span><span class="o">=</span><span class="s">isoDate</span><span class="w"> </span><span class="p">|</span><span class="gu"> Date</span> <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"111-12-05"</span><span class="w"> </span><span class="p">|</span> 5 Dec 111 <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"35-01-07"</span><span class="w"> </span><span class="p">|</span> 7 January 35 <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"207-12-05"</span><span class="w"> </span><span class="p">|</span> Dec 5, 207 <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"-111"</span><span class="w"> </span><span class="p">|</span> about 111 BC <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"-35-01-07"</span><span class="w"> </span><span class="p">|</span> Jan 7, 35 BC <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">data-sort-value</span><span class="o">=</span><span class="s2">"-207-12"</span><span class="w"> </span><span class="p">|</span> December 207 BC <span class="p">|}</span> </pre></div> </div> </td></tr></tbody></table></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Background_colors_in_sortable_headers" data-mw-thread-id="h-Background_colors_in_sortable_headers"><span data-mw-comment-start="" id="h-Background_colors_in_sortable_headers"></span>Background colors in sortable headers<span data-mw-comment-end="h-Background_colors_in_sortable_headers"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=41" title="Edit section: Background colors in sortable headers"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Adding color with the shorthand<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>a<span class="cite-bracket">]</span></a></sup> <b><code>"background:...;"</code></b> property in a header may cause that column to lose its sorting button – see <a href="https://phabricator.wikimedia.org/T33755" class="extiw" title="phab:T33755">phab:T33755</a>. Example with the "Name" header: </p> <table class="wikitable sortable"> <tbody><tr> <th style="background:navajowhite">Name</th> <th><a href="/wiki/Surname" title="Surname">Surname</a></th> <th>Height </th></tr> <tr> <td>John</td> <td>Smith</td> <td>1.85 </td></tr> <tr> <td>Ron</td> <td>Ray</td> <td>1.89 </td></tr> <tr> <td>Mario</td> <td>Bianchi</td> <td>1.72 </td></tr> <tr class="sortbottom"> <td colspan="2">Average:</td> <td>1.82 </td></tr></tbody></table> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p>Use the more specific <b><code>style="background-color:...;"</code></b><br/> to make things work correctly. Example: </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable sortable"</span> <span class="p">|-</span> <span class="hll"><span class="p">!</span><span class="na">style</span><span class="o">=</span><span class="s2">"background-color:navajowhite"</span><span class="w"> </span><span class="p">|</span><span class="gu"> Name</span> </span><span class="hll"><span class="p">!</span><span class="na">style</span><span class="o">=</span><span class="s2">"background-color:navajowhite"</span><span class="w"> </span><span class="p">|</span><span class="gu"> [[Surname]]</span> </span><span class="hll"><span class="p">!</span><span class="na">style</span><span class="o">=</span><span class="s2">"background-color:navajowhite"</span><span class="w"> </span><span class="p">|</span><span class="gu"> Height</span> </span><span class="p">|-</span> <span class="p">|</span>John <span class="p">|</span>Smith <span class="p">|</span>1.85 <span class="p">|-</span> <span class="p">|</span>Ron <span class="p">|</span>Ray <span class="p">|</span>1.89 <span class="p">|-</span> <span class="p">|</span>Mario <span class="p">|</span>Bianchi <span class="p">|</span>1.72 <span class="p">|-</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"sortbottom"</span> <span class="p">|</span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span>Average: <span class="p">|</span>1.82 <span class="p">|}</span> </pre></div> </div> <div style="display:inline-table; border: 2px solid lime; padding: 0.5em;"> <p>Produces this sortable table: </p> <table class="wikitable sortable"> <tbody><tr> <th style="background-color:navajowhite">Name </th> <th style="background-color:navajowhite"><a href="/wiki/Surname" title="Surname">Surname</a> </th> <th style="background-color:navajowhite">Height </th></tr> <tr> <td>John</td> <td>Smith</td> <td>1.85 </td></tr> <tr> <td>Ron</td> <td>Ray</td> <td>1.89 </td></tr> <tr> <td>Mario</td> <td>Bianchi</td> <td>1.72 </td></tr> <tr class="sortbottom"> <td colspan="2">Average:</td> <td>1.82 </td></tr></tbody></table> </div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Tips_and_tricks" data-mw-thread-id="h-Tips_and_tricks"><span data-mw-comment-start="" id="h-Tips_and_tricks"></span>Tips and tricks<span data-mw-comment-end="h-Tips_and_tricks"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=42" title="Edit section: Tips and tricks"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="Padding" data-mw-thread-id="h-Padding-Tips_and_tricks"><span data-mw-comment-start="" id="h-Padding-Tips_and_tricks"></span>Padding<span data-mw-comment-end="h-Padding-Tips_and_tricks"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=43" title="Edit section: Padding"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Sometimes entries are padded on the left for alignment purposes. This can adversely affect how they are sorted. </p> <div class="mw-heading mw-heading4"><h4 id="Non-breaking_spaces" data-mw-thread-id="h-Non-breaking_spaces-Padding"><span data-mw-comment-start="" id="h-Non-breaking_spaces-Padding"></span>Non-breaking spaces<span data-mw-comment-end="h-Non-breaking_spaces-Padding"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=44" title="Edit section: Non-breaking spaces"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The effect of left-padding with <a href="/wiki/Non-breaking_space" title="Non-breaking space">non-breaking space</a> codes <code>&nbsp;</code> which render as blank spaces, depends on the browser: in IE they are (unlike actual blank spaces) counted for sorting as leading blank spaces, so in a list of numbers with text (for which the alphabetic sorting mode applies) they could be used to equalize the number of characters before the explicit or implicit decimal separator. However, in Firefox they are ignored for the purpose of sorting. </p> <table class="wikitable sortable"> <tbody><tr> <th>Sorting using <code>&nbsp;</code> works on IE but not on Firefox </th> <th>Name </th></tr> <tr> <td>100.3 FM </td> <td>Third </td></tr> <tr> <td> 89.5 FM </td> <td>First </td></tr> <tr> <td>107.3 FM </td> <td>Fourth </td></tr> <tr> <td> 95.3 FM </td> <td>Second </td></tr></tbody></table> <p>See also <a href="/wiki/Talk:List_of_U.S._states_and_territories_by_population/Archive_1#Sortable_Table" title="Talk:List of U.S. states and territories by population/Archive 1">Talk:List of U.S. states and territories by population/Archive 1#Sortable Table</a>. </p> <div class="mw-heading mw-heading4"><h4 id="Padding_with_zeros" data-mw-thread-id="h-Padding_with_zeros-Padding"><span data-mw-comment-start="" id="h-Padding_with_zeros-Padding"></span>Padding with zeros<span data-mw-comment-end="h-Padding_with_zeros-Padding"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=45" title="Edit section: Padding with zeros"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Example: </p> <ul><li>000156</li></ul> <p><style data-mw-deduplicate="TemplateStyles:r886049734">.mw-parser-output .monospaced{font-family:monospace,monospace}</style><span class="monospaced">Formatnum</span> can be combined with <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886049734"><span class="monospaced">padleft</span>: </p><p><b>Integer</b> </p> <ul><li><code><code class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><span class="p">{{</span><span class="nf">formatnum</span><span class="p">:{{</span><span class="nf">padleft</span><span class="p">:</span>299792458<span class="p">|</span>16<span class="p">|</span>0<span class="p">}}}}</span></code> gives:</code> <dl><dd>0,000,000,299,792,458</dd></dl></li></ul> <p><b>Real</b> </p> <ul><li><code><code class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><span class="p">{{</span><span class="nf">formatnum</span><span class="p">:{{</span><span class="nf">padleft</span><span class="p">:{{</span><span class="nf">#expr</span><span class="p">:</span>((299792458.056 - .5) round 0)<span class="p">}}|</span>16<span class="p">|</span>0<span class="p">}}}}</span>.<span class="p">{{</span><span class="nf">padleft</span><span class="p">:{{</span><span class="nf">#expr</span><span class="p">:</span>(1000000*(299792458.056 - ((299792458.056 - .5) round 0))) round 0<span class="p">}}|</span>6<span class="p">|</span>0<span class="p">}}</span></code> gives:</code> <dl><dd>0,000,000,299,792,458.056000</dd></dl></li></ul> <div class="mw-heading mw-heading3"><h3 id="Controlling_sorting_and_display" data-mw-thread-id="h-Controlling_sorting_and_display-Tips_and_tricks"><span data-mw-comment-start="" id="h-Controlling_sorting_and_display-Tips_and_tricks"></span>Controlling sorting and display<span data-mw-comment-end="h-Controlling_sorting_and_display-Tips_and_tricks"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=46" title="Edit section: Controlling sorting and display"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Text undesired for sorting but needed for display: </p> <ul><li>In <b>numeric</b> sorting mode, text breaks numerical sorting whether the text is before or after the number. Sorting then becomes alphanumeric. Empty cell is treated as "zero" when sorting numerically.</li> <li>In <b>date</b> sorting mode, this text needs to be put in a separate column; in the case of a cell containing a range of dates or numbers (e.g. from .. to ..), text in surplus of what is required for sorting is put in the extra column. If the first part of the text is used for sorting, then the extra column needs to be the following one; conversely, if the last part of the text is used for sorting, then the extra column needs to be the previous one; depending on the table format, this dividing of an item over two cells may look ugly.</li> <li>In <b>alphabetic</b> sorting, any footnotes etc. do not require a separate column; they can simply be put at the end of the element.</li></ul> <p>Text undesired for display but needed for sorting: </p> <ul><li>can be put as hidden text in the column to be sorted</li></ul> <p>Combining the two, we can have displayed text independent of text used for sorting, by fully hiding the latter, and fully putting the former in a separate column (in date sorting mode and numeric sorting mode) or in the same column after the hidden text (in alphabetic sorting). Fully putting the displayed text in a separate column may look ugly if it is not done consistently for a whole column, but only for elements that require this (e.g. if most entries in a column are single numbers, but some are ranges). </p> <div class="mw-heading mw-heading3"><h3 id="Sorting_with_increase/decrease/steady_templates" data-mw-thread-id="h-Sorting_with_increase/decrease/steady_templates-Tips_and_tricks"><span id="Sorting_with_increase.2Fdecrease.2Fsteady_templates"></span><span data-mw-comment-start="" id="h-Sorting_with_increase/decrease/steady_templates-Tips_and_tricks"></span>Sorting with increase/decrease/steady templates<span data-mw-comment-end="h-Sorting_with_increase/decrease/steady_templates-Tips_and_tricks"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=47" title="Edit section: Sorting with increase/decrease/steady templates"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <table class="wikitable sortable floatright"> <tbody><tr> <th>Example</th> <th>Without key</th> <th>With key </th></tr> <tr> <td>Apple</td> <td><span typeof="mw:File"><span title="Increase"><img alt="Increase" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/11px-Increase2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/17px-Increase2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/22px-Increase2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span>10</td> <td><span typeof="mw:File"><span title="10"><img alt="10" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/11px-Increase2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/17px-Increase2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/22px-Increase2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span>10 </td></tr> <tr> <td>Banana</td> <td><span typeof="mw:File"><span title="Increase"><img alt="Increase" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/11px-Increase2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/17px-Increase2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/22px-Increase2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span>2</td> <td><span typeof="mw:File"><span title="2"><img alt="2" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/11px-Increase2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/17px-Increase2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Increase2.svg/22px-Increase2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span>2 </td></tr> <tr> <td>Cherry</td> <td><span typeof="mw:File"><span title="Decrease"><img alt="Decrease" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Decrease2.svg/11px-Decrease2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Decrease2.svg/17px-Decrease2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Decrease2.svg/22px-Decrease2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span>1</td> <td><span typeof="mw:File"><span title="-1"><img alt="-1" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Decrease2.svg/11px-Decrease2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Decrease2.svg/17px-Decrease2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Decrease2.svg/22px-Decrease2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span>1 </td></tr> <tr> <td>Durian</td> <td><span typeof="mw:File"><span title="Steady"><img alt="Steady" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/Steady2.svg/11px-Steady2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/Steady2.svg/17px-Steady2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/96/Steady2.svg/22px-Steady2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span></td> <td><span typeof="mw:File"><span><img alt="0" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/Steady2.svg/11px-Steady2.svg.png" decoding="async" width="11" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/Steady2.svg/17px-Steady2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/96/Steady2.svg/22px-Steady2.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span> </td></tr></tbody></table> <p>To enable sorting of cells with <a href="/wiki/Template:Increase" title="Template:Increase">Template:Increase</a>, <a href="/wiki/Template:Decrease" title="Template:Decrease">Template:Decrease</a> or <a href="/wiki/Template:Steady" title="Template:Steady">Template:Steady</a>, add a sort key, e.g. <code>{{<a href="/wiki/Template:Increase" title="Template:Increase">increase</a>|2}}</code>2, <code>{{<a href="/wiki/Template:Decrease" title="Template:Decrease">decrease</a>|-1}}</code>1 or <code>{{<a href="/wiki/Template:Steady" title="Template:Steady">steady</a>|0}}</code>. To fix an existing table, use <i>Search and replace</i> (right icon in the Advanced toolbar) with <i>Treat search string as a regular expression</i> selected to do the following replacements: </p> <dl><dd><table class="wikitable"> <tbody><tr> <th>Search for</th> <th>Replace with </th></tr> <tr> <td><code>(\{\{increase)(\}\})([0-9]*)</code></td> <td><code class="mw-highlight mw-highlight-lang-text mw-content-ltr" dir="ltr">$1|$3$2$3</code> </td></tr> <tr> <td><code>(\{\{decrease)(\}\})([0-9]*)</code></td> <td><code class="mw-highlight mw-highlight-lang-text mw-content-ltr" dir="ltr">$1|-$3$2$3</code> </td></tr> <tr> <td><code>(\{\{steady)(\}\})</code></td> <td><code class="mw-highlight mw-highlight-lang-text mw-content-ltr" dir="ltr">$1|0$2</code> </td></tr></tbody></table></dd></dl> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Maintaining_tables_sorted_alphabetically_or_by_rank" data-mw-thread-id="h-Maintaining_tables_sorted_alphabetically_or_by_rank"><span data-mw-comment-start="" id="h-Maintaining_tables_sorted_alphabetically_or_by_rank"></span>Maintaining tables sorted alphabetically or by rank<span data-mw-comment-end="h-Maintaining_tables_sorted_alphabetically_or_by_rank"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=48" title="Edit section: Maintaining tables sorted alphabetically or by rank"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>It used to be difficult to maintain tables in rank order, and to keep the numbering correct. That is no longer true. <b><a href="/wiki/Template:Static_row_numbers" title="Template:Static row numbers">Template:Static row numbers</a></b> renumbers the row numbers after every change in row order. And after every addition or deletion of rows. </p> <div class="mw-heading mw-heading3"><h3 id="Putting_a_table_in_initial_alphabetical_order" data-mw-thread-id="h-Putting_a_table_in_initial_alphabetical_order-Maintaining_tables_sorted_alphabetically_or_by_rank"><span data-mw-comment-start="" id="h-Putting_a_table_in_initial_alphabetical_order-Maintaining_tables_sorted_alphabetically_or_by_rank"></span>Putting a table in initial alphabetical order<span data-mw-comment-end="h-Putting_a_table_in_initial_alphabetical_order-Maintaining_tables_sorted_alphabetically_or_by_rank"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=49" title="Edit section: Putting a table in initial alphabetical order"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><span id="initial_alphabetical_order"></span> </p> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Further information: <a href="/wiki/Help:Creating_tables#Tables_and_visual_editor" title="Help:Creating tables">Help:Creating tables § Tables and visual editor</a></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">See also: <a href="https://phabricator.wikimedia.org/T240114" class="extiw" title="phab:T240114">Phab:T240114</a></div> <p>There are fast and slow ways to do this. Unfortunately, the <a href="/wiki/Wikipedia:VE" class="mw-redirect" title="Wikipedia:VE">Visual Editor</a> does not have a fast way to quickly alphabetize a table. You can manually move rows around one at a time. Click on a cell in a row. Then click on the arrow that shows up at the left of the row. Then click on "move above" or "move below" as needed. If this is buggy or is not working, the rows can be moved around in the wikitext by cutting and pasting rows in the wikitext. </p><p><b>A fast way</b> is to launch free <b><a href="/wiki/LibreOffice_Calc" title="LibreOffice Calc">LibreOffice Calc</a>,</b> or <a href="/wiki/List_of_spreadsheet_software" title="List of spreadsheet software">another spreadsheet program</a>. To see how go to <b><a href="/wiki/Help:Creating_tables#Sort._Spreadsheet_&_VE" title="Help:Creating tables">Help:Creating tables#Sort. Spreadsheet & VE</a>.</b> For more info see <a href="https://commons.wikimedia.org/wiki/Commons:Convert_tables_and_charts_to_wiki_code_or_image_files" class="extiw" title="commons:Commons:Convert tables and charts to wiki code or image files">Commons:Convert tables and charts to wiki code or image files</a>. </p><p><b>There is another way</b> to alphabetize a table, and it keeps all the styling and flag links that a spreadsheet may remove. One can use <b>NoteTab Light</b> (freeware version of NoteTab). But for this to work, all the wikitext for a row must be on one line. That means the cells in that row are separated by double bars <span style="font-size:120%"><b><code>||</code></b></span>. </p><p>To alphabetize the list by the first column paste the table wikitext into a new NoteTab Light page. Select the rows you want to alphabetize. Then click on the "modify" menu, then "lines", then "sort", and then "ascending". That will put "A" at the top and "Z" at the bottom. </p><p>Then put back <span style="font-size:120%"><b><code>|-</code></b></span> (wikitext for row) between each line. Do that via find-and-replace by replacing <span style="font-size:120%"><b><code>^p</code></b></span> with <span style="font-size:120%"><b><code>^p|-^p</code></b></span> </p> <dl><dd><span style="font-size:120%"><b><code>^p</code></b></span> is the underlying text editor code for line breaks in NoteTab.</dd> <dd><span style="font-size:120%"><b><code>|-</code></b></span> is the wikitext for a table row.</dd></dl> <p>If there are blank lines between the entries replace <span style="font-size:120%"><b><code>^p^p</code></b></span> with <span style="font-size:120%"><b><code>^p|-^p</code></b></span> </p><p>Copy the wikitext and paste it back into the article. Save the page. </p> <div class="mw-heading mw-heading3"><h3 id="Initial_alphabetical_sort_versus_initial_sort_by_rank_order" data-mw-thread-id="h-Initial_alphabetical_sort_versus_initial_sort_by_rank_order-Maintaining_tables_sorted_alphabetically_or_by_rank"><span data-mw-comment-start="" id="h-Initial_alphabetical_sort_versus_initial_sort_by_rank_order-Maintaining_tables_sorted_alphabetically_or_by_rank"></span>Initial alphabetical sort versus initial sort by rank order<span data-mw-comment-end="h-Initial_alphabetical_sort_versus_initial_sort_by_rank_order-Maintaining_tables_sorted_alphabetically_or_by_rank"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=50" title="Edit section: Initial alphabetical sort versus initial sort by rank order"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>It is a good idea to keep lists and tables in some kind of initial non-random sort order. It no longer matters what method you choose. <b><a href="/wiki/Template:Static_row_numbers" title="Template:Static row numbers">Template:Static row numbers</a></b> will maintain row numbering automatically no matter what changes you make to the row order. </p> <div class="mw-heading mw-heading4"><h4 id="Removing_an_old_rank_column_(1,2,3)_from_a_table" data-mw-thread-id="h-Removing_an_old_rank_column_(1,2,3)_from_a_table-Initial_alphabetical_sort_versus_initial_sort_by_rank_order"><span id="Removing_an_old_rank_column_.281.2C2.2C3.29_from_a_table"></span><span data-mw-comment-start="" id="h-Removing_an_old_rank_column_(1,2,3)_from_a_table-Initial_alphabetical_sort_versus_initial_sort_by_rank_order"></span>Removing an old rank column (1,2,3) from a table<span data-mw-comment-end="h-Removing_an_old_rank_column_(1,2,3)_from_a_table-Initial_alphabetical_sort_versus_initial_sort_by_rank_order"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=51" title="Edit section: Removing an old rank column (1,2,3) from a table"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>You can remove the rank column cells quickly. It is much easier now with the table editor in the <a href="/wiki/VisualEditor" title="VisualEditor">VisualEditor</a>. Click on the header in the column you want to delete. An arrow will show up at the top of the column. Click the arrow, and then "delete column". </p><p>Then let <b><a href="/wiki/Template:Static_row_numbers" title="Template:Static row numbers">Template:Static row numbers</a></b> create the row number column. </p> <div class="mw-heading mw-heading3"><h3 id="Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)" data-mw-thread-id="h-Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)-Maintaining_tables_sorted_alphabetically_or_by_rank"><span id="Auto-ranking_or_adding_a_row_numbering_column_.281.2C2.2C3.29"></span><span data-mw-comment-start="" id="h-Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)-Maintaining_tables_sorted_alphabetically_or_by_rank"></span>Auto-ranking or adding a row numbering column (1,2,3)<span data-mw-comment-end="h-Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)-Maintaining_tables_sorted_alphabetically_or_by_rank"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=52" title="Edit section: Auto-ranking or adding a row numbering column (1,2,3)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There are <a href="/wiki/Wikipedia:Phabricator" class="mw-redirect" title="Wikipedia:Phabricator">Phabricator</a> threads asking for a way to easily add static row numbers to tables. See <b><a href="https://phabricator.wikimedia.org/T42618" class="extiw" title="phab:T42618">phab:T42618</a>.</b> It supersedes <b><a href="https://phabricator.wikimedia.org/T42634" class="extiw" title="phab:T42634">phab:T42634</a>.</b> </p><p>In the meantime there is <b><a href="/wiki/Template:Static_row_numbers" title="Template:Static row numbers">Template:Static row numbers</a>.</b> It is easy to use now. It is a template to automatically add row numbers to sortable tables. The row numbers will not be sorted when columns of data are sorted. A possible note to add above a table: <i><b>Row numbers</b> are static. Other columns are sortable. This allows ranking of any column.</i> </p><p>See <a class="external text" href="https://en.wikipedia.org/wiki/Special:WhatLinksHere?target=Template%3AStatic+row+numbers&namespace=&hidelinks=1">list of articles</a> transcluding <code>{{<a href="/wiki/Template:Static_row_numbers" title="Template:Static row numbers">static row numbers</a>}}</code>. See <a class="external text" href="https://templatecount.toolforge.org/index.php?lang=en&namespace=10&name=static+row+numbers#bottom">transclusion count</a>. </p><p>It has some subtemplates that work with it. Go to <span class="nowrap">{{</span><a href="/wiki/Template:Static_row_numbers" title="Template:Static row numbers">static row numbers</a><span class="nowrap">}}</span> for more details. </p><p>To see the template in use: <a href="/wiki/List_of_U.S._states_and_territories_by_incarceration_and_correctional_supervision_rate" title="List of U.S. states and territories by incarceration and correctional supervision rate">List of U.S. states and territories by incarceration and correctional supervision rate</a>. </p><p>Note that <b><code>style=max-width:Xem</code></b> is selectively used to narrow columns with wordy header text without using breaks <br>. Header breaks annoy people using <a href="/wiki/Screen_readers" class="mw-redirect" title="Screen readers">screen readers</a> due to the pauses. </p><p>The selective use of <i><b><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">max-width</a></b></i> allows the state names to spread out, and stay on one row each if the screen is wide enough. This allows easier scanning down or across the rows. Yet when the screen becomes narrower and narrower, the state names will eventually wrap. This is good for cell phones. Use <b><a href="/wiki/Em_unit" class="mw-redirect" title="Em unit">em unit</a></b> settings instead of <i>px</i>. <i>Em</i> units expand in width as the font size is increased. </p><p>Be sure to check both mobile and desktop views (links at bottom of page). Check to see that header rows aren't being given a row number. Also check that the <i>max-width</i> settings aren't too tight. Mobile view may need a slightly larger <i>max-width</i> setting for some columns. And different desktop browsers, and different settings for them, can make some max-width settings cause some column header text to overlap into the adjacent column. So it is usually good to add some extra <i>em</i> units to the max-width settings. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Alphabetic_sorting_order" data-mw-thread-id="h-Alphabetic_sorting_order"><span data-mw-comment-start="" id="h-Alphabetic_sorting_order"></span>Alphabetic sorting order<span data-mw-comment-end="h-Alphabetic_sorting_order"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=53" title="Edit section: Alphabetic sorting order"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><b>data-sort-type:text</b> - Sort the following table to see an example of the alphabetic sort order. </p><p>Note that sorting is case-insensitive: the two-character entries such as A1 demonstrate that A and a are at the same position. </p> <table class="wikitable sortable"> <tbody><tr> <th>Test </th></tr> <tr> <td>! </td></tr> <tr> <td>" </td></tr> <tr> <td># </td></tr> <tr> <td>$ </td></tr> <tr> <td>% </td></tr> <tr> <td>& </td></tr> <tr> <td>' </td></tr> <tr> <td>( </td></tr> <tr> <td>) </td></tr> <tr> <td>* </td></tr> <tr> <td>+ </td></tr> <tr> <td>, </td></tr> <tr> <td>- </td></tr> <tr> <td>. </td></tr> <tr> <td>/ </td></tr> <tr> <td>0 </td></tr> <tr> <td>9 </td></tr> <tr> <td>: </td></tr> <tr> <td>; </td></tr> <tr> <td>< </td></tr> <tr> <td>= </td></tr> <tr> <td>> </td></tr> <tr> <td>? </td></tr> <tr> <td>@ </td></tr> <tr> <td>[ </td></tr> <tr> <td>\ </td></tr> <tr> <td>] </td></tr> <tr> <td>^ </td></tr> <tr> <td>_ </td></tr> <tr> <td>' </td></tr> <tr> <td>A </td></tr> <tr> <td>Z </td></tr> <tr> <td>a </td></tr> <tr> <td>z </td></tr> <tr> <td>A1 </td></tr> <tr> <td>Z1 </td></tr> <tr> <td>a1 </td></tr> <tr> <td>z1 </td></tr> <tr> <td>{ </td></tr> <tr> <td>| </td></tr> <tr> <td>} </td></tr> <tr> <td>~ </td></tr> <tr> <td>— </td></tr> <tr> <td>É </td></tr> <tr> <td>é </td></tr> <tr> <td>É1 </td></tr> <tr> <td>é1 </td></tr> <tr> <td>† </td></tr></tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Numerical_sorting_order_examples" data-mw-thread-id="h-Numerical_sorting_order_examples"><span data-mw-comment-start="" id="h-Numerical_sorting_order_examples"></span>Numerical sorting order examples<span data-mw-comment-end="h-Numerical_sorting_order_examples"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=54" title="Edit section: Numerical sorting order examples"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><b>data-sort-type:number</b> - Sort the following table to see an example of the numerical sort order. </p> <table class="wikitable sortable"> <caption>mixed notations </caption> <tbody><tr> <th>Test </th></tr> <tr> <td>1.4285714285714E+17 </td></tr> <tr> <td>1000000000000000000 </td></tr> <tr> <td>-1000000000000000000 </td></tr> <tr> <td>.0000000000000000001 </td></tr> <tr> <td>-.0000000000000000001 </td></tr> <tr> <td>-1.4285714285714E+17 </td></tr> <tr> <td>1.4285714285714E-13 </td></tr> <tr> <td>-1.4285714285714E-13 </td></tr> <tr> <td>89 123 456 788 </td></tr> <tr> <td>89,123,456,789 </td></tr> <tr> <td>14 </td></tr> <tr> <td>-14 </td></tr> <tr> <td>11 </td></tr> <tr> <td>-12 (retrograde) </td></tr> <tr> <td>12 or 13 </td></tr> <tr> <td>12 (?) </td></tr> <tr> <td>c. 12 </td></tr> <tr> <td>12 (approx.) </td></tr> <tr> <td>? </td></tr> <tr> <td>333 </td></tr> <tr> <td>1e10 </td></tr> <tr> <td>e 9 </td></tr> <tr> <td>e 80 </td></tr> <tr> <td>e 70 </td></tr> <tr> <td>e 600 </td></tr> <tr> <td>999e9 </td></tr> <tr> <td>88e80 </td></tr> <tr> <td>7e270 </td></tr> <tr> <td>999e-9 </td></tr> <tr> <td>88e-80 </td></tr> <tr> <td>7e-270 </td></tr> <tr> <td>-999e9 </td></tr> <tr> <td>−999e9 </td></tr> <tr> <td>-88e80 </td></tr> <tr> <td>-7e270 </td></tr> <tr> <td>-999e-9 </td></tr> <tr> <td>-88e-80 </td></tr> <tr> <td>-7e-270 </td></tr> <tr> <td>e3 </td></tr> <tr> <td>-e3 </td></tr> <tr> <td>1e3 </td></tr> <tr> <td>e9 </td></tr> <tr> <td>e80 </td></tr> <tr> <td>e270 </td></tr> <tr> <td>6e11 </td></tr> <tr> <td>8e11 </td></tr></tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="See_also" data-mw-thread-id="h-See_also"><span data-mw-comment-start="" id="h-See_also"></span>See also<span data-mw-comment-end="h-See_also"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=55" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><span class="nowrap">{{</span><a href="/wiki/Template:Sortname" title="Template:Sortname">Sortname</a><span class="nowrap">}}</span> – sorting by surname without placing first name and surname in two separate columns</li> <li><a href="https://meta.wikimedia.org/wiki/Help:Sorting" class="extiw" title="m:Help:Sorting">m:Help:Sorting</a> – general help page of this functionality (Not Wikipedia specific)</li> <li><a href="/wiki/Help:Collapsing#Sortable_tables" class="mw-redirect" title="Help:Collapsing">Sortable collapsible table</a></li> <li><span class="plainlinks"><a href="/wiki/Template:Dts" class="mw-redirect" title="Template:Dts">Template:dts</a> <span style="font-size:85%;">(<a href="/wiki/Special:WhatLinksHere/Template:dts" title="Special:WhatLinksHere/Template:dts">backlinks</a> <a class="external text" href="https://en.wikipedia.org/w/index.php?title=Template:Dts&action=edit">edit</a>)</span></span> – sorting a table by a date column, while following <a href="/wiki/Wikipedia:Manual_of_Style_(dates_and_numbers)#Dates_containing_a_month_and_a_day" class="mw-redirect" title="Wikipedia:Manual of Style (dates and numbers)">Wikipedia:Manual of Style (dates and numbers)#Dates containing a month and a day</a> for display</li> <li><a href="/wiki/Category:Sorting_templates" title="Category:Sorting templates">Category:Sorting templates</a> – all templates that provide functionality related to sorting.</li> <li><a href="https://www.organicdesign.co.nz/How_to_put_zebra_stripes_on_sortable_wiki_tables" class="extiw" title="organicdesign:How to put zebra stripes on sortable wiki tables">How to put zebra stripes on sortable wiki tables</a></li> <li><a href="https://commons.wikimedia.org/wiki/Category:Table_sort_icons" class="extiw" title="commons:Category:Table sort icons">Commons: Category:Table sort icons</a> – useful in sorting notes (for example: <span typeof="mw:File"><a href="/wiki/File:Sort_both_small.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Sort_both_small.svg/10px-Sort_both_small.svg.png" decoding="async" width="10" height="11" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Sort_both_small.svg/15px-Sort_both_small.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Sort_both_small.svg/20px-Sort_both_small.svg.png 2x" data-file-width="8" data-file-height="9"/></a></span>)</li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Notes" data-mw-thread-id="h-Notes"><span data-mw-comment-start="" id="h-Notes"></span>Notes<span data-mw-comment-end="h-Notes"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=56" title="Edit section: Notes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist reflist-lower-alpha"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text">Shorthand <a href="/wiki/CSS" title="CSS">CSS</a> properties allow several sub-properties to be set by a single property and "when values are omitted from a shorthand form, unless otherwise defined, each 'missing' sub-property is assigned its [default] value. This means that a shorthand property declaration always sets all of its sub-properties, even those that are not explicitly set. Carelessly used, this might result in inadvertently resetting some sub-properties." Certain required CSS background properties set on sortable table headers could be overruled by background rules stated on a per-table basis.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></span> </li> </ol></div></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="References" data-mw-thread-id="h-References"><span data-mw-comment-start="" id="h-References"></span>References<span data-mw-comment-end="h-References"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Help:Sortable_tables&action=edit&section=57" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239543626"><div class="reflist"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20221211101455/https://drafts.csswg.org/css-cascade-4/#shorthand-property">"CSS Cascading and Inheritance Level 4: Shorthand Properties"</a>. <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a>. October 10, 2022. Archived from <a rel="nofollow" class="external text" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property">the original</a> on December 11, 2022<span class="reference-accessdate">. Retrieved <span class="nowrap">December 19,</span> 2022</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=CSS+Cascading+and+Inheritance+Level+4%3A+Shorthand+Properties&rft.pub=W3C&rft.date=2022-10-10&rft_id=https%3A%2F%2Fdrafts.csswg.org%2Fcss-cascade-4%2F%23shorthand-property&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHelp%3ASortable+tables" class="Z3988"></span></span> </li> </ol></div></div> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="Wikipedia_technical_help" style="padding:3px"><table class="nowraplinks hlist mw-collapsible mw-collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2" style="text-align: center;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Wikipedia_technical_help" title="Template:Wikipedia technical help"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Wikipedia_technical_help" title="Template talk:Wikipedia technical help"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Wikipedia_technical_help" title="Special:EditPage/Template:Wikipedia technical help"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Wikipedia_technical_help" style="font-size:114%;margin:0 4em"><a href="/wiki/Help:Directory#Technical_help" title="Help:Directory">Wikipedia technical help</a></div></th></tr><tr><td class="navbox-abovebelow" colspan="2" style="text-align: center;"><div><b>Get personal technical help at <a href="/wiki/Wikipedia:Teahouse" title="Wikipedia:Teahouse">the Teahouse</a>, <a href="/wiki/Wikipedia:Help_desk" title="Wikipedia:Help desk">help desk</a>, <a href="/wiki/Wikipedia:Village_pump_(technical)" title="Wikipedia:Village pump (technical)">village pump (technical)</a>, <a href="/wiki/Help:Introduction_to_talk_pages/1" title="Help:Introduction to talk pages/1">talk pages</a> or <a href="/wiki/Wikipedia:IRC" title="Wikipedia:IRC">IRC</a>.</b></div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:FAQ/Technical" title="Wikipedia:FAQ/Technical">General<br/>technical help</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:Browser_notes" title="Wikipedia:Browser notes">Browser notes</a> <ul><li><a href="/wiki/Wikipedia:Bypass_your_cache" title="Wikipedia:Bypass your cache">Bypass cache</a></li> <li><a href="/wiki/Wikipedia:Keyboard_shortcuts" class="mw-redirect" title="Wikipedia:Keyboard shortcuts">Keyboard shortcuts</a></li></ul></li> <li><a href="/wiki/Help:Editing" title="Help:Editing">Editing</a> <ul><li><a href="/wiki/Help:CharInsert" title="Help:CharInsert">CharInsert</a></li> <li><a href="/wiki/Help:Edit_conflict" title="Help:Edit conflict">Edit conflict</a></li> <li><a href="/wiki/Help:Edit_toolbar" title="Help:Edit toolbar">Edit toolbar</a></li> <li><a href="/wiki/Help:Reverting" title="Help:Reverting">Reverting</a></li></ul></li> <li><a href="/wiki/Wikipedia:How_to_create_a_page" title="Wikipedia:How to create a page">How to create a page</a></li> <li><a href="/wiki/Wikipedia:IRC" title="Wikipedia:IRC">IRC</a> <ul><li><a href="/wiki/Wikipedia:IRC/Tutorial" title="Wikipedia:IRC/Tutorial">Tutorial</a></li></ul></li> <li><a href="/wiki/Help:Mobile_access" title="Help:Mobile access">Mobile access</a></li> <li><a href="/wiki/Help:Multilingual_support" title="Help:Multilingual support">Multilingual support</a></li> <li><a href="/wiki/Help:Page_history" title="Help:Page history">Page history</a></li> <li><a href="/wiki/Help:Page_information" title="Help:Page information">Page information</a></li> <li><a href="/wiki/Wikipedia:Page_name" title="Wikipedia:Page name">Page name</a> <ul><li><a href="/wiki/Help:Page_name" title="Help:Page name">Help</a></li></ul></li> <li><a href="/wiki/Help:Printing" title="Help:Printing">Printing</a></li> <li><a href="/wiki/Wikipedia:Software_notices" title="Wikipedia:Software notices">Software notices</a> <ul><li><a href="/wiki/Wikipedia:Editnotice" title="Wikipedia:Editnotice">Editnotice</a></li></ul></li> <li><a href="/wiki/Help:Special_characters" title="Help:Special characters">Special Characters</a> <ul><li><a href="/wiki/Help:Entering_special_characters" title="Help:Entering special characters">Entering</a></li></ul></li> <li><a href="/wiki/Wikipedia:User_access_levels" title="Wikipedia:User access levels">User access levels</a></li> <li><a href="/wiki/Wikipedia:VisualEditor" title="Wikipedia:VisualEditor">VisualEditor</a> <ul><li><a href="/wiki/Help:VisualEditor" title="Help:VisualEditor">Help</a></li></ul></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Special:SpecialPages" title="Special:SpecialPages">Special<br/>page</a>-related</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Special_page" title="Help:Special page">Special page help</a></li> <li><a href="/wiki/Help:AllPages" title="Help:AllPages">AllPages</a></li> <li><a href="/wiki/Wikipedia:Edit_filter" title="Wikipedia:Edit filter">Edit filter</a></li> <li><a href="/wiki/Wikipedia:Emailing_users" title="Wikipedia:Emailing users">Emailing users</a></li> <li><a href="/wiki/Help:Logging_in" title="Help:Logging in">Logging in</a> <ul><li><a href="/wiki/Help:Reset_password" title="Help:Reset password">Reset passwords</a></li></ul></li> <li><a href="/wiki/Help:Log" title="Help:Log">Logs</a></li> <li><a href="/wiki/Wikipedia:Moving_a_page" title="Wikipedia:Moving a page">Moving a page</a> <ul><li><a href="/wiki/Wikipedia:History_merging" title="Wikipedia:History merging">History merging</a></li> <li><a href="/wiki/Help:When_to_place_technical_requests_in_%22Administrator_needed%22" title="Help:When to place technical requests in "Administrator needed"">Non-admin and admin-only page moves</a></li></ul></li> <li><a href="/wiki/Help:Notifications" title="Help:Notifications">Notifications/Echo</a> <ul><li><a href="/wiki/Help:Notifications/FAQ" title="Help:Notifications/FAQ">FAQ</a></li></ul></li> <li><a href="/wiki/Wikipedia:Page_Curation/Help" title="Wikipedia:Page Curation/Help">Page Curation</a></li> <li><a href="/wiki/Help:Import" title="Help:Import">Page import</a></li> <li><a href="/wiki/Wikipedia:Pending_changes" title="Wikipedia:Pending changes">Pending changes</a></li> <li><a href="/wiki/Wikipedia:Random" title="Wikipedia:Random">Random pages</a></li> <li><a href="/wiki/Help:Recent_changes" title="Help:Recent changes">Recent changes</a></li> <li><a href="/wiki/Help:Related_changes" title="Help:Related changes">Related changes</a></li> <li><a href="/wiki/Help:Searching" title="Help:Searching">Searching</a> <ul><li><a href="/wiki/Help:Linksearch" title="Help:Linksearch">Linksearch</a></li></ul></li> <li><a href="/wiki/Wikipedia:Tags" title="Wikipedia:Tags">Tags</a></li> <li><a href="/wiki/Help:User_contributions" title="Help:User contributions">User contributions</a></li> <li><a href="/wiki/Help:Watchlist" title="Help:Watchlist">Watchlist</a></li> <li><a href="/wiki/Help:What_links_here" title="Help:What links here">What links here</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Help:Wikitext" title="Help:Wikitext">Wikitext</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Wikitext" title="Help:Wikitext">Wikitext</a> <ul><li><a href="/wiki/Help:Cheatsheet" title="Help:Cheatsheet">Cheatsheet</a></li></ul></li> <li><a href="/wiki/Help:Columns" title="Help:Columns">Columns</a></li> <li><a href="/wiki/Help:Line-break_handling" title="Help:Line-break handling">Line-break handling</a></li> <li><a href="/wiki/Help:List" title="Help:List">Lists</a></li> <li><a href="/wiki/Help:Magic_words" title="Help:Magic words">Magic words</a> <ul><li><a href="/wiki/Help:Magic_words_for_beginners" title="Help:Magic words for beginners">For beginners</a></li> <li><a href="/wiki/Help:Conditional_expressions" title="Help:Conditional expressions">Conditional expressions</a></li> <li><a href="/wiki/Help:Switch_parser_function" title="Help:Switch parser function">Switch parser function</a></li> <li><a href="/wiki/Help:Time_function" title="Help:Time function">Time function</a></li></ul></li> <li><a href="/wiki/Help:Redirect" title="Help:Redirect">Redirects</a></li> <li><a href="/wiki/Help:Section" title="Help:Section">Sections and TOCs</a></li> <li><a href="/wiki/Help:Table" title="Help:Table">Tables</a> <ul><li><a href="/wiki/Help:Introduction_to_tables_with_Wiki_Markup/1" title="Help:Introduction to tables with Wiki Markup/1">Introduction</a></li> <li><a href="/wiki/Help:Basic_table_markup" title="Help:Basic table markup">Basics</a></li> <li><a href="/wiki/Help:Advanced_table_formatting" title="Help:Advanced table formatting">Advanced table formatting</a></li> <li><a href="/wiki/Help:Collapsing" class="mw-redirect" title="Help:Collapsing">Collapsing</a></li> <li><a href="/wiki/Help:Conditional_tables" title="Help:Conditional tables">Conditional tables</a></li> <li><a class="mw-selflink selflink">Sortable tables</a></li></ul></li> <li><a href="/wiki/Help:Using_colours" title="Help:Using colours">Using colours</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Help:Link" title="Help:Link">Links</a> and <a href="/wiki/Help:Diff" title="Help:Diff">diffs</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Link" title="Help:Link">Links</a> <ul><li><a href="/wiki/Help:Interlanguage_links" title="Help:Interlanguage links">Interlanguage</a></li> <li><a href="/wiki/Help:Interwiki_linking" title="Help:Interwiki linking">Interwiki</a></li> <li><a href="/wiki/Help:Permanent_link" title="Help:Permanent link">Permanent</a></li></ul></li> <li><a href="/wiki/Help:Diff" title="Help:Diff">Diffs</a> <ul><li><a href="/wiki/Wikipedia:Simplest_diff_guide" title="Wikipedia:Simplest diff guide">Simplest diff guide</a></li> <li><a href="/wiki/Wikipedia:Simple_diff_and_link_guide" title="Wikipedia:Simple diff and link guide">Simple diff and link guide</a></li> <li><a href="/wiki/Wikipedia:Complete_diff_and_link_guide" title="Wikipedia:Complete diff and link guide">Complete diff and link guide</a></li></ul></li> <li><a href="/wiki/Help:Colon_trick" title="Help:Colon trick">Colon trick</a></li> <li><a href="/wiki/Help:Link_color" title="Help:Link color">Link color</a></li> <li><a href="/wiki/Help:Pipe_trick" title="Help:Pipe trick">Pipe trick</a></li> <li><a href="/wiki/Help:URL" title="Help:URL">URLs</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:Media" class="mw-disambig" title="Wikipedia:Media">Media</a> files: images,<br/>videos and sounds</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Media" title="Help:Media">Media help</a></li> <li><a href="/wiki/Help:Files" title="Help:Files">Files</a> <ul><li><a href="/wiki/Help:Creation_and_usage_of_media_files" title="Help:Creation and usage of media files">Creation and usage</a></li> <li><a href="/wiki/Wikipedia:Moving_files_to_Commons" title="Wikipedia:Moving files to Commons">Moving files to Commons</a></li></ul></li> <li><a href="/wiki/Wikipedia:Images" title="Wikipedia:Images">Images</a> <ul><li><a href="/wiki/Help:Introduction_to_images_with_Wiki_Markup/1" title="Help:Introduction to images with Wiki Markup/1">Introduction to images</a></li> <li><a href="/wiki/Help:Pictures" title="Help:Pictures">Picture tutorial</a></li> <li><a href="/wiki/Wikipedia:Preparing_images_for_upload" title="Wikipedia:Preparing images for upload">Preparing images for upload</a></li> <li><a href="/wiki/Wikipedia:Uploading_images" title="Wikipedia:Uploading images">Uploading images</a></li> <li><a href="/wiki/Help:Options_to_hide_an_image" title="Help:Options to hide an image">Options to hide an image</a></li> <li><a href="/wiki/Wikipedia:Extended_image_syntax" title="Wikipedia:Extended image syntax">Extended image syntax</a></li> <li><a href="/wiki/Wikipedia:SVG_help" title="Wikipedia:SVG help">SVG help</a></li></ul></li> <li><a href="/wiki/Help:Gallery_tag" title="Help:Gallery tag">Gallery tag</a></li> <li><a href="/wiki/Wikipedia:Graphics_tutorials" title="Wikipedia:Graphics tutorials">Graphics tutorials</a> <ul><li><a href="/wiki/Wikipedia:Basic_bitmap_image_editing" title="Wikipedia:Basic bitmap image editing">Basic bitmap image editing</a></li> <li><a href="/wiki/Wikipedia:How_to_improve_image_quality" title="Wikipedia:How to improve image quality">How to improve image quality</a></li> <li><a href="/wiki/Wikipedia:Graphics_Lab/Resources" title="Wikipedia:Graphics Lab/Resources">Graphics Lab resources</a></li></ul></li> <li><a href="/wiki/Help:Sound_file_markup" title="Help:Sound file markup">Sound file markup</a></li> <li><a href="/wiki/Help:Visual_file_markup" title="Help:Visual file markup">Visual file markup</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%">Other graphics</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Family_trees" title="Help:Family trees">Family trees</a></li> <li><a href="/wiki/Wikipedia:Graphs_and_charts" title="Wikipedia:Graphs and charts">Graphs and charts</a> <ul><li><a href="/wiki/Wikipedia:How_to_create_charts_for_Wikipedia_articles" title="Wikipedia:How to create charts for Wikipedia articles">How to create</a></li> <li><a href="/wiki/Help:Barchart" title="Help:Barchart">Barcharts</a></li> <li><a href="/wiki/Wikipedia:To_scale_charts" title="Wikipedia:To scale charts">To scale charts</a></li></ul></li> <li><a href="/wiki/Help:Displaying_a_formula" title="Help:Displaying a formula">Math formulas</a> <ul><li><a href="/wiki/Help:Displaying_a_formula#Use_of_HTML_templates" title="Help:Displaying a formula">Math symbols</a></li></ul></li> <li><a href="/wiki/Help:Score" title="Help:Score">Musical scores</a> <ul><li><a href="/wiki/Help:Musical_symbols" title="Help:Musical symbols">Musical symbols</a></li></ul></li> <li><a href="/wiki/Wikipedia:Timeline" title="Wikipedia:Timeline">Timeline</a> <ul><li><a href="/wiki/Help:EasyTimeline_syntax" title="Help:EasyTimeline syntax">EasyTimeline syntax</a></li></ul></li> <li><a href="/wiki/Help:WikiHiero_syntax" title="Help:WikiHiero syntax">WikiHiero syntax</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Help:A_quick_guide_to_templates" title="Help:A quick guide to templates">Templates</a> and<br/><a href="/wiki/Lua_(programming_language)" title="Lua (programming language)">Lua</a> modules</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Template" title="Help:Template">Templates</a></li> <li><a href="/wiki/Wikipedia:Advanced_template_coding" title="Wikipedia:Advanced template coding">Advanced template coding</a></li> <li><a href="/wiki/Wikipedia:Template_documentation" title="Wikipedia:Template documentation">Template documentation</a></li> <li><a href="/wiki/Wikipedia:Template_index" title="Wikipedia:Template index">Template index</a></li> <li><a href="/wiki/Help:Template_limits" title="Help:Template limits">Template limits</a></li> <li><a href="/wiki/Wikipedia:Template_sandbox_and_test_cases" title="Wikipedia:Template sandbox and test cases">Template sandbox and test cases</a></li> <li><a href="/wiki/Wikipedia:Citation_templates" title="Wikipedia:Citation templates">Citation templates</a></li> <li><a href="/wiki/Help:Lua" title="Help:Lua">Lua help</a></li> <li><a href="/wiki/Wikipedia:Lua" title="Wikipedia:Lua">Lua project</a> <ul><li><a href="/wiki/Wikipedia:Lua/Resources" title="Wikipedia:Lua/Resources">Resources</a></li> <li><a href="/wiki/Wikipedia:Lua/To_do" title="Wikipedia:Lua/To do">To do</a></li></ul></li> <li><a href="/wiki/Help:Substitution" title="Help:Substitution">Substitution</a></li> <li><a href="/wiki/Help:Purge" title="Help:Purge">Purge</a> <ul><li><a href="/wiki/Help:Job_queue" title="Help:Job queue">Job queue</a></li></ul></li> <li><a href="/wiki/Help:Transclusion" title="Help:Transclusion">Transclusion</a> <ul><li><a href="/wiki/Help:Labeled_section_transclusion" title="Help:Labeled section transclusion">Labeled section</a></li> <li><a href="/wiki/Wikipedia:Transclusion_costs_and_benefits" title="Wikipedia:Transclusion costs and benefits">Costs and benefits</a></li></ul></li> <li><a href="/wiki/Wikipedia:Guide_to_Scribbling" title="Wikipedia:Guide to Scribbling">Guide to Scribbling</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:Administration#Data_structure_and_development" title="Wikipedia:Administration">Data structure</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:Namespace" title="Wikipedia:Namespace">Namespaces</a></li> <li><a href="/wiki/Wikipedia:What_is_an_article%3F" title="Wikipedia:What is an article?">Main/Article</a></li> <li><a href="/wiki/Help:Category" title="Help:Category">Category</a></li> <li><a href="/wiki/Wikipedia:Drafts" title="Wikipedia:Drafts">Draft</a></li> <li><a href="/wiki/Help:Files" title="Help:Files">File</a> <ul><li><a href="/wiki/Help:File_description_page" title="Help:File description page">File description page</a></li></ul></li> <li><a href="/wiki/Wikipedia:Help_namespace" title="Wikipedia:Help namespace">Help</a></li> <li><a href="/wiki/Wikipedia:Portal" title="Wikipedia:Portal">Portal</a></li> <li><a href="/wiki/Wikipedia:Project_namespace" title="Wikipedia:Project namespace">Project/Wikipedia</a></li> <li><a href="/wiki/Help:Talk_pages" title="Help:Talk pages">Talk</a> <ul><li><a href="/wiki/Help:Archiving_a_talk_page" title="Help:Archiving a talk page">Archiving</a> <ul><li><a href="/wiki/Help:Archiving_(plain_and_simple)" title="Help:Archiving (plain and simple)">Simple</a></li></ul></li></ul></li> <li><a href="/wiki/Wikipedia:Template_namespace" title="Wikipedia:Template namespace">Template</a></li> <li><a href="/wiki/Wikipedia:User_pages" title="Wikipedia:User pages">User</a> <ul><li><a href="/wiki/Wikipedia:User_page_design_guide" title="Wikipedia:User page design guide">User page design</a></li></ul></li> <li><a href="/wiki/Help:MediaWiki_namespace" title="Help:MediaWiki namespace">MediaWiki</a> <ul><li><a href="/wiki/Wikipedia:Bug_reports_and_feature_requests" title="Wikipedia:Bug reports and feature requests">Bug reports and feature requests</a></li> <li><a href="https://www.mediawiki.org/wiki/Extension:TimedMediaHandler" class="extiw" title="mw:Extension:TimedMediaHandler">TimedMediaHandler extension</a></li></ul></li> <li><a href="/wiki/Wikipedia:Lua" title="Wikipedia:Lua">Module</a></li> <li><a href="/wiki/Help:Special_page" title="Help:Special page">Special</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/HTML" title="HTML">HTML</a> and <a href="/wiki/CSS" title="CSS">CSS</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Cascading_Style_Sheets" title="Help:Cascading Style Sheets">Cascading Style Sheets</a></li> <li><a href="/wiki/Help:HTML_in_wikitext" title="Help:HTML in wikitext">HTML in wikitext</a></li> <li><a href="/wiki/Wikipedia:Catalogue_of_CSS_classes" title="Wikipedia:Catalogue of CSS classes">Catalogue of CSS classes</a></li> <li><a href="/wiki/Wikipedia:Common.js_and_common.css" title="Wikipedia:Common.js and common.css">Common.js and common.css</a></li> <li><a href="/wiki/Template:Mxt/User_CSS_for_a_monospaced_coding_font" title="Template:Mxt/User CSS for a monospaced coding font">User CSS for monospaced coding font</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Microformats/classes" title="Wikipedia:WikiProject Microformats/classes">Classes in microformats</a></li> <li><a href="/wiki/Help:Markup_validation" title="Help:Markup validation">Markup validation</a></li> <li><a href="/wiki/Wikipedia:Span_tags" title="Wikipedia:Span tags">Span tags</a></li> <li><a href="/wiki/Help:Useful_styles" title="Help:Useful styles">Useful styles</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:Customisation" title="Wikipedia:Customisation">Customisation</a><br/>and tools</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Preferences" title="Help:Preferences">Preferences</a></li> <li><a href="/wiki/Wikipedia:Gadget" title="Wikipedia:Gadget">Gadgets</a></li> <li><a href="/wiki/Wikipedia:Skin" title="Wikipedia:Skin">Skins</a></li> <li><a href="/wiki/Help:Citation_tools" title="Help:Citation tools">Citation tools</a></li> <li><a href="/wiki/Wikipedia:Cleaning_up_vandalism/Tools" title="Wikipedia:Cleaning up vandalism/Tools">Cleaning up vandalism tools</a></li> <li><a href="/wiki/Wikipedia:Customizing_watchlists" title="Wikipedia:Customizing watchlists">Customizing watchlists</a> <ul><li><a href="/wiki/Help:Hide_Pages_in_Watchlist" title="Help:Hide Pages in Watchlist">Hide pages</a></li></ul></li> <li><a href="/wiki/Wikipedia:Scripts" title="Wikipedia:Scripts">IRC Scripts</a></li> <li><a href="/wiki/Wikipedia:User_scripts" title="Wikipedia:User scripts">User scripts</a> <ul><li><a href="/wiki/Wikipedia:User_scripts/Guide" title="Wikipedia:User scripts/Guide">Guide</a></li> <li><a href="/wiki/Wikipedia:User_scripts/List" title="Wikipedia:User scripts/List">List</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Techniques" title="Wikipedia:User scripts/Techniques">Techniques</a></li></ul></li> <li><a href="/wiki/Help:User_style" title="Help:User style">User style</a></li> <li><a href="/wiki/Wikipedia:Tools" title="Wikipedia:Tools">Tools</a> <ul><li><a href="/wiki/Wikipedia:Tools/Alternative_browsing" title="Wikipedia:Tools/Alternative browsing">Alternative browsing</a></li> <li><a href="/wiki/Wikipedia:Tools/Browser_tools" title="Wikipedia:Tools/Browser tools">Browser tools</a></li> <li><a href="/wiki/Wikipedia:Tools/Editing_tools" title="Wikipedia:Tools/Editing tools">Editing tools</a></li> <li><a href="/wiki/Wikipedia:Tools/Navigation_shortcuts" title="Wikipedia:Tools/Navigation shortcuts">Navigation shortcuts</a></li> <li><a href="/wiki/Wikipedia:Tools/Optimum_tool_set" title="Wikipedia:Tools/Optimum tool set">Optimum tool set</a></li></ul></li> <li><a href="/wiki/Wikipedia:Wikimedia_Cloud_Services" title="Wikipedia:Wikimedia Cloud Services">Wikimedia Cloud Services</a></li> <li><a href="https://www.mediawiki.org/wiki/Beta_Features" class="extiw" title="mw:Beta Features">Beta Features at MediaWiki</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%">Automated editing</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:WikiProject_Articles_for_creation/Helper_script" title="Wikipedia:WikiProject Articles for creation/Helper script">AfC helper script</a></li> <li><a href="/wiki/Wikipedia:AntiVandal" title="Wikipedia:AntiVandal">AntiVandal</a></li> <li><a href="/wiki/Wikipedia:AutoWikiBrowser" title="Wikipedia:AutoWikiBrowser">AutoWikiBrowser</a></li> <li><a href="/wiki/Wikipedia:Bots" title="Wikipedia:Bots">Bots</a> <ul><li><a href="/wiki/Help:Creating_a_bot" title="Help:Creating a bot">Creating</a></li> <li><a href="/wiki/Wikipedia:History_of_Wikipedia_bots" title="Wikipedia:History of Wikipedia bots">history</a></li></ul></li> <li><a href="/wiki/Wikipedia:HotCat" title="Wikipedia:HotCat">HotCat</a></li> <li><a href="/wiki/Wikipedia:Huggle" title="Wikipedia:Huggle">Huggle</a></li> <li><a href="/wiki/Wikipedia:Tools/Navigation_popups" title="Wikipedia:Tools/Navigation popups">Navigation popups</a></li> <li><a href="/wiki/Wikipedia:RedWarn" title="Wikipedia:RedWarn">RedWarn</a></li> <li><a href="/wiki/Wikipedia:Twinkle" title="Wikipedia:Twinkle">Twinkle</a></li> <li><a href="/wiki/Wikipedia:Ultraviolet" title="Wikipedia:Ultraviolet">Ultraviolet</a></li> <li><a href="/wiki/Wikipedia:WPCleaner" title="Wikipedia:WPCleaner">WPCleaner</a></li> <li>Inactive <ul><li><a href="/wiki/Wikipedia:Igloo" title="Wikipedia:Igloo">igloo</a></li> <li><a href="/wiki/Wikipedia:STiki" title="Wikipedia:STiki">STiki</a></li></ul></li></ul> </div></td></tr><tr><td class="navbox-abovebelow" colspan="2" style="text-align: center;"><div> <ul><li>See also: <b><a href="/wiki/Category:Wikipedia_how-to" title="Category:Wikipedia how-to">Category:Wikipedia how-to</a></b></li> <li><b><a href="/wiki/Category:Wikipedia_information_pages" title="Category:Wikipedia information pages">Category:Wikipedia information pages</a></b><br/>Further navigation at: <a href="/wiki/Template:Wikipedia_help_pages" title="Template:Wikipedia help pages">Help pages</a> <ul><li><a href="/wiki/Template:Administrators%27_guide" title="Template:Administrators' guide">Administrators</a></li></ul></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Navigation_menu" title="Wikipedia:WikiProject Accessibility/Navigation menu">Accessibility</a></li> <li><a href="/wiki/Template:Wikipedia_accounts" title="Template:Wikipedia accounts">Accounts</a></li> <li><a href="/wiki/Template:Botnav" title="Template:Botnav">Bots</a></li> <li><a href="/wiki/Template:Wikipedia_referencing" title="Template:Wikipedia referencing">Referencing</a> <ul><li><a href="/wiki/Template:Citation_metadata_navbox" title="Template:Citation metadata navbox">Citation metadata</a></li></ul></li> <li><a href="/wiki/Template:Wikipedia_templates" title="Template:Wikipedia templates">Templates</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Navbox" title="Wikipedia:User scripts/Navbox">User scripts</a></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Help:Sortable_tables&oldid=1248995605">https://en.wikipedia.org/w/index.php?title=Help:Sortable_tables&oldid=1248995605</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:Wikipedia_how-to" title="Category:Wikipedia how-to">Wikipedia how-to</a></li><li><a href="/wiki/Category:Wikipedia_tables" title="Category:Wikipedia tables">Wikipedia tables</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 2 October 2024, at 16:37<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Help:Sortable_tables&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-6d67bf974d-zpm4l","wgBackendResponseTime":123,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Creating_sortable_tables","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Simple_example-Creating_sortable_tables","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Initial_sort_order_of_rows-Creating_sortable_tables","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Using_sortable_tables","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Example-Using_sortable_tables","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Tables_with_complex_headers-Using_sortable_tables","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Tables_with_merged_data_rows-Using_sortable_tables","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Online_table_editors_and_rowspan-Tables_with_merged_data_rows","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Secondary_key_and_multi-key_sorting-Using_sortable_tables","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Optimising_tables_for_a_narrow_display","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Vertical_headers-Optimising_tables_for_a_narrow_display","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Sort_under_template","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Restrictions_and_exclusions","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Making_selected_columns_unsortable-Restrictions_and_exclusions","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Excluding_final_rows_from_sorting-Restrictions_and_exclusions","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Header_as_a_footer-Excluding_final_rows_from_sorting","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Summation_footer-Excluding_final_rows_from_sorting","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Excluding_top_rows_from_sorting-Restrictions_and_exclusions","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Configuring_the_sorting","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Forcing_a_column_to_have_a_particular_data_type","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-data-sort-type=text-Forcing_a_column_to_have_a_particular_data_type","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Default_data_type_of_a_column-Forcing_a_column_to_have_a_particular_data_type","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Specifying_a_sort_key_for_a_cell","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Keeping_some_rows_together-Specifying_a_sort_key_for_a_cell","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Examples_of_datatype_auto_detection._First_5_cells_in_a_column","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Numerical_sorting_problems","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-c._for_circa-Numerical_sorting_problems","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Numerical_ranges-Numerical_sorting_problems","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Date_sorting_problems","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Month_names-Date_sorting_problems","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Year_only-Date_sorting_problems","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Year_and_month-Date_sorting_problems","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Month_and_year-Date_sorting_problems","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Full_dates_work._Year_must_be_on_the_end-Date_sorting_problems","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Year,_month,_day._Using_words_for_months-Date_sorting_problems","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Year,_month,_day._Using_numbers._ISO_date_YYYY-MM-DD-Date_sorting_problems","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Years_BC_are_a_problem","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Date_table_sorting_template._Many_date_formats","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Issues._Years_BC,_etc-Date_table_sorting_template._Many_date_formats","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Before_year_100._Any_date_format","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Background_colors_in_sortable_headers","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Tips_and_tricks","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Padding-Tips_and_tricks","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Non-breaking_spaces-Padding","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Padding_with_zeros-Padding","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Controlling_sorting_and_display-Tips_and_tricks","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Sorting_with_increase/decrease/steady_templates-Tips_and_tricks","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Maintaining_tables_sorted_alphabetically_or_by_rank","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Putting_a_table_in_initial_alphabetical_order-Maintaining_tables_sorted_alphabetically_or_by_rank","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Initial_alphabetical_sort_versus_initial_sort_by_rank_order-Maintaining_tables_sorted_alphabetically_or_by_rank","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Removing_an_old_rank_column_(1,2,3)_from_a_table-Initial_alphabetical_sort_versus_initial_sort_by_rank_order","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Auto-ranking_or_adding_a_row_numbering_column_(1,2,3)-Maintaining_tables_sorted_alphabetically_or_by_rank","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Alphabetic_sorting_order","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Numerical_sorting_order_examples","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-See_also","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Notes","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-References","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.123"},"limitreport":{"cputime":"0.938","walltime":"1.142","ppvisitednodes":{"value":4381,"limit":1000000},"postexpandincludesize":{"value":71250,"limit":2097152},"templateargumentsize":{"value":6303,"limit":2097152},"expansiondepth":{"value":11,"limit":100},"expensivefunctioncount":{"value":32,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":93622,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 798.656 1 -total"," 20.58% 164.341 1 Template:Sort_under"," 11.70% 93.405 2 Template:Reflist"," 10.49% 83.814 1 Template:Wikipedia_how_to"," 10.11% 80.716 1 Template:Cite_web"," 9.97% 79.625 1 Template:Wiki_markup"," 9.12% 72.818 1 Template:Helpbox"," 8.87% 70.872 1 Template:Sidebar"," 6.72% 53.639 1 Template:Short_description"," 6.66% 53.230 1 Template:Ombox"]},"scribunto":{"limitreport-timeusage":{"value":"0.265","limit":"10.000"},"limitreport-memusage":{"value":4532196,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-67876799fc-v2mlw","timestamp":"20241127191650","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>