Tables

[Deleted User 133]

[mention]duome[/mention], could you implement this set of BBCodes for tables, please?


BBCode usage:

Code: Select all

[table]{TEXT}[/table]

HTML:

Code: Select all

<table style="border-collapse: collapse; border-style: groove;" width=100%>{TEXT}</table>

---

BBCode usage:

Code: Select all

[tr]{TEXT}[/tr]

HTML:

Code: Select all

<tr>{TEXT}</tr>

---

BBCode usage:

Code: Select all

[th]{TEXT}[/th]

HTML:

Code: Select all

<th align=center>{TEXT}</th>

---

BBCode usage:

Code: Select all

[td]{TEXT}[/td]

HTML:

Code: Select all

<td>{TEXT}</td>

[duome]

try it

[Deleted User 133]

header 1	header 2	header 3
left	center	right

colspan header test	colspan data
header 2	data	data

Short	MediumMedium	Short

---

Principally, it looks good and useful, but I'll update the code later for headers and cells to add "colspan" (cells that span over two or more columns in a table.) I will tag you after testing. Thank you.

[Deleted User 133]

[mention]duome[/mention], please update the [th] and [td] codes as follows to use colspan and rowspan.

BBCode usage

Code: Select all

[th={NUMBER1},{NUMBER2} colspan={NUMBER1;optional} rowspan={NUMBER2;optional}]{TEXT}[/th]

HTML

Code: Select all

<th><xsl:copy-of select="@colspan"/><xsl:copy-of select="@rowspan"/>{TEXT}</th>

---

BBCode usage

Code: Select all

[td={NUMBER1},{NUMBER2} colspan={NUMBER1;optional} rowspan={NUMBER2;optional}]{TEXT}[/td]

HTML

Code: Select all

<td><xsl:copy-of select="@colspan"/><xsl:copy-of select="@rowspan"/>{TEXT}</td>

[duome]

please, test it

[Deleted User 133]

header spanning over 5 columns
header 1	header 2	header 3	header 4	header 5
left aligned cell	cell that spans over 3 columns	right aligned cell
cell that spans over 3 rows	cell	cell	cell	خانة - rtl
cell	spanning over 2 cols and 2 rows	خانة - rtl
cell	خانة - rtl
cell	cell	cell	cell	خانة - rtl

[Deleted User 133]

[mention]duome[/mention], looks like it's working exactly as intended. However, that light blue color that comes every 2nd row is disturbing.
Do you know how to change it to white from the CSS file? I tracked its source to here (attached in the screenshot):

[Deleted User 133]

Below is the code with the color change for headers and rows; just copy and paste replace the code below in the CSS file (markdown.min.css)

Code: Select all

