Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Josh Keenan
Josh Keenan
19,652 Points
Posted by Josh Keenan
Josh Keenan
19,652 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
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
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
229,786 Points
Steven Parker
Steven Parker
229,786 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
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,652 Points
Josh Keenan
Josh Keenan
19,652 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!