Pertaining to MediaWiki (and some WordPress/BlogText) and HTML/CSS tables.

Tables were a huge annoyance, so I needed a cheat-sheet.

---

Classic MediaWiki Example ∞

{| border="1" cellpadding="1" cellspacing="0" style="border: gray solid 1px; border-collapse: collapse; text-align: left;"

{| border="1" cellpadding="1" cellspacing="0" style="font-size: 85%; border: gray solid 1px; border-collapse: collapse; text-align: left; width: 100%"

|- style="background: #ececec;"

Pretty examples ∞

{| border="0" cellpadding="2" cellspacing="1" style="border: gray solid 1px; border-collapse: collapse"

rounded corners in mozilla ∞

2021-01-25 -- This must have stopped working some time ago.

{|
|-
| style="border: 1px solid black; -moz-border-radius-topleft: 0.4em; -moz-border-radius-topright: 0.4em; -moz-border-radius-bottomleft: 0.4em; -moz-border-radius-bottomright: 0.4em;" |
test
|}

test

colours ∞

If you edit your CSS to change the style of the headers, that preference will overriding this one.

<div style="border: 1px solid #aaaaaa; color: #000; background-color: #dddddd; padding:10px; margin: 6px; margin-top: 12px;">
<h2 style="margin:0; background-color:#eeeeee;font-size:120%;font-weight:bold;border:1px solid #aaaaaa;text-align:left;color:#00000;padding:0.2em .4em;">
Title
</h2>

Body
</div>

A simple table ∞

{|
|-
| one
| two
|-
| three
| four
|}

one	two
three	four

No internal borders ∞

<TABLE BORDER=1 RULES=NONE FRAME=BOX>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
</table>

foo

foo

A complex table ∞

Pure HTML ∞

<table border=1 cellspacing=1 cellpadding=3 style="border-collapse:collapse">
<tr><td colspan=2>1</td><td>2</td><td rowspan=2>3</td><td>4</td><td rowspan=5>5</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>10</td><td colspan=2 rowspan=2>11</td><td colspan=2>12</td></tr>
<tr><td rowspan=2>13</td><td>14</td><td>15</td></tr>
<tr><td colspan=3>16</td><td>17</td></tr>
</table>

1		2	3	4	5
6	7	8		9
10	11		12
13			14	15
	16			17

MediaWiki table code ∞

{| border=1 cellspacing=1 cellpadding=3 style="border-collapse:collapse"
|-
|colspan=2 | 1 || 2 
|rowspan=2 | 3 || 4
|rowspan=5 | 5
|-
| 6 || 7 || 8 || 9
|-
| 10 
|colspan=2 rowspan=2 | 11
|colspan=2 | 12
|-
|rowspan=2 | 13 || 14 || 15
|-
|colspan=3 | 16 || 17
|}

1		2	3	4	5
6	7	8		9
10	11		12
13			14	15
	16			17

other examples ∞

• rules="rows"

• rules="cols"

{| style="border: 1px dashed black;"
|-
| One border is around the table.
|-
| style="border: 1px solid red;" | One border is around this cell.
|}

One border is around the table.

One border is around this cell.

2021-01-25 -- In BlogText, I have CSS overriding things.

Resources ∞

• https://www.w3.org/TR/REC-html40/struct/tables.html

• https://html.com/tables/ [ 1 ]

MediaWiki sortable tables:

• https://www.kryogenix.org/code/browser/sorttable/

• https://meta.wikimedia.org/wiki/Help:Sorting [ 2 ]

Last updated 2023-05-15 at 10:47:09

Footnotes



1. was http://www.htmlcodetutorial.com/tables/ [ ↩ ]
2. was meta.wikimedia.org/wiki/SortableTableExtension
   See https://meta.wikimedia.org/wiki/Sorting_lists_and_tables
   See https://phabricator.wikimedia.org/T2494[ ↩ ]