I had some free time just now to actually play, which I never get to do. A friend was asking me how to make a bulleted list in basecamp and I pointed her toward the “Textile link](http://textism.com/tools/textile/ at the bottom of the page, when I realized I’ve never taken the time to see all that Textile can do. I’ve raved about how typing my own thoughts has never been easier than the day I finally figured out Textile, but I really truly had no idea. So my favorite new thing I learned… TABLES! Yeah, tables. I was terrified to think of how complicated it would be to try to make a table with Textile — if it were even possible — so I just blocked it out and have thus been using HTML all this time.
So here’s a table I might use…
table{width: 63%}. |. #|. Artist|. Song|. Album| |>. 1|Tom Petty|Down South|Highway Companion| {background: #eee;}. |>. 2|Fall Out Boy|Dance, Dance|From Under the Cork Tree| |>. 3|Nickel Creek|Anthony|Why Should the Fire Die?| {background: #eee;}. |>. 4|John Mayer|\2. Waiting on the World to Change| |>. 5|Mary Mary|Shackles (Praise You)|Thankful|
And the code would look like this…
|_. #|_. Artist|_. Song|_. Album|
|>. 1|Tom Petty|Down South|Highway Companion|
{background: #eee;}. |>. 2|Fall Out Boy|Dance, Dance|From Under the Cork Tree|
|>. 3|Nickel Creek|Anthony|Why Should the Fire Die?|
{background: #eee;}. |>. 4|John Mayer|\2. Waiting on the World to Change|
|>. 5|Mary Mary|Shackles (Praise You)|Thankful|
It looks like a lot of code, but once you get the hang of it, it’s so much nicer than HTML. So here’s the breakdown…
- Basically each cell is divided by a vertical bar (|) and each row begins and ends with one.
- For the header rows, you put
_.after the vertical bar in each top cell. That’s underscore, period, space. - Next, I made the number rows aligned right. To do that, I put
>.after the vertical bar for that cell. - Then, for fun I alternated the background colors on the rows by styling the background color before each row. Before the vertical bar for that row I put curly brackets to set the style (with the period and space). Then within those curly brackets, it’s CSS as usual.
- Finally, John Mayer’s song is a single, so the album title is the same, so for effect I made those two cells adjoined. To do that, I stick a slash, 2, period, and space after the vertical bar for the first cell and remove the ending vertical bar. You’ll have to look closely in the code. That one confused me at first.
The rest of the styling you see, such as the hover effects, are all in my css, but the basic table layout can all be done with Textile. It’s amazing but I rarely need to use html at all anymore. I even added a Textile plugin to Wordpress, I’m that spoiled.




