webdevRefinery Forum: Any ideas how I can design a table in this format? - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline deucalion0 

  • Group: Members
  • Posts: 183
  • Joined: 05-September 10
  • LocationDundee, Scotland

Posted 08 August 2012 - 11:06 AM (#1)

Any ideas how I can design a table in this format?


Hey guys, so I am trying to create an HTML table to look like this:Posted Image

I am messing around with tables, but I am not sure the correct way to make a vertical table?

Any advice would be awesome!

Cheers!
0


User is offline Cyril 

  • Group: Members
  • Posts: 2544
  • Joined: 03-August 10
  • Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 08 August 2012 - 11:17 AM (#2)

Yep, what you want is the "colspan" attribute (you should also look into "rowspan", just to know about it).
http://jsfiddle.net/3adsM/

website :: github :: twitter :: dribbble :: forrst
html, css, php, javascript, graphics
1


User is offline deucalion0 

  • Group: Members
  • Posts: 183
  • Joined: 05-September 10
  • LocationDundee, Scotland

Posted 08 August 2012 - 11:49 AM (#3)

Cheers Dude! I guess I shoulda known this! I have always avoided tables, but now I actually need to display tabular data! :)

Appreciate the quick response man!

Cheers!
0


User is offline ThatOneGuy 

  • Group: Members
  • Posts: 22
  • Joined: 10-June 10

Posted 08 August 2012 - 12:26 PM (#4)

A moderately close reproduction of your example table so you can learn about all the different parts of tables (and table styling) to hopefully get the end product you actually need:

http://jsfiddle.net/3adsM/19/


EDIT:
Lulz, just realized I never hit udpate on jsfiddle, so I actually gave you the virtually unstyled early version. You were very polite even though the example I provided was completely worthless. Updated the link!
2


User is offline deucalion0 

  • Group: Members
  • Posts: 183
  • Joined: 05-September 10
  • LocationDundee, Scotland

Posted 08 August 2012 - 12:50 PM (#5)

That's excellent thatoneguy, thank you!

You guys just showing me that jsfiddle site is really cool, I never knew that existed! :)

Always getting good tips round here! :)

Any of you guys ever managed to do a border radius on a whole table and get the background colours to match the radius as opposed to being just square and leaving the border?

Cheers again boys!
0


User is offline ThatOneGuy 

  • Group: Members
  • Posts: 22
  • Joined: 10-June 10

Posted 08 August 2012 - 01:53 PM (#6)

There's a decent discussion about border-radius on tables here: http://stackoverflow...t-mix-how-can-i

Might be able to figure out what you need.
0


Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users


Enter your sign in name and password


Sign in options
  Or sign in with these services