Formatting a 2 Dimensional Array on Screen without Using Tables

Hello all,

I have an array=[rows][columns] which I would like to display on screen
without using tables. I have 3 columns. I tried doing this:

  <% row.start.upto.(row.end) do |number| %>
    <div id="left"><%= array[number][0]%></div>
    <div id="middle"><%= array[number][1]%></div>
    <div id="right"><%= array[number][2]%></div>
    <br />
  <% end %>

But this resulted in only the last row to be displayed. So I tried
doing 3 loops similar to this:

  <div id="left">
    <% row.start.upto.(row.end) do |number| %>
      <p><%= array[number][0]%></p>
    <% end %>

This resulted in displaying the whole array, but since the contents
vary in length, some of them would be rendered on more than one line,
and some not, resulting in it not looking like a grid at all.

Can anyone help me with this? I successfully did it with tables, but
was wanting to do it via css.


tries something like this ?

<% array.each do |columns| %>
  <div id="left"><%= columns[0]%></div>
  <div id="middle"><%= columns[1]%></div>
  <div id="right"><%= columns[2]%></div>
<% end %>

This produces the same result as the first code group. Only one line is
shown. That line is the result of the last iteration.


Why not do it with tables?

This seems perfectly reasonable to do it with tables due to it being a

I think all those divs are going to make it a lot more messy than a
table would be in the markup.

My 2 cents.

A perfectly good question :slight_smile:

I was trying to create a totally table-less page. I guess somethings
cannot be done without using them and that css has its limitations.

Thanks. I'll stick to tables for this particular view.