Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Josh Keenan
Josh Keenan
19,565 Points

Table accessing

I was wondering, would it be possible to access a table using columns instead of rows, what I'm asking is would there be a way to avoid using

 and instead use a column creation or something to that effect? Is 
```<tr>```
 going left to right a thing?

4 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points

You can change your table rows into columns with some quick and easy css.

By changing table data to a block element it will no longer position itself inline (it's default), and vice versa for table rows will give the effect of columns instead of rows.

<table>
  <tr>
    <td>Melon</td>
    <td>Lemon</td>
    <td>Orange</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Melon</td>
    <td>Lemon</td>
    <td>Orange</td>
    <td>Apple</td>
  </tr>
</table>
tr { 
  display: inline-block;
}

td {
  display: block;
}

Example: http://codepen.io/anon/pen/yeKPMN

If this is not for data and for web layout / asthetics I would reccomend not using tables and something more suited such as divisions or CSS3 Flexbox (If you are not worried about no version of Internet Explorer supporting it).

Codin - Codesmite
Codin - Codesmite
8,600 Points

Based on your 1-7 grid I put this together:

http://codepen.io/anon/pen/xZWQmp

Hopefully it helps :)

(font-size: 0 on the parent is important, it removes the whitespace between inline elements)

Steven Parker
Steven Parker
221,963 Points

There is no vertical equivalent of a table row. This is sometimes simulated with a single-row table, where each cell contai But column-based layouts are quite common, and there are multiple techniques for doing them. This is usually done with CSS and not using actual tables. In fact, tables are often recommended only for displaying data, and discouraged for layouts.

One very popular CSS method for column layouts is using the float property. But a newer technology that is both easier to use and more versatile is Flexbox.

Codin - Codesmite
Codin - Codesmite
8,600 Points

I would not reccomend using Flexbox unless using a fix for Internet Explorer, or if none of your target audience use Internet Explorer.

http://caniuse.com/#feat=flexbox

Josh Keenan
Josh Keenan
19,565 Points

Thanks guys but the problem is this: I'm developing a drag and drop product builder, and my boss has said he wants it laid out in 3 columns with two columns having 3 items each (so 2 columns with 3 rows each) and the last one to have only one row. So it would look like this terrible drawing attempt.

---------------
|_1_ |_2_|     |
|_3_|_4_| 7  |
|_5_|_6_|     |
---------------

So items 1-6 like that and then a long column like that at the end. Get it? Can you help? xD I appreciate the help so far very much guys!