How to create a table without using the table tag

How to create a table without using the table tag

by Mari Cruz García -
Number of replies: 5

Dear Moodles,

I apologise in advance if my query is too silly. I am an educational technologist who is keen to learn about css, but I am not a web designer.

I am customising our Moodle site based on the theme cover:

testlz.health.org.kw:4949/

I thought that it was OK to create a table with insterted images to point out our learners to different courses of our Moodle site, until one of my colleagues told me that tables are not a smart design any more.

I have been looking in Internet about how to create a table structure in css. However, in my case I am using the 'topic' section of the frontpage to create the table structure.

Should I not use the 'topic' section for that?

Should I alter the code of the frontpage.php instead?

I would really appreciate if you could please advice about the best practice for that.

Thank you very much.

Average of ratings: -
In reply to Mari Cruz García

Re: How to create a table without using the table tag

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Nano Nano...smile

There is nothing stopping you using TABLES in Moodle as there is the facility in the Text Editor to add a table. You just need to be aware of the width of the page so use percentages not fixed widths.

I hope that answers your question?

Average of ratings: -
In reply to Mary Evans

Re: How to create a table without using the table tag

by Mari Cruz García -

But is it not a bad practice in terms of accesibility, Mary?

I have compared my site with this:

http://moodle.leedscitycollege.ac.uk/

I have noticed that they don't use a table, but this structure:

<div id="holder">

<div id="holderleft">

<div class="navigationmenu"> 

ahref=Image 1

ahref=Image 2

ahref=Image 3

</div>

 <div id="holder">

<div id="holderleft">

<div class="navigationmenu">

and then:

<div id="holderright">

<div class="navigationmenuright">

<ul>

I was wondering how I could use div id and div class to create the table structure.

Regards
Average of ratings: -
In reply to Mari Cruz García

Re: How to create a table without using the table tag

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

It depends on the structure. How you want to display the images.

What are the size of the images?

Are the image uniform sizes or different?

What is the max & min size of the space available on your webpage?

When you have gathered all this information together, then you can decide on the how you want the images to look. The best way to do this is draw a plan, and work out mathematicaly the dimensions you need to make the images stack inside the container, allowing for padding and margins.

You could actually use the http://960.gs grid system as a framework.

Hope that helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: How to create a table without using the table tag

by Mari Cruz García -

Thank you very much for the link, Mary. I will have a look to the software.

The images are all  height="180" width="242", I calculated the dimensions so that I could have 6 images (3 columns X2 rows) on the frontpage so that users with small screens and tables are able to see all the options without having to scroll down or move the horizontal bar.

Regards

Average of ratings: -
In reply to Mari Cruz García

Re: How to create a table without using the table tag

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

In that case you could upload the images into the Editor and then using the Advanced features in the Editor Image menu you can add custom css. So float one left and the other right and separate them with a <p>,/p> tag....like so...

<p><img style="float:left; margin: 10px 10px 0 0; width:242px; height:180px;" src="http://pathtofile" alt="img01" /><img src="http://pathtofile" alt="img01" /><img style="float:left; margin: 10px 0 0; width:242px; height:180px;" src="http://pathtofile" alt="img02" /><img src="http://pathtofile" alt="img01" /></p>

<p style="clear: both;"><img style="float:left; margin: 10px 10px 0 0;width:242px; height:180px;" src="http://pathtofile" alt="img01" /><img src="http://pathtofile" alt="img03" /><img style="float:left; margin: 10px 0 0; width:242px; height:180px;" src="http://pathtofile" alt="img04" /><img src="http://pathtofile" alt="img01" /></p>

<p style="clear: both;"><img style="float:left; margin: 10px 10px 0 0; width:242px; height:180px;" src="http://pathtofile" alt="img01" /><img src="http://pathtofile" alt="img03" /><img style="float:left; margin: 10px 0 0; width:242px; height:180px;" src="http://pathtofile" alt="img04" /><img src="http://pathtofile" alt="img01" /></p>

Average of ratings: -