First, we are going to create the HTML table. It's regular HTML—meaning that it has no special tags or any markup that is not HTML markup—with a thead section to hold the column headers and a tbody section to hold the data, and of course, it will invoke a Lift snippet.

The snippet structure should look familiar to you at this point, but there are a couple of things to learn. Let's check what the code looks like and then we'll see how it does its magic.

There is nothing new in the HTML, just the call to the snippet using the data-lift notation, and we were still able to create a table with a dynamic number of columns and rows. This is amazing and shows how powerful CSS selectors are.

All the magic happens in the snippet, so let's take a look at it. As far as one can tell, it's a regular snippet with no super powers, and this is the case indeed.

There are two things that made this task feasible. The first one is the & operator which lets us perform chain binding operations. In this case, we chained together the th and tbody bindings. The second is the nesting of bindings. If you take a closer look at the tbody binding, you'll see that we first bound the tr tags and in this binding we created another one for the td tags.

So, what we are doing here is telling Lift to create a table's header columns with the th binding, just as we did for the list in the previous recipe; each element of the collection headers will generate a th tag. Then, using the same technique, we told Lift to create a row for each element of the table collection. But, each element of the table collection is another collection. Look at the following figure, and you will see why we nest another bind inside the tr binding. The nested binding uses the same technique as the previous binds, th and tr. So, it will create a list of td elements.

This is how we were able to create a table with both columns and rows dynamically defined.