Tables with Classes
This is a short HTML page to demonstrate how to insert a table with
various column arrangements
- First determine the most common or complex column arrangelment in
your layout. We will use this as the main table class, and use
other classes to override where needed.
For the purposes of this tutorial, we will use the February Black
Friday Sale as an example. The layout consists of two single
colulmn rows, a four column row, followed by 3 two column rows, and
another single column row, and a 3 colulmn row. All rows are easily
relative to 4 but for the last one - so we will leave it in its own table. Let's ignore the last two for this excercise and go with a 4 column
- First, place your cursor after the line indicated below these
steps, and insert the table by using the Table tool. Set the parameters
as shown (8 rows, 4 columns, 100% width, and choose the layout class
that you want to use for the arrangement.
- Next, merge the cells on each row as appropriate. First, to change
or set parameters, click somewhere in the row the click the Merge
Tool. Set the parameters to one row and one column and hit
Update. Now, select the cells in the first row, then click the
Merge Tool again. Repeat for row 2. For
Rows 4, 5 and 6 select the first two cells and click the Merge Tool,
then select the last two and click the Merge Tool.
- Now, the columns will naturally flow to the best width that can fit the contents. When we want to control this to use same sized widths, we have to tell the layout engine how to render those merged
columns. We do this with more classes. Place your cursor in
the row that you need to configure. We will use the last row.
Click on the Row Tool. Set the class for the columns in that row. For
this row, we will use Cols2 (even though my screen shot shows cols3); for row 3, we will use Cols4, for rows
4 and 5, Cols2.
- Next, insert the content you wish for each container.
- Preview and make adjustments as necessary
- The only adjustement I would make beyond this point, is to crop that second image on the row 3 to make it the same height:width ratio as the others in the row
Start your table on the next blank line:
Your table should look like this when finished:
BLACK FRIDAY SALE
All in-stock indoor furniture
PLUS SELECT PATIO FURNITURE
50% off our regular price.
Village Conversation Set
Loveseat, 2 Armchairs & Coffee table
Our Regular Price $149
Cast Aluminum Bayview
Our Regular Price $225
Aluminum Bayview Table
Our Regular Price $895
Cast Aluminum 5
piece Patio Dining Set
4 Aurora Armchairs with Cushions available in 2 colours
& Coordinating Table
Our Regular Price $1295