In your editor, insert a table, then use the view toggle button to switch to html source view. There you will see values for the widths of the columns, just alter them to suit:
Since I am not in HTML programming (I developing training content) I am bit apprehensive about code changes.
Thanks for the help.
Yes, I tried full screen editor, but could not locate any method for resizing columns or rows. Nor I could figure out ways to format rows or columns (e.g. to impart a background color).
Would it work better for you to add this content as a link rather than use the html editor?
Will try this.
In the Fullscreen editor mode, you choose the cell properties button to set column widths, background and text colors etc. Safest to stay out of the html if you're not sure of it.
I've tried formatting tables in the HTML editor using the table properties button, but I can't figure out a way of saving the changes. So, after I set the properties I want, I close the table properties box, but the table looks exactly as it did before...
Can anyone help me?
Please ignore my request for help... I don't know why but my table properties box was opening in such a size that the OK button wasn't visible...
On a related note I am really struggling to get the HTML editor to recognise table height settings. I have tried to use the enlarge editor view and also the table properties but to no avail.
I have got a really enthusiatic member of staff who wants to create hot spots with pictures and tables and I really dont want to let her down. Any help would be massively appreciated.
<table width="100px" height="100px" border="1"><tbody>
The Moodle editor is not all that great when it comes to working with tables. So, unless you are really good with html, I've found it is a lot easier to create tables offline using something like FrontPage and then copy/paste the code in Moodle. I'm working on training videos this morning, so since I have everything set-up, I took a couple of minutes to show you how I do tables for use in Moodle.
Here is the table:
Here is how I created it:
I copied the code that Itamar posted and put two slices of an image inside the table with the hope that the table height would force them together. I even set the table height to the exact combined height of the two images yet still no success.
I did notice that the "px" at the end of "width="100px" height="100px" was disapearing from the HTML view whenever I returned to it after saving. I am not sure if that could be part of the reason for the failure. Also thanks for the video I will have a go at creating some HTML in frontpage tonight and see if that works.
The obvious quick workaround is to make one image from the two but that might not be very effective if there are lots of other parts where these two come from. Absolute positioning may also solve the problem but that's a pain. So we'll have to look for something else.
The problem is not necessarely in editor - check also theme css. There may be for example some body level margin or padding for <img> causing the cap.
Unfortunately copying the HTML from Frontpage or Dreamweaver doesnt seem to help. It looks fine in them but once the HTML is in a Moodle course the dreaded horizontal gaps re-appear.
I am not sure if this is along the lines of what you meant Mauno but I have also tried some different themes but have noticed no discernible difference.
One useful thing I have discovered is that the gaps disappear when viewing the course in IE6, its just a shame our college uses Firefox.
Well, this isn't a fix for the horizontal gap in the table, but I'm not sure why you are splitting a 100px high image anyway. Why not just include it as a single image?
This seems to be a firefox browser bug - one solution is to use style="display: block;" and no <br> tags between images. Tested in all browsers and works like in menus where you do not want to leave caps between rows. Like this:
<td><img src="address of image 1" style="display: block;" /><img src="address of image 2" style="display: block;" /></td>
Beautiful! Thank you.