Module/ page design

StefanHenley

I am an instructor with (I hope) some basic questions about page design.

I am looking for some simple instructions on how to re-size and re-arrange tables on a page, and how to add or duplicate an existing table.

Most of my pages look fine, but in others the table are overlapping or in odd places and it looks bad.

petern

Hi @StefanHenley 

Sorry you're going through this.  I understand you may not have the skills to update the whole course, but there is something I would like to suggest that may help.

As @SusanNiemeyer and @Chris_Hofer have already pointed out, tables should not be used for layout.  If you want something that would allow you to achieve this type of layout, you can do this by dividing the content into DIV blocks and something called the box model.  This essentially puts your DIV context into boxes that you can lay out as you like. 

To get started on this quickly, make a new page, switch to HTML (view > HTML editor), paste this code.

<div class="content-box">
    <div class="grid-row">
        <div class="col-xs-6">
            <h1>First bit of information</h1>
            <p>content</p>
            <hr />
        </div>
        <div class="col-xs-6">
            <h1>Second bit of information</h1>
            <p>content</p>
            <hr />
        </div>
    </div>
</div>

A few things to point out:

• This will essentially create two boxes of content.  One on the left and one on the right.
• You can change the numbers to change the relative sizes of the content, so instead of 6 and 6, 8 and 4, etc, adding up to 12.
• If you switch back out of the HTML editor, you can make changes more easily.  Notice that in the editing view, the content appears underneath each other instead of side by side.  This can make it easier to edit.
• If you paste this HTML at the very top of a page that has the old content, you can copy and paste old content into the right places.
• You are not restricted to just two columns.

It might take a little bit of time to set up, but most of that will be time copying and pasting content from the old table into the new DIV.  Just be careful to not copy a table into the DIV.  This is what it can looks like with just some text in it: