Help:Table/Advanced: Difference between revisions

Revision as of 18:38, 18 October 2024

Revision as of 23:21, 20 October 2024

Line 262:

'''''Note:''' See also [https://en.wikipedia.org/w/index.php?title=Together_Again_(Janet_Jackson_song)&oldid=1235924258#Charts this version] of [[Together Again (Janet Jackson song)#Charts]]. It uses {{t|col-begin}}, {{t|col-2}}, {{t|col-end}}.''

You can place two or more tables side by side. But the tables must wrap (one dropping below the other) in narrow screens if horizontal scrolling is to be avoided. HereNarrow isyour thebrowser relevantwindow wikitextto see the tables below wrap. MoreThis infoworks [https://wwwin mobile view too.w3schools.com/jsref/prop_style_display.asp here]Click on "mobile view" at the bottom of any Wikipedia page. AThese blindtables editorare whoadapted usesexcerpts afrom versions of [[screenIceland readermen's national handball team]]. saysMany [https://en.wikipedia.org/w/index.php?title=Wikipedia_talk%3AManual_of_Style%2FAccessibility&diff=1196667296&oldid=1196634188sport thisarticles methodhave isside OK].by side tables.

<syntaxhighlight lang="html">

<div style=display:inline-grid>

--Table--

</div>

<div style=display:inline-grid>

--Table--

</div>

</syntaxhighlight>

Note that the space between the tables happens because <nowiki></div></nowiki> is on a line by itself. If you want no space use this:

:<nowiki></div><div style=display:inline-grid></nowiki>

Narrow your browser window to see the tables below wrap. This works in mobile view too. Click on "mobile view" at the bottom of any Wikipedia page.

These tables are adapted excerpts from versions of [[Iceland men's national handball team]]. Many sport articles have side by side tables.

<div style=display:inline-grid>

Line 319 ⟶ 303:

|}

</div>

Here is the relevant wikitext below. More info [https://www.w3schools.com/jsref/prop_style_display.asp here]. A blind editor who uses a [[screen reader]] says [https://en.wikipedia.org/w/index.php?title=Wikipedia_talk%3AManual_of_Style%2FAccessibility&diff=1196667296&oldid=1196634188 this method is OK].

<syntaxhighlight lang="html"wikitext>

<div style=display:inline-grid>

--Table--

</div>

<div style=display:inline-grid>

--Table--

</div>

</syntaxhighlight>

The code box below was created by adding the same div around the whole [[mw:Extension:SyntaxHighlight|syntaxhightlight]] box:

<div style=display:inline-grid>

<syntaxhighlight lang=wikitext>

<div style=display:inline-grid>

--Table--

</div>

<div style=display:inline-grid>

--Table--

</div>

</syntaxhighlight>

</div>

Note that the space between the above tables happens because <nowiki></div></nowiki> is on a line by itself. If you want no space use this:

:<nowiki></div><div style=display:inline-grid></nowiki>

<code><nowiki>style=display:inline-grid</nowiki></code> can not be added within the table wikitext. It must be added outside the table wikitext. This is because the table captions will not be correctly placed in mobile portrait view, or other narrow mobile screens, when the tables wrap. This is especially noticeable if the caption is longer. In that case when one table drops below the other, then the caption will be severely wrapped above only the first column of the table.