Help talk:Table/Archive 8

Archive 5

Archive 6

Archive 7

Archive 8

Archive 9

Archive 10

Partially collapsed table with vertical scrolling and show/hide links?

{{COVID-19 pandemic death rates by country}}

Is there a simple way to convert this below to a partially collapsed table with vertical scrolling? Along with show/hide links?

{| class="wikitable mw-collapsible mw-collapsed"
![[COVID-19 pandemic death rates by country]]. 
|-
|{{Template:COVID-19 pandemic death rates by country}}
|}

References

The table reference will show up in the references section of the article it is in. I used {{talk refs}} here to place the references in this talk section.

There is discussion here:

• Template talk:COVID-19 pandemic death rates by country

--Timeshifter (talk) 19:41, 27 August 2020 (UTC)

@Timeshifter: This will do it

Wikitext
{| class="wikitable mw-collapsible" ![[COVID-19 pandemic death rates by country]]. |- |{{scrolling window|link=Template:COVID-19 pandemic death rates by country|height=150px|title=New articles}} |}

References

Unfortunately I may not have time to read through the discussion at present, gotta finish checking my watch list here and on meta, also multitasking with real world stuff. However, I'm fairly certain that the manual of style discourages this usage in articlespace. (please ping on reply)

𝒬𝔔 16:58, 28 August 2020 (UTC)

Thanks Quantocius_Quantotius. I added a link to Template:Scrolling window to Help:Table#Scrolling. I also added a link to Template:COVID-19 pandemic data which is one of the few scrolling tables I have seen in article space.

Is it possible with Template:Scrolling window to set it up with a link to fully expand a table? As with Template:COVID-19 pandemic data? And is it possible with Template:Scrolling window to fix the header row such that it stays visible while scrolling? As at Template:COVID-19 pandemic data.

I wish to know the minimal wikitext involved with Template:COVID-19 pandemic data to do those 2 things: Full expansion and fixed header. Template:COVID-19 pandemic data has so much wikitext. Can you pull out the basics and use it here with Template:COVID-19 pandemic death rates by country?

--Timeshifter (talk) 23:52, 28 August 2020 (UTC)

 Done, however review by a second set of eyes wouldn't hurt; I haven't really done serious css stuff for a few years now and I've managed to make a few (thankfully minor) errors in template coding in recent weeks. I took it a bit more slowly here to double check and I had a bit more time today but it's still possible I missed something.

Other than that let me know if there's any other features you want and I'll try to get to them before the end of the month. Courtesy ping to Dudley Miles since you're working on this as well.

I'm going to try to be around Sunday at least for 30 minutes if you have any immediate questions, if not you may need to wait until around the 21st to catch me again as the next two weeks should be bit busy for me, thanks. (please ping on reply)

𝒬𝔔 22:43, 4 September 2020 (UTC)

Thanks Quantocius Quantotius, but it is no longer necessary. See: User:Timeshifter/Sandbox119. --Timeshifter (talk) 01:18, 5 September 2020 (UTC)

An improved version is at Template:COVID-19 pandemic death rates. Does this look OK? Dudley Miles (talk) 08:36, 30 August 2020 (UTC)

It needs a collapse button that brings it back to the scrollable box. I asked for help here:

Template talk:COVID-19 pandemic data#Need a link to collapse it back to its original scroll box size.

Template talk:COVID-19 pandemic data/styles.css#Collapse link needed to collapse back to the original scroll box.

--Timeshifter (talk) 10:34, 30 August 2020 (UTC)

Comment. Dudley Miles and Quantocius Quantotius. Please see User:Timeshifter/Sandbox119. The scrollable table now has a sticky header row that stays visible while scrolling. --Timeshifter (talk) 01:26, 5 September 2020 (UTC)

Sticky header row problem has been solved. See:

Template:COVID-19 pandemic death rates

--Timeshifter (talk) 06:56, 6 September 2020 (UTC)

"Show all" and "Collapse" buttons are all working correctly on all of the partially-collapsed scrolling tables here:

COVID-19 pandemic by country and territory.

--Timeshifter (talk) 04:23, 29 October 2020 (UTC)

Help needed for a timeline of images

Hi, could a wiki table expert help us improve the Timeline of first images of Earth from space, please? There are more details in its Talk page. Thanks! fgnievinski (talk) 05:05, 30 November 2020 (UTC)

Sticky table headers?

