Is there a way to create a user defined function in Markdown? - html

Question

Created a blog using Jekyll and git hub pages. I need to indent to align a list of expenses. I found a way how, but I would like to insert that into a function.
Example:
Sum of Contractor expenses - $6,800
Heating and Air - $5,100
Fridge and Stove - $1,100
Hardware store purchases - $5,000
Miscellaneous - $2,000
I would like all of the amounts to line up.
According to this SO question, I can use to create a space. However, I need to insert a lot of these to obtain what I want.
Another suggestion is Tab+Space but this doesn't seem to work in the middle of the text.
From the same post, I tried using Alt+0+1+6+0 and that seems to work.
The expected results would look like this.
Sum of Contractor expenses - TAB;$6,800
Heating and Air - TAB;(5)$5,100

Answer 1

As the answer to that SO question states:
There's no way to do that in markdown's native features. However markdown allows inline HTML...
There are a couple of ways you could do this. You could use a <table> element, where the HTML looks like this:
<table>
<tr><td>Sum of Contractor expenses</td><td>$6,800</td></tr>
<tr><td>Heating and Air</td><td>$5,100</td></tr>
<tr><td>Fridge and Stove</td><td>$1,100</td></tr>
<tr><td>Hardware store purchases</td><td>$5,000</td></tr>
<tr><td>Miscellaneous</td><td>$2,000</td></tr>
</table>
Or, you could use class names and CSS, where the HTML looks like this:
<div>
<span class="description">Sum of Contractor expenses</span>
<span class="cost">$6,800</span>
</div>
<div>
<span class="description">Heating and Air</span>
<span class="cost">$5,100</span>
</div>
<div>
<span class="description">Fridge and Stove</span>
<span class="cost">$1,100</span>
</div>
<div>
<span class="description">Hardware store purchases</span>
<span class="cost">$5,000</span>
</div>
<div>
<span class="description">Miscellaneous</span>
<span class="cost">$2,000</span>
</div>
And, the CSS looks like this:
.description { width: 100px }
.cost { width: 30px; text-align: right; }
Note 1: You'll need to play with the widths to get things aligned the way you want.
Note 2: You could also apply class names and CSS to the <td> tags in the <table>.