Elxis CMS Forum

Support => General => Topic started by: armpouniotis on March 31, 2020, 19:52:10

Title: Div or table ?
Post by: armpouniotis on March 31, 2020, 19:52:10
Hi there !

Is it better to use divs or tables in website template's design ?

Does this affect Google search results ?

I am using tables for more than 20 years, but if someone explains to me why I should use divs rather than tables, then I will change it !

Thank you in advance
Christos
Title: Re: Div or table ?
Post by: datahell on April 05, 2020, 13:09:03
2 totally different things. For design purposes use DIVs. To present list data you can use tables or lists. Never use tables for structure/design purposes for your site. I would suggest you to use tables when it is absolutely necessary.

Responsive tables in Elxis
In Elxis we display responsive tables the following way. As the user's screen resolution becomes smaller and smaller we progressively hide the less important columns one by one till a very basic table is been displayed to mobile devices. The CSS classes we use are:

elx5_midscreenhide (1240px)
elx5_smallscreenhide (980px)
elx5_tabhide (767px)
elx5_lmobhide (650px)
elx5_mobhide (480px)

Sample usage:
<tr>
   <td>Always show</td>
   <td>Always show</td>
   <td class="elx5_mobhide">Hide 480px</td>
   <td class="elx5_lmobhide">Hide 650px</td>
   <td class="elx5_tabhide">Hide 767px</td>
   <td class="elx5_smallscreenhide">Hide 980px</td>
   <td class="elx5_midscreenhide">Hide 1280px</td>
</tr>

Off course you can have more column and different ordering in your table cells. Also the same CSS classes applies to table head (th cells).
You can also create more complex structures. Example:

<td class="elx5_lmobhide">
         Hide cell on 650px
         <div class="elx5_tip elx5_smallscreenhide">Long, tip, hide on 980px</div>
</td>
Title: Re: Div or table ?
Post by: armpouniotis on April 05, 2020, 22:35:59
ok !

I will use Divs then !

I will have a look at those classes, since they are very responsive !

Thank you very much !
Christos