Tip: table element control via markdown

Showcase
1

Hi all,
a simple solution for users wanting to control table element in markdown.

  1. css can be written directly into .md
  2. apply class to table by using <div class='MY_CLASS'></div>
  3. use css combinators

*Must turn on Markdown Extras in Admin panel to work.

tablehack
tablehack.png1752Ă—897 185 KB

inside markdown with css

you can actually copy and paste the source below to your .md

<head>
  <style type="text/css">
    div.alpha + table  { width: 800px; }
    div.right + table  { float:right; margin-left:80px}
    div.left + table  { float:left; margin-right:80px}
    div.alpha + table th { border: 1px solid black; background-color:navy; color:ivory; }
    div.alpha + table tr:nth-child(even) {background: palegreen}
    img.shadow { width: 10%; padding:1px; border: solid 2px gray; box-shadow: 10px 10px 8px #888888; }
    .circle{ border-radius: 50%; width:10%}
    img {width:200px;}
  </style>
</head>



#### normal


 nomal   |      markdown     |  table
----------|:-------------:|------
nothing | special | going on

##### LOREM via unix fortune: 10 points to CSS combinators !


<div class="alpha right"></div>

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |


This "brain-damaged" epithet is getting sorely overworked.  When we can
speak of someone or something being flawed, impaired, marred, spoiled;
batty, bedlamite, bonkers, buggy, cracked, crazed, cuckoo, daft, demented,
deranged, loco, lunatic, mad, maniac, mindless, non compos mentis, nuts,
Reaganite, screwy, teched, unbalanced, unsound, witless, wrong;  senseless,
spastic, spasmodic, convulsive; doped, spaced-out, stoned, zonked;  {beef,
beetle,block,dung,thick}headed, dense, doltish, dull, duncical, numskulled,
pinhead;  asinine, fatuous, foolish, silly, simple;  brute, lumbering, oafish;
half-assed, incompetent; backward, retarded, imbecilic, moronic; when we have
a whole precisely nuanced vocabulary of intellectual abuse to draw upon,
individually and in combination, isn't it a little <fill in the blank> to be
limited to a single, now quite trite, adjective?

---

<div class="alpha left"></div>

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |


#### gotta love them markdown extras!
![](rickenbacker.jpg)
![](rickenbacker.jpg){.shadow}
![](rickenbacker.jpg){.shadow .circle}
2 Likes
2

Very surprising to me: I was expecting to see two <head> elements in the page but that’s not the case. Works perfectly. Very powerful!

3

thanx !

I had the biggest grin when I came up with this hack.

4

Does this still work at GRAV 1.7.37? I tried a very simple version of your example and it errors on “Call to a member function getAttribute() on null” at ParsedownExtra.php:489. Markdown Extra is enabled.

div.alpha + table { width: 800px; } div.alpha + table th { border: 1px solid black; background-color:navy; color:ivory; } div.alpha + table tr:nth-child(even) {background: palegreen}

Calendar

Date Event
19 Assembly Meeting

Just noticed that the way my sample code was rendered above is how I hoped it would be.

5

Sorry, I’m interested in knowing about table handling but I don’t really understand what you get out of putting CSS styles in the markdown file…

Once you set the class in the table using a div tag, can’t you reference it in the same way from the stylesheet of your theme?

Thanks for the clarification

6

Possibly having this style information in a more general location is a better approach. However, I would like more control over how tables are presented on a page-by-page basis.