TableBuilder v2 was released in November 2020. This update expands the maximum number of columns to 15 and includes a couple of other feature requests. You can login to your Paddle account to see if you are eligible for this free update. If TableBuilder is listed in your Paddle account, you can download this newer version for free.

On small screens (like smartphones) the table contents scroll horizontally. Conventional HTML table markup is always used throughout, so you're assured the completed table will look and function perfectly in all web browsers. This table stack is also very good for SEO (search engine optimisation).

Tables can be useful in many websites, to display tabular data. However their integrate markup can often prove complicated for people not familiar with using HTML code. The TableBuilder stack was made to help RapidWeaver users create tables, in the absence of any other suitable stacks or plugins. TableBuilder has become the go-to stack for thousands of users.

If you are only interested in dragging-and-dropping a readymade CSV file into RapidWeaver to generate a table, then look at CSVToTable as an alternative stack. CSVToTable does not have a 15 column limit, and therefore can be used for larger tables.

Example

This table was build using TableBuilder. It demonstrates how tables are excellent to use for tabular data; in this instance a comparison chart.

John Deere 7230
Case IH 125
McCormick MT135
New Holland T60
Massey Ferguson 6565
JCB Fastrac 8330
Engine
6.8 litre Deere
6.7 litre FPT
6.8 litre Iveco
6.7 litre FPT
6.0 litre Perkins
8.4 litre Cummins
PTO Horsepower
126 hp
114 hp [colspan="2"]
114 hp [null]
110 hp
125 hp
182 hp
PTO Speeds
540 / 540E / 1,000 r.p.m
540 / 1,000 r.p.m [colspan="3"]
540 / 1,000 r.p.m [null]
540 / 1,000 r.p.m [null]
540 / 540E / 1,000 r.p.m
540 / 1,000 r.p.m
Drawbar Pull
14,876 lb
10,340 lb
10,330 lb
10,225 lb
10,675 lb
18,400 lb
Max Road Speed
42 k/hr
40 k/hr
38 k/hr [colspan="2"]
38 k/hr [null]
40 k/hr
70 k/hr
Spool Valves
4 [colspan="3"]
4 [null]
4 [null]
3
5
6
Cab Sound Level
70 dB
85 dB
80 dB
85 dB
68 dB
55 dB
Hydraulic Flow Rate
104.3 l/min
56.2 l/min
58 l/min
57.4 l/min
102.1 l/min
178.2 l/min
Fuel Capacity
207 litres
250 litres
260 litres
250 litres
260 litres
250 litres


Setup

Install TableBuilder into Stacks / RapidWeaver in the normal way. Open your Stacks Library to drag-and-drop a copy of TableBuilder into your webpage.

To get started, click the blue button to add a row of table cells. Then in the TableBuilder stack settings, choose how many columns to display in each row (up-to 15 columns are supported). Drag-and-drop suitable content into each table cell, like text or images. Your table will be marked-up using conventional HTML table code; so you can be assured the completed table will display reliably on all modern web browsers and will be optimised for search engines. On smaller screens, the table scrolls horizontally.

Style options also exist, allowing you to customise the appearance of your completed table. Backgrounds, borders, and padding are all feasible. If you want to change the appearance of a particular row (e.g. make the first row you add a 'header' row), select the row above and check the Override Table Styles option in the row settings; which will let you set custom styling on that row.

Creating table column and row headings

To create column headings along the top of the table, select your first table row and check the Override Table Styles option. Now you can give this row unique styling, like a background fill, text alignment changes and bold text. The same technique could be used to create a table footer.

For the display of a row heading down the left side of the table, select the main TableBuilder stack and enable the Make First Columns Headings. This action will present you with additional style settings, for the first column of your table.

Merging table rows and columns

Merging means joining neighbouring cells together, to form one larger cell area. If you look at the table above for Spool Valves, the first three entries all share the same number (4). We can simplify the table presentation by removing the dividers between these table cells and getting them to share the same value.

To merge table columns, type [colspan="2"] into the first cell, of the group you wish to merge. Change 2 to the number of cells you want to merge together. Within the cells being merged (excluding the first cell) type [null] to remove the empty cells. A maximum of 15 columns can be merged, from the first cell.

To merge table rows, type [rowspan="2"] into the first cell, of the group you wish to merge. Change 2 to the number of cells you want to merge together. Within the cells being merged (excluding the first cell) type [null] to remove the empty cells.

The downloadable sample project file above demonstrates some simple cell merging.