1. Forum
  2. >
  3. Topic: Troubleshooting
  4. >
  5. "Tables" in the forum posts

https://www.duolingo.com/profile/HartzHandia

"Tables" in the forum posts

The initial plan was to try a few things here and get rid of the post. However, Usagiboy asked to share the technique, and I simply cannot say "no" :) I'm still not happy with the way it looks, especially in the mobile site. Yet, it is better than nothing and hopefully it will be useful.

So, this table

(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;} (ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;}

 

is produced by the code below. Essentially, it is an optical illusion, a set of cell-like elements formatted with CSS and glued together by the text flow. I am not the author of the technique, the thanks should go to HeadwayCourse.

<pre>*(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;}* *(ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;}* </pre>
June 21, 2015

29 Comments


https://www.duolingo.com/profile/Artilex

So the tables aren't working anymore?


https://www.duolingo.com/profile/m.tastic

This is the best.


https://www.duolingo.com/profile/Usagiboy7

Oh hey!! You got a table to work! :D will you share the coding with us?


https://www.duolingo.com/profile/HartzHandia

These are not real tables, but yes, why not. Here is a bit more complete example: https://www.duolingo.com/comment/9199690. Here I'm just trying to make it work with the mobile version of the site.

I'll send you something shortly.


https://www.duolingo.com/profile/raans
  • 2659

Wow, this looks awesome. I wished DL would just make it available with the regular Markdown syntax (a bit easier :)). Your example in your comment above looks just great!

dd2927a3e0


https://www.duolingo.com/profile/Dessamator

Despite markdown being useful code for creating/formatting pages or text. The original spec was too ambiguous so there are many things which work differently in different versions of markdown, even using the same syntax.

I'm not exactly sure which flavor of markdown Duolingo adopted, but for those same reasons it has issues. One issue is that the original spec doesn't support tables, some flavors of markdown support that through extensions rather than using the core.

Generally speaking though, most forums don't really need tables. I've seldom found the need for it, in several forums I've used.

To put it bluntly markdown is a mess.


https://www.duolingo.com/profile/raans
  • 2659

I admit that I neither knew nor checked it. You're right, there isn't really much use of tables. The only example I can think is the our beloved "Weekly Incubator Update". I know that you already tried and posted alternatives. ;)


https://www.duolingo.com/profile/Dessamator

Yup, but this would require a lot of time from jitengore to implement. Although I could probably write a userscript to do it automatically.

Hmm, that would be a rather interesting hack :).


https://www.duolingo.com/profile/raans
  • 2659

@Dessamator: Yes, this would be really great — not the least bit selfish, here. :)


https://www.duolingo.com/profile/Dessamator

raans wrote:

@Dessamator: Yes, this would be really great — not the least bit selfish, here. :)


Well, if I knew the exact code Duolingo uses to change or submit a new post, it would be rather easy. But currently the only possibility would be to change the textarea. Something I already do with another script..

The problem is that jitengore's posts are already huge, adding all that mark-up in the text-area will make it completely unmanageable. Also, I'm currently developing another interesting user-script. Still need to debug it a lot ...


https://www.duolingo.com/profile/raans
  • 2659

That looks pretty interesting (not tried yet). I can't wait for your secret new 'weapon' (user script)... :)


https://www.duolingo.com/profile/EoghanBostock

German Pronoun {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Conjugation {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} English Pronoun {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Conjugation {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Ich {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} bin {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} I {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} am {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Du {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} bist {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} You {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Er sie es {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} ist {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} He she it {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} is {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Wir {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} sind {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} We {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Ihr {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} seid {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} You {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Sie Sie {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} sind {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} They You {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;}

.


https://www.duolingo.com/profile/silmeth

Ha, I have managed to use markdown formatting in tables for Polish IPA! :)

I needed two hacks: first, put everything with markdown after style, second – define height of element by hand (so that, regardless of formatting, every cell is the same height).

I used code like that:

*{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} letter(s)* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Polish example* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} English approximation* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} IPA*

*{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} c* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} dzie**c**ko* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} ca**ts*** *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} \[[ʦ](https://en.wikipedia.org/wiki/Voiceless_alveolar_affricate#Dentalized_laminal_alveolar)\]*

*{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} ć* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} by**ć*** *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} **ch**eap* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} \[[ʨ](https://en.wikipedia.org/wiki/Voiceless_alveolo-palatal_affricate)\]*


https://www.duolingo.com/profile/Noah_OS

(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;} (ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;}


https://www.duolingo.com/profile/Crystal987317

(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;} (ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;}


https://www.duolingo.com/profile/TseDanylo

Does it work?

<pre>(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;} (ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;} </pre>


https://www.duolingo.com/profile/scilling

Not since mid-January 2016.

EDIT: See here for an example of GitHub-flavored Markdown table syntax, which is supported.


https://www.duolingo.com/profile/Ilango71

(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;} (ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;}

Learn a language in just 5 minutes a day. For free.