Tracked in Phabricator
Task T42763

Is there a way to make the first row of a table (the header) sticky? So that it stays on screen no matter which part of the table is on screen? Otherwise reading long (and wide) tables is really hard.

--Xerces8 (talk) 14:57, 11 April 2020 (UTC)

Google pulls up some Mediawiki info on it:

https://www.google.com/search?q=mediawiki+Sticky+table+headers

--Timeshifter (talk) 17:22, 11 April 2020 (UTC)

@Xerces8: See also: Phabricator request for floating table headers. --Timeshifter (talk) 08:51, 14 April 2020 (UTC)

@Xerces8 and Timeshifter: I just came here to request the same thing, following my post at Wikipedia talk:Reliable sources/Perennial sources/Archive 3#Technical idea: make the header row of the table sticky. This would be hugely useful for pages like that one. Someone seems to have figured out how to do it at Template:2019–20 coronavirus pandemic data, but that may have involved Herculean amounts of coding (I see they've defined their own custom CSS class, I think). Does anyone have the technical expertise to solve this and add some instructions to this help page, or should we go to WP:VPT? {{u|Sdkb}} ^talk 00:28, 22 April 2020 (UTC)

• RS talk item was archived to Wikipedia_talk:Reliable_sources/Perennial_sources/Archive_3#Technical_idea:_make_the_header_row_of_the_table_sticky — GhostInTheMachine ^{talk to me} 10:45, 6 September 2020 (UTC)

Maybe ask at Template talk:2019–20 coronavirus pandemic data. --Timeshifter (talk) 00:37, 22 April 2020 (UTC)

Take a look in Template:2019–20 coronavirus pandemic data/styles.css at .covid-sticky bits. Graeme Bartlett (talk) 12:17, 22 April 2020 (UTC)

Maybe Bawolff can help. --MarioGom (talk) 12:54, 22 April 2020 (UTC)

Generally this stuff isn't mediawiki specific, but works the same as on other websites. See https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning for details on how position:sticky. That said, I'm not sure how to do sticky headers in a table that's not scrollable (using only css and no js). The Covid template works since the entire thing is in a scrollbox. I'm not fully up to date on recent CSS stuff, so maybe there's a method I am unaware of. Bawolff (talk) 01:11, 3 May 2020 (UTC)

• User preferences includes a test gadget created by TheDJ Make sure that headers of tables remain in view as long as the table is in view (requires Firefox v59 or Safari). See MediaWiki:Gadget-StickyTableHeaders.js and MediaWiki:Gadget-StickyTableHeaders.css.
• Wikipedia:Village_pump_(technical)/Archive_154#Table_header_view from February 2018
• Wikipedia:Village_pump_(technical)/Archive_170#Sticky_table_headers from November 2018.
• See {{COVID-19 pandemic data}} and the CSS in {{COVID-19 pandemic data/styles.css}} for the current "best" version.

GhostInTheMachine ^{talk to me} 10:45, 6 September 2020 (UTC)

This code will make the column headers and the row headers sticky. If there are no row headers, then omit the "left:-1px;" and "z-index:1;" styles from the first column header. It works in Chrome and Firefox browsers for Windows desktop and Android mobile devices.

{| class="wikitable" style="max-height:100vh; overflow:auto;"
|-
! scope="col" style="position:-webkit-sticky; position:sticky; top:-1px; left:-1px; z-index:1;" | StickyRowCol
! scope="col" style="position:-webkit-sticky; position:sticky; top:-1px;" | StickyCol
|-
! scope="row" style="position:-webkit-sticky; position:sticky; left:-1px;" | StickyRow
| data
|}

Example table

StickyRowCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data

Jroberson108 (talk) 22:05, 4 December 2020 (UTC)

Jroberson108. Thanks! I linked to this talk page section from here:

meta:Community Wishlist Survey 2021/Reading/Enable sticky table headers

Feel free to add this collapsed example table to Help:Table.

--Timeshifter (talk) 21:15, 7 December 2020 (UTC)

Also linked from: meta:Community Wishlist Survey 2021/Mobile and apps/Improve horizontal scroll of tables. --Timeshifter (talk) 21:26, 7 December 2020 (UTC)

