Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS tableless table spacing issues

Posted on 2010-11-22
10
Medium Priority
?
326 Views
Last Modified: 2012-05-10
I have done some Bing searches on this but most of the articles i have seen are for layouts or forms not tables and most were in 2007/08...nothing really new.

Attached is an example of what i was trying to do using lists...only problem here is that i can't get equal spacing between each column as ul cannot except width parameters. I am not set on using unordered list...whatever you think would be better is fine with me.

Any ideas? Thank you.
<style>
li.size-title{
	display:inline;
	font-weight:bold;
	margin:0px;
	padding:5px;
	text-align:center;
  border: 1px solid #066;
}
li.size-row{
	display:inline;
	margin:0px;
	padding:5px;
	text-align:center;
  border: 1px solid #066;
}
li.size-row-alt{
	color:#CCC;
	display:inline;
	margin:0px;
	padding:5px;
	text-align:center;
  border: 1px solid #066;
}
</style>


<ul>
  <li class="size-title">US</li>
  <li class="size-title">UK</li>
  <li class="size-title">France</li>
  <li class="size-title">Germany</li>
  <li class="size-title">Italy</li>
  <li class="size-title">Japan</li>
  <li class="size-title">Australia</li>
</ul> 
<ul>
  <li class="size-row">0 (XS)</li>
  <li class="size-row">UK</li>
  <li class="size-row">France</li>
  <li class="size-row">Germany</li>
  <li class="size-row">Italy</li>
  <li class="size-row">Japan</li>
  <li class="size-row">Australia</li>
</ul> 
<ul>
  <li class="size-row-alt">2 (S)</li>
  <li class="size-row-alt">UK</li>
  <li class="size-row-alt">France</li>
  <li class="size-row-alt">Germany</li>
  <li class="size-row-alt">Italy</li>
  <li class="size-row-alt">Japan</li>
  <li class="size-row-alt">Australia</li>
</ul>
<ul>
  <li class="size-row">4 (M)</li>
  <li class="size-row">UK</li>
  <li class="size-row">France</li>
  <li class="size-row">Germany</li>
  <li class="size-row">Italy</li>
  <li class="size-row">Japan</li>
  <li class="size-row">Australia</li>
</ul>
<ul>
  <li class="size-row-alt">US</li>
  <li class="size-row-alt">UK</li>
  <li class="size-row-alt">France</li>
  <li class="size-row-alt">Germany</li>
  <li class="size-row-alt">Italy</li>
  <li class="size-row-alt">Japan</li>
  <li class="size-row-alt">Australia</li>
</ul>
<ul>
  <li class="size-row">US</li>
  <li class="size-row">UK</li>
  <li class="size-row">France</li>
  <li class="size-row">Germany</li>
  <li class="size-row">Italy</li>
  <li class="size-row">Japan</li>
  <li class="size-row">Australia</li>
</ul>
<ul>
  <li class="size-row-alt">US</li>
  <li class="size-row-alt">UK</li>
  <li class="size-row-alt">France</li>
  <li class="size-row-alt">Germany</li>
  <li class="size-row-alt">Italy</li>
  <li class="size-row-alt">Japan</li>
  <li class="size-row-alt">Australia</li>
</ul>
<ul>
  <li class="size-row">US</li>
  <li class="size-row">UK</li>
  <li class="size-row">France</li>
  <li class="size-row">Germany</li>
  <li class="size-row">Italy</li>
  <li class="size-row">Japan</li>
  <li class="size-row">Australia</li>
</ul>
<ul>
  <li class="size-row-alt">US</li>
  <li class="size-row-alt">UK</li>
  <li class="size-row-alt">France</li>
  <li class="size-row-alt">Germany</li>
  <li class="size-row-alt">Italy</li>
  <li class="size-row-alt">Japan</li>
  <li class="size-row-alt">Australia</li>
</ul>

Open in new window

0
Comment
Question by:Blue Street Tech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34192184
Are you trying to get a grid?  If so, how many columns wide, how many rows?  The alignment would be perfect in a table, but you don't want to use tables?  The other way is to make 3 DIVs if you want the grid 3 wide, and put some UL groups in one div, some in the middle and some in the right.  You would have to float or position the DIVs to attempt to get an equal spacing.  Even then, they can't be centered.
0
 
LVL 26

Author Comment

by:Blue Street Tech
ID: 34192257
Thanks for the quick response scrathcyboy!

Yes, i want a grid with equal spacing 9 rows (including the title row) and 7 columns.

I have as much CSS as possible for SEO and processing reasons so that is why i was leaning toward tableless table.

But maybe considering what you have said...table is semantic and maybe more appropriate here.

This is going to be a sizing chart in a ecommerce cart that pops out in a div layer.
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 2000 total points
ID: 34192294
9 rows and 7 columns?  Going to be tough without a table, which would do it perfectly and so easily.

Let's correct some SEO issues here -- tables are read and parsed faster than anything (DIVs have to be composed and balanced before the page is rendered), so they are quicker to load than a complex DIV structure.  Second, you can style TABLES just as well with CSS as you can DIVs.   Neither are SEO hostile, and CSS is not necessarily more SEO friendly than in-line styling.  So there could be a few misconceptions troubling you that aren't really problems for browsers and SE tractors.
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34192327
The only potential problem I can see is wrapping a table inside a DIV.  There is no problem displaying it by display:block on the DIV -- that works.  Where people have the trouble is that they try to position the table using DIV positioning, assuming that the DIV can control the table display completely.

THis is only true to a point.  People forget that DIVs are fixed entities and tables expand to fit the content, so when the content is large, they get rendering problems because the table, once displayed, no longer "fits" the DIV or can be controlled by it.  The way you avoid this is to SIZE the table columns and rows carefully so that it won't exceed the DIV size -- and positionability -- and then you have no problem.
0
 
LVL 26

Author Comment

by:Blue Street Tech
ID: 34192736
Wow, scrathcyboy!

Thanks for all the insight and setting me straight i my psuedo concerns! I will use talbes them.

The div layer popup is in the form of a lightbox effect. I am giong to try to ID the table and then call the table ID in the popup. this concept works using <p>, <span> and <div> tags...so i think it should work here as well. i will post you with the results.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34192820
Yes you CAN style, ID and name tables by tags just like other elements.  It's too bad we didn't all get that input before they said that DIVs obsolete tables because you can style them and you can't tables.  It was erroneous information that wrongly biased a generation of programmers.  I have "rediscovered" styling of tables and cells recently, and some of the effects you can get are really quite beautiful.

I hope it is "lightbox like" -- meaning you did it -- if it is "lightbox" code, you will indeed have problems.
0
 
LVL 26

Author Comment

by:Blue Street Tech
ID: 34193030
Calling the table would not work as you suggested, so I ended up wrapping teh table in a div and it works like a charm now. Thanks for all your insight & help!
0
 
LVL 26

Author Comment

by:Blue Street Tech
ID: 34193038
*Let me re-phrase, you were correct, i did not have any luck calling the table*
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34193043
I kinda suspected that.  Styling works fine on tables, but display:block and display:none are generally used on DIV and SPAN tags.  Anyway, glad it has worked for you.
0
 
LVL 26

Author Closing Comment

by:Blue Street Tech
ID: 34193053
I ended up using scrathcyboy's answer & used tables styled by CSS.
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question