Menu
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>
654
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
The key difference between columns and rows is that a column arranges data vertically from top to bottom, while a row arranges data horizontally from left to right.
The first trick is to use writing-mode: vertical-lr to get the text to run vertically. By itself, the text runs top to bottom, but we want it to run bottom to top, so we spin it around it with the transform: rotate(180deg) . The default transform origin is the center of the element, so this works out great.
You can create a “horizontal” table by using the table element in HTML and placing all the <th> tags in a single <tr>.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
