• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

Column Arrangement in HTML Table

 
Ranch Hand
Posts: 46
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi there,

I want to create a single html table with different number of columns in each row.
For example, 1st row with 3 columns, 2nd row with 4 columns, 3rd row with 2 columns and so on.
All the columns in that particular row should be of same size.

But I want to create this using pure html(no css or anything else).

Thanks.
 
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You can make cells within a row span multiple columns. But you can't really have a different number of columns per row.
 
Mark Butcher
Ranch Hand
Posts: 46
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Okay then, if I just have 3 rows, with 2, 3 and 4 columns respectively, how can I create columns of same size for respective rows.
For example, all 2 columns of the first row should be of same size, all 3 columns of the second row should be of same size and
all 4 columns of the third row should be of same size.

And I need this in pure html only.

Thanks !
 
Bear Bibeault
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm really not understanding the problem.

What happened when you tried it, and what are you not happy about with the result?
 
Mark Butcher
Ranch Hand
Posts: 46
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I want to create a table similar as in the image on the below link :

http://www.imagesup.net/?di=1213412530200

Hope this explains my query....
 
Bear Bibeault
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Well, that's not really much of a table, is it?

You perhaps could use a <table> element with a lot of messy colspans to create that, but personally I'd just use some <div> elements and some CSS.
 
Mark Butcher
Ranch Hand
Posts: 46
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks! For the suggestion!
 
Ranch Hand
Posts: 859
IBM DB2 Chrome Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just have 3 separate tables and align them left and right edges with same width.
That way each cell <td></td> will expand to the correct %, 50%, 33%, 25% etc.

Yes you can use css, but you need to maintain that css file and add another class,
for instance if you want 20% width (5 cells)

Whatever gets the job done, I guess.

WP
 
Bear Bibeault
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

William P O'Sullivan wrote:Yes you can use css, but you need to maintain that css file


CSS does not need to go in a separate file. And regardless of whether divs or cells are used, the column widths are set via CSS -- unless you are advocating using deprecated attributes.

Whatever gets the job done, I guess.


A poor attitude, in my opinion. A great deal of future maintenance headaches can be avoided by using proper techniques rather than what just "works".
 
William P O'Sullivan
Ranch Hand
Posts: 859
IBM DB2 Chrome Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
All I'm saying is that if the OP has a need to build something like the image he hosted, then use something straightforward like this:

Try it!

Granted, even this primitive example could use some .css "magic". Yes it can all be done by styling today, and yes I
do know css files do not have to be external (but that's one of the benefits). I would like to see a css implementation here,
if anyone is up for the challenge!

WP
reply
    Bookmark Topic Watch Topic
  • New Topic