Creating a mixed table with text and images

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I would like to create a table of 6 columns. The first four columns would be text content and the last two columns would be images related to the text. It is a tabular catalogue of several hundred items. The images could be linked for online display and embedded for printout. (Presumably the printout style would be stored and downloaded at the request time)

I can't find any tutorials for doing this other than very emphatic directives of doing it with CSS and not deprecated HTML tags.

I'm really lost on this so if anyone has experience with this I would be happy to follow directions.
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes

Posted 7 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
If you want to do it with html something like this will start you off.

<!--

<style type="text/css">

.the_table {
width: 900px;
margin: 0 auto;
}

.a_column {
float: left;
width: 150px;
}

</style>

<div class="the_table">

<div class="a_column">
Hello 1
</div>
<div class="a_column">
Hello 2
</div>
<div class="a_column">
Hello 3
</div>
<div class="a_column">
Hello 4
</div>
<div class="a_column">
Hello 5
</div>
<div class="a_column">
Hello 6
</div>

</div>

-->

I have try'd to use very basic html so you can hopefully see what's happening and be able to edit it.

The table is 900px wide with 6 150px columns.

If you wanted it smaller you could do something like change the_table width to 600px and then change the a_column width to 100px;

To create another row just copy the 6 divs from the centre.

So it would look like this ->

<!--

<div class="the_table">

<div class="a_column">
Hello 1
</div>
<div class="a_column">
Hello 2
</div>
<div class="a_column">
Hello 3
</div>
<div class="a_column">
Hello 4
</div>
<div class="a_column">
Hello 5
</div>
<div class="a_column">
Hello 6
</div>

<div class="a_column">
Hello 1
</div>
<div class="a_column">
Hello 2
</div>
<div class="a_column">
Hello 3
</div>
<div class="a_column">
Hello 4
</div>
<div class="a_column">
Hello 5
</div>
<div class="a_column">
Hello 6
</div>

</div>

-->

Hope that helps you on your way.

Lee - http://pirouette-dance-agency.co.uk
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes
Thank you for this.

This helps me greatly
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Gop

If you want to create a table or grid with text and images, you can use HTML. An easy way to make the table, is to use the Text Editor on the HTML101 page. Click on the Table icon (it looks like a grid) to design the table. You will be able to select the number of columns and rows and choose the size of the table. Once you have the table, copy the HTML code and paste it into an HTML Widget on your Yola site.

Another alternative, is to use the Column Widget. If you use this method, you would add a Column Widget to the page. Then add another Column Widget inside the left and right columns of the first column. This will give you 4 columns. Carry on in this way until you have 6 columns across the page.

I hope you will be able to use one of these methods.

Let us know if you need more help.

Nazlie
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes
Thank you Nazlie.
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes
Hello Khun Duke,

I have been able to successfully create a table with your help. It probably needs further revision and tuning but it functions perfectly. So thank you most kindly for steering me and giving me the css and HTML that allowed me to go through this.

You can see a screen shot of a snippet here

I know that I wasn't efficient with the use of CSS in the generation of the code and would like to pursue this at some stage if possible.It is a very big table and I think that if the css was more efficient it would help reduce the loading time. The time is not such an issue as this will be used primarily as a catalogue and I can excuse this to some extent with the possible wholesale clients. It would still be faster than downloading a pdf file, but every little bit does help with the feeling of service I'm sure.