Ant Posted March 31, 2012 Report Share Posted March 31, 2012 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. Quote Link to comment Share on other sites More sharing options...
newseed Posted March 31, 2012 Report Share Posted March 31, 2012 It can be done using div but I see no reason why you can't use tables in this case. Quote Link to comment Share on other sites More sharing options...
Ant Posted March 31, 2012 Author Report Share Posted March 31, 2012 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. Quote Link to comment Share on other sites More sharing options...
grabenair Posted March 31, 2012 Report Share Posted March 31, 2012 (edited) 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 March 31, 2012 by grabenair Quote Link to comment Share on other sites More sharing options...
grabenair Posted March 31, 2012 Report Share Posted March 31, 2012 (edited) What I would do to put 3 div's horizontally is just use the id to set the margins and the same with the 3 underneath. Edited March 31, 2012 by grabenair Quote Link to comment Share on other sites More sharing options...
Ant Posted April 3, 2012 Author Report Share Posted April 3, 2012 Thanks grabenair I will try that. A. Quote Link to comment Share on other sites More sharing options...
LSW Posted April 3, 2012 Report Share Posted April 3, 2012 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)?" Quote Link to comment Share on other sites More sharing options...
daddyalfie Posted April 3, 2012 Report Share Posted April 3, 2012 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.