Jump to content
Killersites Forums

Tabular data question


Ant
 Share

Recommended Posts

I always wonder what's right and wrong in terms of using tables.

 

I am NOT using tables to build the structure of the site.

 

My question pertains to content withing the main content div of the pages.

 

Here's a few scenarios and please let me know if they are table appropriate.

 

1. Multiple logos/images that need to be aligned horizontally next to each other with some padding between.Maybe say 2 rows or even one row.(depending on how wide the area is and how many images) Not a full blown gallery with say 25 photos. Although I have done that with tables before.

 

 

2. 8 blocks of text to show a companies "services". But I don't want a vertical list of the services. The layout is awkward and long when done like that. I want say 2 columns and 4 rows to display the info. So I have for instance (2 examples out of 8 content blocks) the following:

 

Nails

Manicure: $13

Pedicure: $35

OPI gel manicure: $35

French manicure: $45

 

 

Massage

10 minutes: $15

20 minutes: $30

30 minutes: $40

Reflexology: $15

 

 

 

Thanks

A.

Link to comment
Share on other sites

Thanks Eddie.

 

The only reason I didn't want to use divs was it seems so lengthy a process.

Although what seems lengthy to me (being a novice still at css) may seem quick to others.

 

I still struggle to choose the appropriate combination to accomplish things.

 

I would assume for every image I need to create a div. Then for every div I need to create a css style rule for that div.

Or maybe just a few classes for each div. Or maybe it's as easy as one class with a float left etc. But then what happens when I reach the end of the div's (horizonatlly) Do I use a clear to go to the next line and continue the floated left class.

 

So lets say I want 3 divs horizontally. and then 3 divs again underneath lined up horizontally. What do i use to continue the div's on the next line, a <br>? Some type of a clear on the last div to return to the next line?

 

 

A.

Link to comment
Share on other sites

I do not know way you would not want a list. But here is something I through together with div's

It is not pretty but it puts it inline.

 

<style type="text/css">

<!--

#content {

width: 1000px;

border: 1px solid #000;

}

#content #nails {

width: 5000px;

float: left;

}

#content #massage {

width: 500px;

float: left;

 

}

 

#content #massage ul li {

display: inline;

}

#content #nails ul li {

display: inline;

}

ul li {

margin-left: 10px;

}

 

-->

</style>

</head>

 

<body>

<div id="content">

<div id="nails">

<h3>Nails</h3>

<ul>

<li>Manicure: $13</li>

<li>Pedicure: $35</li>

<li>OPI gel manicure: $35</li>

<li>French manicure: $45</li>

</ul>

</div><!-- close nails-->

 

<div id="massage">

<h3>Massage</h3>

<ul>

<li>10 minutes: $15</li>

<li>20 minutes: $30</li>

<li>30 minutes: $40</li>

<li>Reflexology: $15</li>

</ul>

</div><!--close massage-->

</div><!--close content-->

</body>

</html>

 

Sorry forgot the imgs you can just give each img a id and then use margins to put it where you want it.

 

Important you can not use padding on an img as padding is put on the inside.

Edited by grabenair
Link to comment
Share on other sites

 

1. Multiple logos/images that need to be aligned horizontally next to each other with some padding between.Maybe say 2 rows or even one row.(depending on how wide the area is and how many images) Not a full blown gallery with say 25 photos. Although I have done that with tables before.

 

2. 8 blocks of text to show a companies "services". But I don't want a vertical list of the services. The layout is awkward and long when done like that. I want say 2 columns and 4 rows to display the info. So I have for instance (2 examples out of 8 content blocks) the following:

 

Nails

Manicure: $13

Pedicure: $35

OPI gel manicure: $35

French manicure: $45

 

 

Massage

10 minutes: $15

20 minutes: $30

30 minutes: $40

Reflexology: $15

OK, this is from the purity point of view, and being new to CSS just means using Div's would be a challenge and a learning experience.

 

1) is an incorrect use of tables, that is merely layout of banners.

 

2) could be considered a proper use of data as it holds data suitable for a spread sheet.

 

The question to ask is "Do I want to do this just to have a neat layout of something (1) or will a table improve the user's ability to understand data I offer (2)?"

Link to comment
Share on other sites

OK! I read Kyle's (LSW's) response with a "raised eyebrow". I know well LSW's concerns regarding accessibility. We should all be as concerned with that issue as he is!

 

My "raised eyebrow" was caused by the question of how tabular data could be perceived by disadvantaged viewers to be confusing?

 

Maybe I have not caught enough of the wisdom displayed in this forum, but some more details of the problems encountered by our disadvantaged users of the web would be helpful.

 

Kyle?

 

All best! Alfie

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...