Tip: table element control via markdown

solved
#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.

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.