Timeshifter. I am currently looking into moving the styles to a CSS file to simplify it for users. I have to do more research on the right way to add the CSS file and see if it should have it's own help page. I have the CSS file on my local and it seems to be working well. I am planning on setting class="sticky-headers" on the table with an optional class="sticky-headers-colrow" on a column header that also needs to be row sticky. Jroberson108 (talk) 22:12, 7 December 2020 (UTC)

(unindent). Jroberson108. Does this work with sortable tables too?

Also, I found this sticky table linked from the Phabricator T42763 thread:

• de:Red Hot Chili Peppers/Diskografie#Singles

And this one with sortable columns:

• de:Red Hot Chili Peppers/Diskografie#Auszeichnungen für Musikverkäufe

And class="wikitable floatable-header" here :

• Historic Forbidden/Limited Chart - Yugipedia - Yu-Gi-Oh! wiki.

--Timeshifter (talk) 03:47, 8 December 2020 (UTC)

Timeshifter. 1) Yes, it works with "sortable"; although, "sortable" doesn't work for mobile, at least on my phone. 2) The RHCP pages aren't using a table, but a chart table (de:Vorlage:Charttabelle), which looks like a table in a desktop browser, but changes in a mobile browser so that row data is displayed vertically as opposed to horizontally with the column headers listed at the top of the entire chart. In certain curcumstances, this might be a better responsive approach compared to a table; although, their header labels aren't sticky at the top and scroll out of view causing a potential disconnect with the data. 3) It looks like "floatable-header" takes a similar approach to what I did in making column headers sticky, but they didn't do anything with the row headers which scroll out of view causing a potential disconnect with the data. Also, their column headers aren't sticky on mobile, just desktop. Jroberson108 (talk) 04:37, 8 December 2020 (UTC)

Set table column width to 150px

Here's the code. Does anybody know how to set the width of column 3 to 150px? "width: 150px" for column 3 is in the code at the moment, but the browser ignores "width" and "max-width" in any column. The browser only obeys "min-width". I tried "table-layout: fixed", "word-wrap: break-word", and some other things, not having luck so far. Thanks. –Novem Linguae (talk) 16:43, 6 January 2021 (UTC)

Novem Linguae, if you look at the thread just above ("Use of em and % values in preference to px values"), you'll see Warning: Setting specific pixel sizes is deprecated, as it interferes with the ability of the browser to adjust content to suit the browser window, device size, user-end font size limits, and other constraints. It is strongly preferred to use relative sizes, in percentage or em values... Schazjmd (talk) 17:45, 6 January 2021 (UTC)

@Novem Linguae: The cells in column 3 use {{nowrap}}. This forces the column to be at least as wide as "People's Front for Democracy and Justice", so setting a smaller width has no effect. Browsers (at least my Firefox) will not respect a large width if it forces the table to be wider than the window, so setting a very large width in column 3 may have no affect unless the window is really wide or you zoom out a lot. On my screen at standard zoom this all means that width is effectively ignored in that particular column of that particular table. PrimeHunter (talk) 22:48, 6 January 2021 (UTC)

PrimeHunter, deleting {{nowrap}} worked perfectly. Thank you. –Novem Linguae (talk) 03:55, 9 January 2021 (UTC)

Showing extra info when clicking a cell

Is it possible to show more information when clicking a cell in the table? Barecode (talk) 20:27, 5 January 2021 (UTC)

It is Bad Form to have hidden content without a clear indication, but the cell could have extra, hidden content and a [show] button:

{| class="wikitable" |+ Caption text |- | Example || Example || Example |- | Example | Example {{collapse top|bg="silver"|title=More ...}} Lots more information {{collapse bottom}} | Example |- | Example || Example || Example |}

⇒

Caption text Example Example Example Example Example More ... Lots more information Example Example Example Example

See {{Collapse top}} for more details — GhostInTheMachine ^{talk to me} 18:53, 11 January 2021 (UTC)

Use of em and % values in preference to px values

Hello people,

Under #HTML attributes in this article there is this advice:

Doesn't this mean the various examples in this article should comply with that advice?

I can go through and amend if there is no objection and someone can check what I do. But if someone else prefers to do it I won't object.  ;-)

Cheers, Simon – SCHolar44 🇦🇺 💬 at 11:57, 18 December 2020 (UTC)

