How to populate a table with data vertically?

Question

I have three arrays I'd like to arrange vertically in an HTML table. Each array will have its data populated in a column from top to bottom.

For example, I have three arrays:

fruit = ['pear', 'apple', 'orange']
veges = ['corn', 'radish', 'lettuce']
meat = ['beef', 'chicken', 'pork']

I want the table to look like this:

<table>
  <tr>
    <td>
      pear
    </td>
  </tr>
  <tr>
    <td>
      corn
    </td>
  </tr>
  <tr>
    <td>
      beef
    </td>
  </tr>

  <tr>
    <td>
      apple
    </td>
  </tr>
  <tr>
    <td>
      radish
    </td>
  </tr>
  <tr>
    <td>
      chicken
    </td>
  </tr>

  <tr>
    <td>
      orange
    </td>
  </tr>
  <tr>
    <td>
      lettuce
    </td>
  </tr>
  <tr>
    <td>
      pork
    </td>
  </tr>
</table>

Same problem, no solution (yet): http://stackoverflow.com/questions/3669957/transpose-a-html-table — joeytwiddle, Oct 03 '14 at 03:17
And another: http://stackoverflow.com/questions/2128663/display-data-in-columns-not-rows-using-ruby-on-rails — joeytwiddle, Oct 03 '14 at 03:19

mu is too short · Answer 1 · 2019-03-17T02:47:14.417

4

I'd probably use Array#transpose to rearrange things to match what your <table> should look like:

rows = [ fruit, veges, meat ].transpose

Now rows will look like:

[
  ["pear", "corn", "beef"],
  ["apple", "radish", "chicken"],
  ["orange", "lettuce", "pork"]
]

and generating your table is a simple matter of iterating over rows:

%table
  - rows.each do |row|
    %tr
      - row.each do |food|
        %td= food

edited Mar 17 '19 at 02:47

answered Nov 18 '14 at 22:33

mu is too short

426,620
70
833
800

score 2 · Answer 2 · edited Nov 18 '14 at 21:41

Take a look at this website: Generate vertically-ordered HTML table in Ruby

Here is the relevant code (the instance variables in this example are used simply for clarity in identifying what controls the number of columns and rows):

<table>
  <tbody>
    <% 0.upto(@rows_per_column-1).each do |row| %>
      <tr>
        <% 0.upto(@columns-1).each do |column| %>
        <% index = row + (column * @rows_per_column) %>
        <td><%= index %></td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

How to populate a table with data vertically?

2 Answers2