6 Replies - 522 Views - Last Post: 11 October 2013 - 05:39 AM

#1 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,142
  • Joined: 08-June 10

table design

Posted 11 October 2013 - 12:14 AM

Hi there,

currently I have two table designs for my data and Iím not sure, which one I should use.

layout 1
// note: table width = page width
+--------------------------------------+
| table head (table 1)                 |
+--------------------------------------+
|+-----------------+------------------+|
|| data set part I | data set part II ||
||  (first half)   |  (second half)   ||
|+-----------------+------------------+|
+--------------------------------------+

+--------------------------------------+
| table head (table 2)                 |
+--------------------------------------+
|+-----------------+------------------+|
|| data set part I | data set part II ||
||  (first half)   |  (second half)   ||
|+-----------------+------------------+|
+--------------------------------------+
// some more tables like that



layout 2
+--------------------+  +--------------------+
| table head table 1 |  | table head table 2 |
+--------------------+  +--------------------+
|+------------------+|  |+------------------+|
|| data set table 1 ||  || data set table 2 ||
||                  ||  ||                  ||
|+------------------+|  |+------------------+|
+--------------------+  +--------------------+



Is This A Good Question/Topic? 0
  • +

Replies To: table design

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: table design

Posted 11 October 2013 - 03:30 AM

Your choice would depend on what you are designing for I'd say, whether mobile or web. The first design looks more suitable for mobile, though both would work well with web.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,142
  • Joined: 08-June 10

Re: table design

Posted 11 October 2013 - 03:52 AM

both layouts work well for web (no horizontal space constraints). although I imagine the second layout better for mobile (if need be, I can switch from 2 column to 1 column layout)


View Poste_i_pi, on 11 October 2013 - 12:30 PM, said:

The first design looks more suitable for mobile

each data set has a width ~ 30-40 em (70-80 em table width in layout 1). IMO the double table is far too wide for mobile.
Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: table design

Posted 11 October 2013 - 04:23 AM

Is there any reason why you're aiming for two columns? Does the data have more length than width when rendering?
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,142
  • Joined: 08-June 10

Re: table design

Posted 11 October 2013 - 04:28 AM

View Poste_i_pi, on 11 October 2013 - 01:23 PM, said:

Does the data have more length than width when rendering?

yupp, there are 70-150 data sets (4-6 items each) in total, distributed into 9-12 tables.

PS. cf. http://github.com/Dormilich/dcm for more details

This post has been edited by Dormilich: 11 October 2013 - 04:32 AM

Was This Post Helpful? 0
  • +
  • -

#6 DblAAssassin  Icon User is offline

  • D.I.C Head

Reputation: 32
  • View blog
  • Posts: 246
  • Joined: 11-May 13

Re: table design

Posted 11 October 2013 - 05:27 AM

The second layout, in my opinion, looks more clean, that's what I would use.
Was This Post Helpful? 0
  • +
  • -

#7 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 444
  • View blog
  • Posts: 3,075
  • Joined: 12-January 10

Re: table design

Posted 11 October 2013 - 05:39 AM

I like layout 1 because when i read tables that are grouped together i prefer reading up and down instead of side to side.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1