NimbleText

Manipulate text and data with light-weight patterns

Generate HTML Tables Quickly

The fastest HTML Table Generator is NimbleText.

Turn this:

firstName,lastName,instrument,born
John,Lennon,guitar,1940
Paul,McCartney,bass,1942
Ringo,Starr,drums,1940
George,Harrison,guitar,1943

Into this:

firstName lastName instrument born
John Lennon guitar 1940
Paul McCartney bass 1942
Ringo Starr drums 1940
George Harrison guitar 1943

Using this pattern:

try it → 
$once
<table>
        <thead>
            <tr>
                <th>$h0</th><th>$h1</th><th>$h2</th><th>$h3</th>
            </tr>
        </thead>
        <tbody>
$each+
            <tr>
                <td>$0</td><td>$1</td><td>$2</td><td>$3</td>
            </tr>
$once
        </tbody>
    </table>

Go ahead and try it online now.

The keywords we used were the $h, to refer to header column, $once to repeat our header and footer once only, $each+ to repeat our body once for each row (but skipping the header row... that's what the '+' is for) and the $0, $1 etc keywords, to refer to the first, and second columns, etc.

 

 

Generating HTML Tables Step by Step

Let's go through this again, but a little more slowly and taking a little more time to see what's going on.

NimbleText is the fastest way to generate HTML tables using data from excel, or any other text. To generate tables with HTML, all you need is a suitable pattern, and here's a few sample patterns to get you started!

First let's look at the general HTML you need for a 1x1 table, with a header row:

    <table>
        <thead>
            <tr>
                <th>Heading 0</th><th>Heading 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 0</td><td>Cell 1</td>
            </tr>
        </tbody>
    </table>

And depending on the styles you're using, it will look something like this:

Heading 0 Heading 1
Cell 0 Cell 1

The pattern is pretty obvious: there's a header section that repeats for each column, and then a series of rows, with each column inside a <td> tag.

And this is the kind of repetitive text generation that NimbleText eats for breakfast. That's right. NimbleText springs awake in the morning, looks around for a healthy bit of text manipulation and rubs its belly with glee.

Now hang on a minute. That's all very good, but there's not much use creating a table unless we have some tabular data to stick inside it. Say we want to turn the following data into a nice looking HTML table:

firstName,lastName,instrument,born
John,Lennon,guitar,1940
Paul,McCartney,bass,1942
Ringo,Starr,drums,1940
George,Harrison,guitar,1943

...but you could just as well have Tab Separated Data, or any other kind of data. (Generating HTML tables from Excel data is very easy, for example)

In NimbleText, we'd represent a 4 column grid with a pattern like this:

try it → 
$once
<table>
        <thead>
            <tr>
                <th>$h0</th><th>$h1</th><th>$h2</th><th>$h3</th>
            </tr>
        </thead>
        <tbody>
$each+
            <tr>
                <td>$0</td><td>$1</td><td>$2</td><td>$3</td>
            </tr>
$once
        </tbody>
    </table>

Which will be rendered to look something like this:

firstName lastName instrument born
John Lennon guitar 1940
Paul McCartney bass 1942
Ringo Starr drums 1940
George Harrison guitar 1943

You can go ahead and try it.

The first part and the last part are only produced once, so we put the command $once at the start of those sections. This is a handy thing to know.

The middle part - where our rows of data are showm - is repeated for every row of our data, so we put a $each command before it. In fact, we did something slightly trickier. Because we wanted to repeat for each row apart from the header we used the special purpose $each+ (pronounced 'dollar each PLUS') command. This just means 'repeat for every row, but **skip the header row please**, me old mate NimbleText'.

In the header part of the table, where we want to say the name of each column, we used the $h command, where:

  • $h0 means the first column of the header row.
  • $h1 means the second column of the header row.
  • $h2 means the third column of the header row.
  • And so on to eleventy million and three.

And the only other command we've used in that example is the most basic command of all: $0, $1 etc.

  • $0 means the first column of the current data row.
  • $1 means the second column of the current data row.
  • $2 means the third column of the current data row.
  • And so on to eleventy billion and seven.

I've also prepared some other example patterns, to generate HTML tables with specific numbers of columns:

But what if you want to generate tables with an arbitrary number of columns? For that you'll need a Meta-pattern... a pattern that generates a pattern. I happen to have one of those handy as well.

$once$dollar;once
<table>
        <thead>
            $each<th>$dollar;h$rowNum</th>$once

        </thead>
        <tbody>
$dollar;each+
            <tr>
                $each<td>$dollar;$rowNum</td>$once

            </tr>
$dollar;once
        </tbody>
    </table>

There's no shortcut to try that pattern online, because that example won't work online. It uses the '$dollar;' keyword which only works in the desktop version of NimbleText (just a download away). Even though the online version is very popular and versatile, the desktop version is quite a bit more powerful and responsive, allowing you to reuse patterns, save the results and so on. You can peruse a comparison of the online and desktop versions right now if you so wish.

In any case, there you have it. A complete solution to all your HTML Table generation needs, in one handy tool that just can't stop being mega useful all the time. And of course it doesn't just generate HTML tables. All sorts of HTML can be repetitive, and NimbleText is ready to help. Whether you need to generate an Ordered List, or generate an Unordered list, automate creation of repetitive form elements or any other one of the tiny little instances of repetition that wear us down day in day out. And it's not just HTML that NimbleText munches on for breakfast. It happily generates text of all sorts, be it JSON, CSS, SQL, PHP, Python, Ruby, code of any language, data structures of any ilk, this is the versatile little wizard to get the job done with minimum fuss and a big smile on your face.

Your boss won't believe it how quickly you plow through the work, your hands will thank you for freeing them of all the repetitive clickety clack and your brain will thank you for letting it think about the higher level problems and less of the low level repetitive typey type.

Further help

You can also get general help, help on all the symbols and keywords, or on the built-in functions, filtering with a where clause, help with the powerful command-line automation, or applying custom formats to your dates and times.

You need to purchase a license to unlock all the features in NimbleText.

If you haven't downloaded NimbleText yet, then for added power, privacy and versatility I sincerely think you should download it now.

Download NimbleText