# Tabular Data in Responsive Design

#### Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

•  Subject
• Author
• Posted on
Hello,

I need to display time series in a tabular way.

I always have something like (x, yA) or (x, yA, yB).

When I display the data I would get:

x1 yA1   x2 yA2   x3 yA3
x4 yA4   x5 yA5   x6 yA6

However I am using Responsive design.

So when the window is to small I would have:

x1 yA1   x2 yA2
x3 yA3   x4 yA4
x5 yA5   x6 yA6

I don't think this is possible with a table.

What you suggest me to use?

Note: If I use more Y time series I would get:

x1 yA1 yB1   x2 yA2 yB2   x3 yA3 yB3
x4 yA4 yB4   x5 yA5 yB5   x6 yA6 yB6

Which would look as follows when narrowed:

x1 yA1 yB1   x2 yA2 yB2
x3 yA3 yB3   x4 yA4 yB4
x5 yA5 yB5   x6 yA6 yB6

Any suggestion for the markup?

I am thinking in Ordered Lists, Definition Lists, DIVs, ...

I don't think I can pull this with a table ...

Thank You,
Miguel

## Re: Tabular Data in Responsive Design

2012-06-15 13:08, Shapper wrote:

So the data would logically be an array with two or three columns, and
the obvious HTML markup would be a two- or three-column table. It could
be very tall of course. And in any case, a numeric table might not be
the best way to present data; some visualization would seem to be a
better approach. But let's assume that the numeric data needs to be shown.

In principle, you could start with a two-column table and try to use CSS
to style it that way. Something like this:

<table>
<tr><td>x1 <td>y1A1
<tr><td>x2 <td>y1A2
...
</table>

with

table { display: block; }
tr { display: table; float: left; }
td { border: solid 1px; width: 3em; }

The idea is that the CSS code turns each <tr> into a table, which is
floated left, making the browser put such small tables side by side, as
long as they fit in.

I was about to write that doing the same at HTML level (using <table>
elements with just two cells and with align=left) would work much wider.
But it seems that the CSS way works in modern browsers; even the IE 8
emulation mode of IE 9 shows it OK, and in IE 7 mode the table just
degrades to one long two-column table.

I think you can...

An alternate approach is to use just `div` elements, with inner `div`
elements for x and y values, and with floating. But it sounds so
primitive and unstructured. (It would work, though.)

--
Yucca, http://www.cs.tut.fi/~jkorpela /

## Re: Tabular Data in Responsive Design

On Friday, June 15, 2012 12:38:50 PM UTC+1, Jukka K. Korpela wrote:

Hello Yucca,

I tried your suggestion and it worked fine.
I just changed the first TD for x to TH.

--

Thank You,
Miguel