Parva Design - PageBlender Tables

How to use:

General
Tables
Matrix

Navigation

Tables

One of the most powerful parts of the display powers of PageBlender is in its special way of defining tables. This is done with the #grid and #sortgrid commands. Used simply the command is entered on a line in the source file, followed by a number lines containing the contents of each cell in a row, separated with the pipe character (|), ending with a line containing #nogrid which turns off the processing for the table.

will produce

Fruit	Pear	Loose	2.00
Fruit	Apple	Loose	1.80
Fish	Trout	Loose	8.00
Fish	Herring	Loose	10.50
Fruit	Apple	Prepacked	3.00
Fruit	Pear	Prepacked	4.00
Prices may vary

But this is a bit jumbled, so let's sort it. This can be done just by changing the #grid to #sortgrid, like this

which will give us

Fish	Herring	Loose	10.50
Fish	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
Fruit	Apple	Prepacked	3.00
Fruit	Pear	Loose	2.00
Fruit	Pear	Prepacked	4.00

Easy. But let's start to tidy it up. Maybe we don't really want the words Fruit and Fish repeated, we only want them once. All be need to do is add the norepeat directive (not relevant on a normal grid of course, only on a sorted grid) like this

which will give us

Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

Getting there. Now let's add a header to the columns. All we have to do is add the headers as the first line and then exclude it from the sort with the header directive, like this

which will give us

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

Now let's go to town with styling the table. First, make the font a bit smaller b y using the stylegrid directive. Any style text can be used but we'll just use font-size for now. This will set styles at table level.

which will give us

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

Now, because the last column is a money column we really would like it aligned to the right. We can use the colstyles directive on as many columns as we like so we'll also make the first column bold

which will give us

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

Now let's make the table 400px wide and set the column widths. The width can be done at table level so we just need to add a bit to the stylegrid settings. While we're at it we can add a border around the table using the stylegrid directive. The column widths can be set with the colwidths directive

which will give us

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

Now let's add some colour to the header by changing the header directive to include a colour for the background. This is done by simply adding the colour code in braces

which will give us

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

Now we can go to town on the grid by using striping. We can easily put a stripe effect on where every other row is coloured by using the stripe directive

which will give us

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

If stripe is used on its own the stripe colour will be white which is useful when the table has a background colour but we've given it a pale blue colour because our table is white.

Now we can, just because we feel like it, do the same across the table by using the stripev directive. This will colour alternate columns but won't overwrite horizontal striping

which will give us

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked	4.00

Of course, sometimes a file of values is provided and this must be displayed as a table. The #grid and #sortgrid statements have another parameter, src(filename), which will allow a comma or tab separated text file to be specified as the source of the grid. Any lines contained in the file will be converted for use in the statement and will be added to the top of any other data in the grid. This means that our table can be made to incorporate a text file (which we'll call produce.csv in this example) containing:

Type,Description,Packaged,Price
Fruit,Pear,Loose,2.00
Fruit,Apple,Loose,1.80
Fish,Trout,Loose,8.00
Fish,Herring,Loose,10.50
Fruit,Apple,Prepacked,3.00
Fruit,Pear,"Prepacked, special offer",4.00

by adding the src parameter:
#sortgrid norepeat header(#FFFF80) stylegrid(font-size:0.7em;width:400px;border:1px solid #800040) colstyles(font-weight:bold,,,text-align:right) colwidths(30%,30%,30%) stripe=#AAFFFF stripev=#FFB7FF src(produce.csv)
#nogrid

which will give us exactly the same result but which just means a simple rebuild of the page if the data file changes. Note that the last item has been changed to demonstrate that commas can be incorporated in the data by wrapping the column data in double quotes, a method used by most spreadsheet programs when data is exported.

Type	Description	Packaged	Price
Fish	Herring	Loose	10.50
	Trout	Loose	8.00
Fruit	Apple	Loose	1.80
	Apple	Prepacked	3.00
	Pear	Loose	2.00
	Pear	Prepacked, special offer	4.00

That sums up how to handle tables using the #grid and #sortgrid commands in PageBlender.