HTML Table replacement for the Text Editor in Pressero

With the introduction of Pressero version 6 you may find that insert table button is now missing from our rich text editors. Our decision to remove this button is based on the increased demand for responsive sites (sites that respond to any device size) and unfortunately HTML tables are NOT responsive. But, many sites owners would like to break their page content into columns and the purpose of this article is to give examples of how to do this.

Here is an example of what responsive columns will look like.

From left to right the browser starts out in a desktop size and progresses smaller. During each transition the columns get smaller and eventually stack on top of each other for the smallest devices such as phones or small tablets.

How to use the following html code

1. Find the "View HTML" button on the rich text editor and click. This will open a modal window showing the current content of the page and its underlying HTML.

2. Paste the code into this box and click "Update"

3. Once the rich text area is updated you will see only text in the editor. Simply select the text you want to replace and type over it. Or enter in images in the area. Once saved the content you add will show in columns on the site. Be careful when selecting text to replace in the rich text editor, when you click and drag to select text you may be selecting and replacing necessary HTML.

2 Column Html Code

<div class="row">
        <div class="col-md-6">Column 1. Add your content here.</div>
        <div class="col-md-6">Column 2. Add your content here.</div>
    </div>

3 Column HTML Code

<div class="row">
        <div class="col-md-4">Column 1. Add your content here.</div>
        <div class="col-md-4">Column 2. Add your content here.</div>
        <div class="col-md-4">Column 3. Add your content here.</div>
    </div>

4 Column HTML Code

<div class="row">
        <div class="col-md-3">Column 1. Add your content here.</div>
        <div class="col-md-3">Column 2. Add your content here.</div>
        <div class="col-md-3">Column 3. Add your content here.</div>
        <div class="col-md-3">Column 4. Add your content here.</div>
    </div>

6 Column HTML Code

<div class="row">
        <div class="col-md-2">Column 1. Add your content here.</div>
        <div class="col-md-2">Column 2. Add your content here.</div>
        <div class="col-md-2">Column 3. Add your content here.</div>
        <div class="col-md-2">Column 4. Add your content here.</div>
        <div class="col-md-2">Column 5. Add your content here.</div>
        <div class="col-md-2">Column 6. Add your content here.</div>
    </div>

Further Information

Currently these code snippets only display as columns in our responsive skins. If you would like more options for columns please see the Bootstrap library documentation for Grid implementation.

Article ID: 785, Created: 1/7/2016 at 9:18 PM, Modified: 1/7/2016 at 11:01 PM