SCHolar44, the column width section states Warning: Setting specific pixel sizes is deprecated, as it interferes with the ability of the browser to adjust content to suit the browser window, device size, user-end font size limits, and other constraints. It is strongly preferred to use relative sizes, in percentage or em values.. I came here to see if there was a recent discussion that mentioned it, because the page gives examples using pixel sizes. There's a post from several years ago asking about the same thing, so it's been since at least 2016, but I can't find a discussion that led to the decision. Anyway, I agree that the page should be cleaned up to only use examples that comply with the recommended/strongly preferred guidance. Schazjmd (talk) 14:56, 20 December 2020 (UTC)

Note: I posted about this conversation on Wikipedia_talk:Manual_of_Style/Tables to encourage more editors to weigh in. Schazjmd (talk) 15:21, 20 December 2020 (UTC)

In Firefox browser I frequently click the zoom buttons in one of the top toolbars to increase or decrease the text size. But I also have "Zoom text only" checked in View menu > Zoom.

So I would not want em values used for images, or border width, or border spacing, or margins, padding, etc.. In other words anything non-text related.

But em is fine by me for widths of columns and tables. Since that is related to text sizing. --Timeshifter (talk) 05:02, 3 January 2021 (UTC)

Many thanks, Schazjmd and Timeshifter. I've taken your comments on board. Cheers, Simon – SCHolar44 🇦🇺 💬 at 05:50, 6 January 2021 (UTC)

Dear colleagues,

I have gone through the article, as promised, with the following actions:

• changed px values to em values (multiplication factor used: x0.077) wherever px values had been applied to content that was not text-related, i.e. images, border width, border spacing, margins, padding etc
• changed em values to px where they had been applied to images, border width, border spacing, margins, padding etc
• drafted a notice for the introduction to the article and updated the existing (upper) one in the section headed "HTML attributes".

I have pasted the amended article into one of my User pages. To see the changes, just copy the amended article, go into Edit mode in the Help:Table article, Select All and delete, paste in the amended article, click Show preview then Show changes. When you're finished, click on Cancel.

Two questions:

• You'll see that in the first place where I have changed the specification to em values, in the code under the heading "Multiplication table", I have only changed to ems for the width value, not the height. However, I see the example under the heading "Width, height" specifies style="width: 60%; height: 14em;". Is there a reason to use em or % for the height?
• Should we word the advice to indicate that % or em specifications are only needed for width values?

Please examine/critique carefully, and of course change at your will!

I look forward to seeing your comments. Cheers, Simon – SCHolar44 🇦🇺 💬 at 03:21, 18 January 2021 (UTC)

undent: Here is a diff.

changed em values to px where they had been applied to images, border width, border spacing, margins, padding etc This is the wrong direction. It's bad web design and Timeshifter's opinion on the particular matter is strictly his personal preference. The only thing that is reasonable is that images must be specified in pixel values (this is a web requirement, essentially). (I would also say it's generally not idiomatic to specify border widths in anything but pixels, but that's a question of idiom and not requirement or suggestion.)

Generally, what should be suggested is that inline styling in general should be avoided. class="wikitable" is usually sufficient. Where desired, inline styling should be kept to a minimum. This allows the particular skin in which the table is displayed, and the browser, and lastly the user with his own stylesheets whether onwiki or in his browser agent, maximum flexibility to do what it will to fit the content to the screen. --Izno (talk) 05:44, 18 January 2021 (UTC)

Hmm, I hear what you're saying, Izno. Your knowledge is obviously far in advance of mine; I don't have the background to implement explicitly what you have opined as over-arching principles. I have therefore decided not to carry this further and to delete my draft, knowing that your comparison is still available should anyone (or you) be interested to give clearer guidance on the px/em/% question. SCHolar44 🇦🇺 💬 at 11:22, 18 January 2021 (UTC)

tables for mobile editors

there would be appreciated some additional guidelines on table usage, for mobile editors..have posted a comment indicating some recent difficulties here Wikipedia:Village_pump_(technical)/Archive_187#wikitable_width..many thanks Gfigs (talk) 09:50, 29 January 2021 (UTC)

Collapsible Sections

Is there a way to make a table in which one row is collapsible and can be made visible by clicking [show] while other rows are always visible? Krisgabwoosh (talk) 20:33, 8 February 2021 (UTC)

parameters and auto-sorting tables

What do the 'create', 'order', 'numeric', and 'ascending'/'descending' parameters and more mean, how do they function, and how do I use 'colspan' and 'rowspan', and use multiple headers or place headers in different locations on Module:AutosortTable, and how do I auto-sort tables and use the 'create', 'order', 'numeric', and 'ascending'/'descending' and the other parameters on tables? -- PK2 (talk) 10:35, 19 August 2020 (UTC)

