Stacks4Stacks

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. For tables that reflow to fit smaller screens, the FlatPack stack is another alternative.

Example

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

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.