Found this content helpful? Log in or sign up to leave a like!
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:
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:
Super post Peter and @StefanHenley , I've 'learned' all my HTML design from the brilliant posts of @peter and other colleagues - I can never remember exactly how to do things so keep a collection of template pages similar to what Peter has shown above.
For clarity, the design that Peter shows as an example has a few subtleties to the HTML. For some reason, ( I dont know why and this might not be exactly true bit works for me), when using content-box code the class for col-xs has to add up to 12 eg a two column table has col-xs-6 as the code above shows.
If you want a three column table then the class needs to be col-xs-4
Replicating Peter's example above eg
Would use the code:
<div class="content-box">
<div class="grid-row">
<div class="col-xs-6">
<h2>Top Row - 1st Column - Title</h2>
<p><span>Content for top row, left hand side column<hr />
</div>
<div class="col-xs-6">
<h2>Top Row - 2nd Column - Title</h2>
<p><span>Content for top row, right hand side column<hr />
</div>
</div>
<div class="grid-row">
<div class="col-xs-4">
<h3>2nd Row - 1st Column - Title</h3>
<p>Content for second row, left hand side column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 2nd Column - Title</h3>
<p><span>Content for second row, middle column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 3rd Column - Title</h3>
<p>Content for second row, right hand column column<hr />
</div>
</div>
</div>
I used the h2 and h3 tags for the subtitles.
Hope this helps..
Example 1: all tables aligned left (gap on the right)
Example 2: overlapping tables
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:
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:
Super post Peter and @StefanHenley , I've 'learned' all my HTML design from the brilliant posts of @peter and other colleagues - I can never remember exactly how to do things so keep a collection of template pages similar to what Peter has shown above.
For clarity, the design that Peter shows as an example has a few subtleties to the HTML. For some reason, ( I dont know why and this might not be exactly true bit works for me), when using content-box code the class for col-xs has to add up to 12 eg a two column table has col-xs-6 as the code above shows.
If you want a three column table then the class needs to be col-xs-4
Replicating Peter's example above eg
Would use the code:
<div class="content-box">
<div class="grid-row">
<div class="col-xs-6">
<h2>Top Row - 1st Column - Title</h2>
<p><span>Content for top row, left hand side column<hr />
</div>
<div class="col-xs-6">
<h2>Top Row - 2nd Column - Title</h2>
<p><span>Content for top row, right hand side column<hr />
</div>
</div>
<div class="grid-row">
<div class="col-xs-4">
<h3>2nd Row - 1st Column - Title</h3>
<p>Content for second row, left hand side column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 2nd Column - Title</h3>
<p><span>Content for second row, middle column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 3rd Column - Title</h3>
<p>Content for second row, right hand column column<hr />
</div>
</div>
</div>
I used the h2 and h3 tags for the subtitles.
Hope this helps..
@petern @GideonWilliams thank you so much for your help and practical guidance.
I will re-do the course using your code: you're absolute lifesavers. As I go I may have additional questions. Just sharing a screenshot below of what I created real quick using your code.
@Chris_Hofer just to respond to an earlier comment: this course was 'redone' as a part of an audit about a year ago, usually the in house IT support do this for us, but this time it was outsourced to another company and I was never happy with its design. So thanks for your feedback on that and it helps me understand what it is going on.
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
