New left, right and center-aligned table bbCodes. New escape bbCode.

[Dave Keenan]

In addition to the basic table bbCodes: [table], [tr], [th], [td], Douglas and I have added the following table bbCodes to allow both headings and data to be aligned left, right or center:

	left-aligned	centered	right-aligned
heading	[thl]	[thc] or [th]	[thr]
data	[tdl] or [td]	[tdc]	[tdr]

We also defined a new bbCode [_] for escaping other bbCodes, i.e. for preventing them from being interpreted, so that we can talk about them in forum posts. The bbCode [_] merely generates a left square bracket [. For example, to talk about the bold bbCode [b] you would write [_]b]. i.e. you would insert _] (i.e. underscore, right bracket) after the opening square bracket of the bbCode whose interpretation you want to prevent.

The above table makes use of all these new bbCodes. Here is the code that generated it (with the content shown in red):

[table]
[tr][th][/th][thl]left-aligned[/thl][thc]centered[/thc][thr]right-aligned[/thr][/tr]
[tr][thl]heading[/thl][tdl][_]thl][/tdl][tdc][_]thc] or [_]th][/tdc][tdr][_]thr][/tdr][/tr]
[tr][thl]data[/thl][tdl][_]tdl] or [_]td][/tdl][tdc][_]tdc][/tdc][tdr][_]tdr][/tdr][/tr]
[/table]

[cmloegcmluin]

And if you want to get really fancy, we've also added the ability to merge cells horizontally. You may need this feature, for example, if you want to have separate columns for the terms of your quotients and your prime count vectors, while still having one centered cell which spans across them holding the main column title:

exact		quotient			vector
symbol	name	n	/	d		2	3	5	7		cents
	11M	33	/	32	[	0	0	1		⟩	45.450¢
	25/49M	50	/	49	[	1	0	2	-2	⟩	33.400¢

The way to use this feature is simple. For any table cell bbCode ([th], [td], [thl], [thc], [thr], [tdl], [tdc], [tdr]), inside the brackets, add an equals sign followed by the number of columns to span, like this: [th=6]. It is important, though, that you then delete n-1 cells just to the right of the cell to which you are adding a span, to counteract its new span.

Here's an example:

      1           2        3        4        5        6          7
[th]vector[/th][th][/th][th][/th][th][/th][th][/th][th][/th][th]cents[/th]

becomes:

   1 2 3 4 5 6         7
[th=6]vector[/th] [th]cents[/th]

So, I set my column span to 6, and then deleted the 6 - 1 = 5 cells just to the right. Those five cells have essentially been merged with this "vector" cell.

We do not yet support vertical merging. If anyone needs it, let me know.

[Dave Keenan]

For those who may want to implement these BBCodes on other forums, here are the patterns, replacements and help-lines:

[Edit: These stopped working when the forum software was upgraded. See two posts down for the new versions.]

[table={NUMBER;defaultValue=0}]{TEXT}[/table]
<style>table.sag-tbl-{NUMBER} td {border: {NUMBER}px solid black; border-collapse: collapse;}</style>
<style>td, th {padding: 0 5px 0 5px;}</style>
<table class='sag-tbl-{NUMBER}' style='padding: 0 0 0 1px; display: block; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Tahoma, monospace'>{TEXT}</table>
Table

[td colspan={NUMBER;optional}]{TEXT}[/td]
<td colspan="{@colspan}">{TEXT}</td>
Table data (left-aligned)

[tdc colspan={NUMBER;optional}]{TEXT}[/tdc]
<td colspan="{@colspan}" style="text-align: center;">{TEXT}</td>
Table data centered

[tdl colspan={NUMBER;optional}]{TEXT}[/tdl]
<td colspan="{@colspan}">{TEXT}</td>
Table data left-aligned

[tdr colspan={NUMBER;optional}]{TEXT}[/tdr]
<td colspan="{@colspan}" style="text-align: right;">{TEXT}</td>
Table data right-aligned

[th colspan={NUMBER;optional}]{TEXT}[/th]
<th colspan="{@colspan}">{TEXT}</th>
Table heading (centered and bold)

[thc colspan={NUMBER;optional}]{TEXT}[/thc]
<th colspan="{@colspan}">{TEXT}</th>
Table heading centered (bold)

[thl colspan={NUMBER;optional}]{TEXT}[/thl]
<th colspan="{@colspan}" style="text-align: left;">{TEXT}</th>
Table heading left-aligned (bold)

[thr colspan={NUMBER;optional}]{TEXT}[/thr]
<th colspan="{@colspan}" style="text-align: right;">{TEXT}</th>
Table heading right-aligned (bold)

[tr]{TEXT}[/tr]
<tr>{TEXT}</tr>
Table row

[_]
&lbrack;
To escape a bbCode: Instead of [b] write [_]b]

[Dave Keenan]

Upgrading the forum software from phpBB 3.3.2 to 3.3.10 broke the above table-related BbCodes.

As you can see above, we were making the data-cells take on borders of the same width as the table border by using <style> elements in the body of the page, which was always going against the HTML spec and relying on the good grace of the browsers. And now it seems the latest BbCode translator doesn't allow it.

The temporary replacement for [table] was:

<table style="border: {NUMBER}px solid black; border-collapse: collapse; padding: 0 0 0 1px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Tahoma, monospace;">{TEXT}</table>

And I added
style="padding: 0 5px 0 5px;"
to all the td* and th* BbCodes.

[Dave Keenan]

I finally got it to work the same as it used to before the upgrade, by using the following patterns, replacements and help-lines:

[table borderwidth={NUMBER;defaultValue=0}]{TEXT}[/table]
<script>window.tableBbcodeBorderWidth = "{@borderwidth}px";</script>
<div style="overflow-x: auto; overflow-y: hidden;"><table style="border: {@borderwidth}px solid black; border-collapse: collapse; padding: 0 0 0 1px; white-space: nowrap; font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Tahoma, monospace;">{TEXT}</table></div>
Table

[td colspan={NUMBER;optional}]{TEXT}[/td]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data (left-aligned)

[tdc colspan={NUMBER;optional}]{TEXT}[/tdc]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px; text-align: center;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data centered

[tdl colspan={NUMBER;optional}]{TEXT}[/tdl]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data left-aligned

[tdr colspan={NUMBER;optional}]{TEXT}[/tdr]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px; text-align: right;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data right-aligned

[th colspan={NUMBER;optional}]{TEXT}[/th]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px;">{TEXT}</th>
Table heading (centered and bold)

[thc colspan={NUMBER;optional}]{TEXT}[/thc]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px;">{TEXT}</th>
Table heading centered (bold)

[thl colspan={NUMBER;optional}]{TEXT}[/thl]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px; text-align: left;">{TEXT}</th>
Table heading left-aligned (bold)

[thr colspan={NUMBER;optional}]{TEXT}[/thr]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px; text-align: right;">{TEXT}</th>
Table heading right-aligned (bold)

[tr]{TEXT}[/tr]
<tr>{TEXT}</tr>
Table row

[_]
&lbrack;
To escape a bbCode: Instead of [b] write [_]b]