@PK2: Strictly speaking none of those are parameters. Modules follow the format of

{{#invoke: Module_name | function_name | arg1 | arg2 | arg3 ...}}

see mw:Extension:Scribunto for more details.

Hence, create is the name of the function being called; order, numeric, and descending (there is no ascending) are arguments.

Order is for the sorting preference it takes a coma separated list of column numbers; if two values are the same the next lower preference is used.

Numeric also accepts a coma separated list of column numbers; it designates which use numeric sorting.

Descending is likewise a coma separated list of column numbers it inverts the normal sort order which is ascending by default.

I'm not clear why you would want to use rowspan. Recalling that, post-sorting, any rowspanning cells are cut into individual rows with repeated content and remain that way even if the original sort order is restored.

You autosort tables by converting them into the format used by this module (see Module:AutosortTable/testcases for examples) although in most cases I suspect you're better off using a standard sortable wikitable.

I apologize if I haven't answered your question in full as I'm not sure I fully understood it; if you are looking for someone to write up the documentation for this module I can potentially do that but my time for this is quite limited at the moment (and I have quite a few things on my plate already) so it may be some time before I can get around to it.(please ping on reply)

𝒬𝔔 16:58, 28 August 2020 (UTC)

P.S. Please allow a few days for replies, I can usually respond within the week.

Hello @PK2: I don't know if you (or possibly others) still care, but I have (somewhat) updated the in-code documentation of the parameters you mentioned (while adding a couple of new items). I have an urge to create proper documentation, that's on an actual /doc page and isn't so terse, but I haven't done that yet (and it may be a while before I do).

In case you haven't already figured out what you were wondering about, take a look at what I've done and see if it helps. I'd welcome any feedback. Regards, — JohnFromPinckney (talk) 23:51, 21 February 2021 (UTC)

I have a few questions for everyone:

1. Can you please make it possible for me to use parameters like 'colspan', 'rowspan', 'nosort' and 'data-sort-type', use multiple headers or place headers in different locations, style all or individual cells, rows, columns or headers, and replace the module equivalent of ! scope="row" with | scope="row" on Module:AutosortTable?
2. How do I auto-sort tables and use the 'create', 'order', 'numeric' 'ascending'/'descending', 'hidden' and the other parameters, and style all headers or individual columns on standard tables?
3. Why would someone use the 'hidden' parameter on tables?

Here is an example of a table:

Rank	Wikipedia project		Language	Script	WP code	Active users (log)	Launch date	Logo
	English name	Native name
1	English Wikipedia		English	Latn	en	5
2	French Wikipedia	Wikipédia en français	French	Latn	fr	4
3	German Wikipedia	Deutschsprachige Wikipedia	German	Latn	de	4
4	Spanish Wikipedia	Wikipedia en español	Spanish	Latn	es	4
5	Japanese Wikipedia	ウィキペディア日本語版 (Wikipedia nihongo-ban)	Japanese	Jpan	ja	4
Rank	English name	Native name	Language	Script	WP code	Active users (log)	Launch date	Logo
	Wikipedia project

-- PK2 (talk) 08:36, 28 February 2021 (UTC)

Hi, PK2. Let me address your questions in order:

1. I'm not personally inclined to add support for rowspan/colspan, as I'm not completely clear on what all their effects on accessibility are. More relevantly, how is a table supposed to be sorted when cells are joined using such span attributes? I don't think you need nosort for AutosortTable; just don't specify sorting on that column. The styling of rows and columns can be done now, if you only knew how (see my #2). And something (else) I don't know: why would you want to have | scope="row" in an accessible table?
2. I guess your repeated question here is the answer I was waiting for from you: the documention I added is not sufficient to explain these parameters' use. Okay, I'll try to get up some time/energy and create a dedicated documentation page, with better examples.
3. This one, I can help you on. Consider a table with different data columns (duh), one or more of which you do not (at the moment) want displayed on a given page (like maybe a list of all the Wikipedia versions, but without the magnitude of the user base displayed). However, you do want the table sorted by one of those hidden columns (for example, with EN-WP at the top, 'cause it's the biggest/has the most users).

That certainly is an example of a table. Um, what should we do with it? — JohnFromPinckney (talk) 15:36, 28 February 2021 (UTC)