Most of the time it makes sense to organize table data in rows. However right now I'm dealing with a table that compares data across several columns. Each column is a product, so I'd like to keep all product data grouped together.
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
<td>Compatibility</td>
<td>Designer</td>
<td>Manufacturer</td>
<td>Age Requirement</td>
</tr>
Using the TR tag that row will run horizontally, is there a way to make it run vertically?
Update: I would like the table to display like regular html in this example:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
However I would like to be able to code it by related content:
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
In other words, I want the table row tag (tr) to act like a column.
<tr>
<td>Name</td>
</tr>
<tr>
<td>Price</td>
</tr>
<tr>
<td>Weight</td>
</tr>
<tr>
<td>Height</td>
</tr>
<tr>
<td>Compatibility</td>
</tr>
<tr>
<td>Designer</td>
</tr>
<tr>
<td>Manufacturer</td>
</tr>
<tr>
<td>Age Requirement</td>
</tr>
If you want another product beside it, you would do:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
<tr>
<td>Compatibility</td>
<td>Compatibility2</td>
</tr>
<tr>
<td>Designer</td>
<td>Designer2</td>
</tr>
<tr>
<td>Manufacturer</td>
<td>Manufacturer2</td>
</tr>
<tr>
<td>Age Requirement</td>
<td>Age Requirement2</td>
</tr>