D.O.T. Patio Furniture Experts
Connect & Share!
Follow Me on Pinterest Like Me on Facebook Subscribe to my Tweets Add me to Instagram Subscribe to us on Youtube
Like Us? Like Us!
Store Locations | Contact Us | Sign In / Register

Tables with Classes

This is a short HTML page to demonstrate how to insert a table with various column arrangements

  1. 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 arrangement.
  2. 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.

  3. 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. 
       
     
       
     
  4. 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.


  5. Next, insert the content you wish for each container.
  6. 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 & accessories
PLUS SELECT PATIO FURNITURE

50% off our regular price.

3 DAYS ONLY! FEB 26TH-FEB 28TH

Village Conversation Set

Includes Loveseat, 2 Armchairs & Coffee table

SALE $749
Our Regular Price $149

Bayview Collection

Cast Aluminum Bayview Armchair
SALE $112
Our Regular Price $225

Cast Aluminum Bayview Table
SALE $449
Our Regular Price $895

Aurora Set

Cast Aluminum 5 piece Patio Dining Set
4 Aurora Armchairs with Cushions available in 2 colours & Coordinating Table

SALE $649
Our Regular Price $1295