.markdown:last-child{margin-bottom:0}.markdown li .markdown{margin-top:0}h6.markdown,h5.markdown,h4.markdown,h3.markdown,h2.markdown,h1.markdown{float:none !important;margin:1em 0 !important;border:none;padding:0;text-transform:none;line-height:1em;color:currentColor;font-weight:bold}h6.markdown:first-child,h5.markdown:first-child,h4.markdown:first-child,h3.markdown:first-child,h2.markdown:first-child,h1.markdown:first-child{margin-top:0 !important}h6.markdown:last-child,h5.markdown:last-child,h4.markdown:last-child,h3.markdown:last-child,h2.markdown:last-child,h1.markdown:last-child{margin-bottom:0 !important}h1.markdown{font-size:2em}h2.markdown{font-size:1.5em}h3.markdown{font-size:1.17em}h4.markdown{font-size:1em}h5.markdown{font-size:.83em}h6.markdown{font-size:.67em}table.markdown{margin-top:1em;margin-bottom:1em}table.markdown,table.markdown th{border:1px solid #000000; background-color:#8ee000}table.markdown td{border:1px solid #000000; background-color:#ffffff}table.markdown tr:nth-child(2n){background-color:#ffffff}table.markdown thead{color:#000000; background-color:#8ee000}table.markdown th,table.markdown td{padding:5px 5px}.forums .list-inner p,.polls p,.poll-title p,.content p,.markdown p{font-size:1em}.forums .list-inner p,.polls p{display:inline-block}.forums .list-inner p,.polls p,.poll-title p,.markdown li p{margin-bottom:0}.content p:last-child,.signature p:last-child,.markdown p:last-child{margin-bottom:0}

[Basler Biker]

It's impressive, nice. But I don't see how on earth I would want to make such complicated tables "by hand".

e.g. do you plan to copy paste a whole structured table from another system or so?
Suppose I have an Excel (I am a fan) with cells and merged cells, the lot, can it then be copy-pasted here to keep the cell arrangement? or how will this work?

[luo-ning]

Suppose I have an Excel (I am a fan) with cells and merged cells, the lot, can it then be copy-pasted here to keep the cell arrangement? or how will this work?

Use an online converter, such as https://tableconvert.com/excel-to-bbcode

Note that you can still also use the pipe-tables syntax, which is less verbose (but less powerful as you can't use colspan/rowspan)

some	heading
pipe	table
another	row

Code: Select all

some | heading
-|-
pipe | table
another | row

[Basler Biker]

Suppose I have an Excel (I am a fan) with cells and merged cells, the lot, can it then be copy-pasted here to keep the cell arrangement? or how will this work?

Use an online converter, such as https://tableconvert.com/excel-to-bbcode

Note that you can still also use the pipe-tables syntax, which is less verbose (but less powerful as you can't use colspan/rowspan)

some	heading
pipe	table
another	row

Code: Select all

some | heading
-|-
pipe | table
another | row

looks like very promising, so I gave it a try. Upload an excel doesn't work. neither copy/paste excel cells. And the manual editor does not support merged cells. A pitty. But I can do without spans. So i'll stick to excel formulas generating the pipes. But THANKS!

[duome]

Below is the code with the color change for headers and rows; just copy and paste replace the code below in the CSS file (markdown.min.css)

Ctrl+F5 to apply the changes, s'il vous plaît... )

[Deleted User 133]

Et voila! I think it's self-explanatory why I went with the green for headers.
Merci beaucoup!

[Basler Biker]

I am curious and impatient to find out how you'll use all these nice features in a language related topic

[Deleted User 133]

I am curious and impatient to find out how you'll use all these nice features in a language related topic

The BBCode used to create that "complex table" is the same one that would be used to create a table as simple as the one below

2 cols
data	data

I was just demonstrating some of the potentials the tables have now, and they can be much more complex if needed by the users. The fact is that they are more advanced than pipes.

[luo-ning]

[mention]duome[/mention] here's a fix for the bug reported by [mention]Basler Biker[/mention] in the Update [align] thread (continuing discussion here as it concerns [table], not [align]):

while we are on alignment - note that the initial "pipe" based markdown notations don't align anymore
(with or even without the very first and very last "pipe"

To fix, replace the BBCodes for td and th as follows:

td

Code: Select all

[td align={CHOICE=left,center,right,justify;caseSensitive;optional;preFilter=strtolower} colspan={UINT?} rowspan={UINT?} #createParagraphs=false]{TEXT}[/td]

Code: Select all

<td>
	<xsl:copy-of select="@colspan"/>
	<xsl:copy-of select="@rowspan"/>
	<xsl:if test="@align">
		<xsl:attribute name="style">text-align:{CHOICE}</xsl:attribute>
	</xsl:if>
	<xsl:apply-templates/>
</td>

th

Code: Select all

[th align={CHOICE=left,center,right,justify;caseSensitive;optional;preFilter=strtolower} colspan={UINT?} rowspan={UINT?} #createParagraphs=false]{TEXT}[/th]

Code: Select all

<th>
	<xsl:copy-of select="@colspan"/>
	<xsl:copy-of select="@rowspan"/>
	<xsl:if test="@align">
		<xsl:attribute name="style">text-align:{CHOICE}</xsl:attribute>
	</xsl:if>
	<xsl:apply-templates/>
</th>

These are the BBCodes used in /vendor/s9e/text-formatter/src/Plugins/BBCodes/Configurator/repository.xml and appear to be what pipe tables were originally using "under the hood", but they still allow for setting of colspan and rowspan.

[duome]

Done and dusted. Does it work as expected?

[Basler Biker]

Left	Center	Right
x	x	x

Above is the code copy-paste from Markdown example. Seems like it is OK again
Note that the Headers are now also aligned like the columns
(before, I thought, they were always centered, but the current setting is OK for me - if center needs to be, then we have the new buttons)

Left	Center	Right
x	x	x

Next, for me, remains to be found how to have Yellow on Blue for the headers. Text color I can set with the button provided, yet the background remains green for the moment...

[luo-ning]

how to have Yellow on Blue for the headers.

Why's this necessary, beyond aesthetic reasons? It's certainly possible to implement arbitrary styling features in BBCodes, but IMO not worth the added complexity unless there's a semantic case for it (i.e. it adds some well-defined, meaningful information to the content).

[Basler Biker]

how to have Yellow on Blue for the headers.

Why's this necessary, beyond aesthetic reasons? It's certainly possible to implement arbitrary styling features in BBCodes, but IMO not worth the added complexity unless there's a semantic case for it (i.e. it adds some well-defined, meaningful information to the content).

Well, the complexity was added by having "green" headers. I was happy with unmodified cyan headers, the color of the topic Titles

[duome]

The original duolingo color was blue, by the way.

[luo-ning]

Well, the complexity was added by having "green" headers.

That's not what I mean by complexity — if for example, all quoted text was fuchsia and Comic Sans MS, that still wouldn't add complexity (because all quoted text would still be consistent and not individually customizable).

Personally I'm not really a fan of the poison green table headings either, but that's a matter of personal taste.

[pawndemic]

I'm fine with the green table header for a while. It doesn't seem too hard to change this if we want to. But I'am not sure if there is a way to implement a table without a table header. Sometimes you only need the structure of a table. Yesterday I looked this up in the internet and I didn't found a clear answer. Is there a way ?Does anybody know?

[luo-ning]

[mention]pawndemic[/mention]

do	you	mean
like	this	?

Code: Select all

[table]
	[tr]
		[td]do[/td]
		[td]you[/td]
		[td]mean[/td]
	[/tr]
	[tr]
		[td]like[/td]
		[td]this[/td]
		[td]?[/td]
	[/tr]
[/table]

[Basler Biker]

I'm fine with the green table header for a while. It doesn't seem too hard to change this if we want to. But I'am not sure if there is a way to implement a table without a table header. Sometimes you only need the structure of a table. Yesterday I looked this up in the internet and I didn't found a clear answer. Is there a way ?Does anybody know?

I guess, with "pipes" - my old-fashioned method (that's the one easily generated from an excel) - you'll get a minimum "empty header row" like this
||||
|-|-|-|
|a|b|c|

a	b	c

else do like luo-ning suggested.

[pawndemic]

Yes	I	mean
a table	like	this

Aaah, very good. Thank you. I only searched for the pipe based tables. But that works for me, too.

[pawndemic]

I guess, with "pipes" - my old-fashioned method (that's the one easily generated from an excel) - you'll get a minimum "empty header row" like this

Yes, I tried this yesterday as well. But I didn't like it. But now I know how it works fine for me.

[Basler Biker]

On Dutchgrammar.com the author used tables in a very clear and useful way to explain the hardest part of Dutch grammar "word order", and many many pages were needed to explain first the standard ways, then near the end all "allowed" variants
https://www.dutchgrammar.com/en/?n=WordOrder.02

I guess, if we wanted such table here, we'd have to design it in (my preferred Excel) and then paste a screen-capture here.