Problems with tables - tpl prestashop 1.6.1

[ampradas]

Problems with tables.
Hello! good afternoon;
I need help, I'm like crazy, tried to line up a table, horizontally, and I can not be impossible, I've tried it by all means. I've been with this for two days and I can not take it anymore.

This is what I'm trying to do in a .tpl file of a module.

Shipping 2 photos! -

-1 (image-1.png) this is how it appears. (This is wrong, everything is aligned down)
- 2 (image-2), (colors are aligned, but the text is not put down in its proper place.

- 3 (image-3), This is the image of how I need it to stay.

Color color color
Text
Stock


I attached code in another message below.

Forgive English I am translating from Spanish.

 

[ampradas]

Here the code attached in .txt - I would write it but leave no more than 11,000 characters. Sorry

 

[alpi]

Here the code attached in .txt - I would write it but leave no more than 11,000 characters. Sorry

you could paste only those part of code wich handle color switcher.
it seems for me like you just need to create a table for that with your code, but i dont know mutch about that, sorry.

 

[ampradas]

Hi! This is a code table.


<form name="ag_grid">

<table width="100%" border="0">

<tr>

<div class="ag_header">

{l s='Fill in the quantity for the' mod='attributegrid'} {$ag_groups.name|escape:'htmlall':'UTF-8'} {l s='you want' mod='attributegrid'}.

</div></tr>

<tr>


{foreach from=$ag_groups.attributes item=attribute name=ag_loop}

{if $smarty.foreach.ag_loop.iteration % $ag_num_cols != 0}

{else if $ag_num_cols == 1}

{/if}

{assign var='id_attribute' value=$attribute.0}

{if $ag_is_color}

{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}

{else}

<td>

<div id="ag_color_{$id_attribute}" onmouseover="{if $ag_groups.id_group == $ag_default_color_group}updateColorSelect({$id_attribute});{/if}" style="width:{$ag_groups.group_width}px;height:{$ag_groups.group_height}px; background-color: {$attribute.2};" bgcolor="{$attribute.2}">

{if $attribute.2 != ""}

&nbsp;

{/if}

</div>

</td>

{/if}

{/if}

<td width="{if !$ag_groups.group_hide_name}27{else}22{/if}%" {if !$ag_is_color}{/if}>

{if !$ag_groups.group_hide_name}<div class="ag_sing_att_name">&nbsp;{$attribute.1}</div>{/if}

<div id="price_change_{$id_attribute}" class="ag_price_change_single"></div>

{if $ag_quantity.$id_attribute > 0 && $ag_stock_display}

<div class="ag_sign_in_stock">&nbsp;{$ag_quantity.$id_attribute} {l s='in stock' mod='attributegrid'}</div>

{/if}

</td>

<div id="ag_{$id_attribute}_td_oos">

</div>

{if $smarty.foreach.ag_loop.iteration % $ag_num_cols != 0}

{else}

{/if}

{/foreach}

</table>

</td>

</tr>

</table>


</td>

</tr>

</table>

</form>

 

[ampradas]

Hello, after three days, I have already managed to align the images above and the texts below, as I needed them. Now I have another problem, when they are many elements, they come out of the container, and on mobile screens alike. What I can do?