Site Reference Forums

Seven · 2007-12-31 15:34:54

I have a client who has a large block of links on their homepage. They want it to look as if it's in a table, 3 columns, 22+ rows. But - they want to use CSS. Has anyone experience with using backward compatible CSS to make table-esque layouts? I can do regular CSS layout but haven't ever really worked on massaging tabular data into various div layers.

Additionally I need to float two images in the layout over the top of other elements - much like I did at http://www.bearcreekhardwoods.com However my technique isn't backward compatible. It doesn't seem to work in IE 6.

I hope this makes sense... big_smile

Northie · 2007-12-31 15:56:40

Clients don't know what they want - that's why I can't be bothered with them any more

Semantics is more powerful than CSS, tables, whatever.

If you have data that you want displayed in a tabular way - USE TABLES

If you have content that you want styled and positioned - USE A STYLING CONVENTION - CSS

How F***ing Stupid are some of these people????????????

Oh yeah, they're clients

Do it in tables, and use CSS selectors to style the table - best of both wolds and the right way to do it!

Seven · 2007-12-31 16:07:14

Well this client has been working with a "web designer" (I use that term soooo losely) who really conned her. Told her that tables were not going to be able to be read by browsers in the near future.

I said just about what Northie did, tabular data = table. I really wanted to see how everyone weighed in though, some sites just go off about using tables at all, even when they're actually presenting the kind of data they were built for. Does having a table on a page reduce SEO in any way? She was really nervous about the table reducing her page rank, but had been talked into a ton of javascript elements by at least one developer she's working with which struck me as the larger evil. (No offense - but I'm not a big fan of javascript)

She has buttons that could easily be CSS but instead they're telling her javascript is the way. She's working with a few different people, most of whom sound like students and maybe don't have perspective. The "web designer" was fired.

ColoEagle · 2007-12-31 17:10:16

Well I won't get into the web developer v client issues big_smile But agree, that if it is tabular data then tables are fine.

To answer your questions.

Does having a table on a page reduce SEO in any way?

Not, at this time. Who really knows for sure about the future.

Yes, you can get a page to display information that looks like it is in a table.

Couple of ways depending on what the actual content is.

1. You can do it with list items. If you want to see this one in application take a look at my sitemap page at http://www.providerofchoice.net/site-map.htm

Code: css

.map ul {

float:left;

width:33%;

display:table-row;

list-style-type:none;

}

.map li {

padding:3px 5px;

}

Code: html

<div class="map">

<ul>

<li>Data item</li>

<li>Data item</li>

<li>Data item</li>

<li>Data item</li>

</ul>

<ul>

<li>Data item</li>

<li>Data item</li>

<li>Data item</li>

<li>Data item</li>

</ul>

<ul>

<li>Data item</li>

<li>Data item</li>

<li>Data item</li>

<li>Data item</li>

</ul>

</div>

Another way I have done it when I had images and content contained inside a p tag.

Code: css

.column {

float:left; 

width:32%;

}

.info img {

float:left; 

margin-right:10px;

}

.info {

height:135px; 

margin:5px; 

font-size:.8em; 

font-weight:bold;

}

Code: html

<div class="column"><!-- Column one -->

<p class="info">

<img alt="" src="" width="110" height="135" />

text here text here text here

</p>

<p class="info">

<img alt="" src="" width="110" height="135" />

text here text here text here

</p>

</div>

<div class="column"><!-- Column two -->

<p class="info">

<img alt="" src="" width="110" height="135" />

text here text here text here

</p>

<p class="info">

<img alt="" src="" width="110" height="135" />

text here text here text here

</p>

</div>

<div class="column"><!-- Column three -->

<p class="info">

<img alt="" src="" width="110" height="135" />

text here text here text here

</p>

<p class="info">

<img alt="" src="" width="110" height="135" />

text here text here text here

</p>

</div>

Seven · 2007-12-31 23:40:33

Hey thanks!! WOW that is slick. I'll have to try it now to try it. *grin

Happy New Years Everyone!

Steven_A_S · 2008-01-01 10:27:10

Another option is to group the items that would would be in each table cell into divisions or similar containers, and set a standardized size for these containers. Then just float them all onto the page. If the page is built as fixed width, then the number of columns will be constant. If you go with a flexible width page, the number of columns will increase/decrease to best fill in the available space. I did something like this with my binoware page if you wanna have a look.

vita10gy · 2008-01-02 12:26:21

I can't imagine a scenario under which tables will ever go away, nor would we want them to. Some people argue that laying your site out with tables is stupid, but even that I don't have that much of a problem with. (To me making a site with a common header and footer is a much better long term solution in terms of quickly making changes to every page than a giganto "this-site-is-non-functional-without-it" css file, luckily the two approaches aren't mutually exclusive.)

What I definitely disagree with is someone saying that something that is clearly a table of data should not be a table. It should rather be a concoction of things never really meant to do what you want them to do that you 'trick' into working like a table with css. What do you gain from this? You really aren't separating content from layout (you're still defining a "row" and a "cell") and you aren't saving anything on the amount of markup. I feel like as some point someone did a nice layout using divs and css, that got adopted by some, those people ridiculed the "old table" sites, more people adopted, that evolved from teasing to "don't use tables to do layout, EVER", some clients read an article on tableless design and demanded their sites be 100% tableless and here we are.

I'm all for separating layout from the code, but really, how often do you need to have a quick way to put the header of your pages down in the footer, the footer along the right, the menu where the content used to be, and the content in the footer?

The only thing "tableless" layout buys you that is conclusively better, as I see it, is the ability to change the order things are in your code for SEO purposes. The menu to the left of your content can actually be after it in the code, thus making your content more "important" in the eyes of the almighty Google (supposedly) However, it isn't used that way a lot of the time anyway and isn't talked about in that way most of the time.

I'm not saying tableless layout is bad or pointless, I do it myself, I'm just saying all clients read is that tables==bad and make stupid requests.

I can't tell you how many times we've had angry clients contact us after reading an SEO article about how you need to pick keywords and such and can't believe we didn't add the META keywords tag to their page. No amount of explanation about the keyword tag being all but dead and the fact that placing the same laundry list of keywords on everypage on their site, regardless of what that page is about, has more of a potential to do them harm than anything else can disuade them. 'I read an article about SEO keywords, searched for HTML keywords and this tag came up. Add it to the page now! Here's a list of 65,000 words I want on every page! Chop chop!"

Seven · 2008-01-02 17:46:53

I can't tell you how many times we've had angry clients contact us after reading an SEO article about how you need to pick keywords and such and can't believe we didn't add the META keywords tag to their page.

I just got through pasting in about a word doc full of keywords last night for a client. I at least wanted to just bring the header info via an include but nope, I had the joy of copying and pasting keywords into multiple pages. Somehow being an expert at what you do doesn't weigh in as much as what so-and-so says or some article they read that isn't accurate in the slightest.

One of my best clients made me change his layout after his father-in-law commented that because I was female I had made the web site too girlie and colorful. *sigh, grinds teeth

/rant big_smile

designsjohn · 2008-01-03 07:54:45

I like these examples of tables very much. Can these examples of tables below be done with “front page borders”? Or are these tables (also done with front page)? Or none of the above?

http://www.bearcreekhardwoods.com
http://www.providerofchoice.net/site-map.htm

Thanks
John

Northie · 2008-01-03 07:59:33

designsjohn wrote:
I like these examples of tables very much. Can these examples of tables below be done with “front page borders”? Or are these tables (also done with front page)? Or none of the above?

http://www.bearcreekhardwoods.com
http://www.providerofchoice.net/site-map.htm

Thanks
John

Your examples do not use tables

In these cases the lack of tables is considered a good thing.
the code is semantically marked up and styles with CSS - this is good

Don't go backwards into tables; there isn't tabular data.

The list of links, although displayed in a tabular format, is still a list of links and is best kept in a list; as it is

designsjohn · 2008-01-03 08:14:07

Thanks
I look at my sites (only do my own, not a pro) and I see very “pre basic” web site look. I would like to have a more pro look like in these links I saw above.
I am the type that has done and wants to continue to do all my own “programming”.
I work in a “void”, no tech people for miles around me. No associates other than brief forum attendance.
"self taught".

What are these sites done with?
I would like to learn the “look” of these sites? Everyone talks about css?
Any recommendations?

Thanks
John

Northie · 2008-01-03 08:57:21

You really need a skill - design

I'm crap at full on design, so I stick to development; but know enough to make a page passable.

[1] To begin with, look round the net for inspiration

[2] Then take a sheet of paper and a pencil and sketch out what you'd like your site to look like

some people like to make the visual picture of their sites in some high-priced graphics software that was never meant for the web, like photo shop. I find this a very time-consuming and backwards way of doing it - stick with a pencil and paper for now!

[3] Once you have a look in mind, write the content; even if it's non-sense space filling content; and separate each definable section with a <div></div> tag.

[4] then open your favourite editor and start to apply the formatting-styles you need; colour, borders, fonts, etc

[5] Once you're happy with that start applying structural styles - width; heights, floats, positions.

I love textpad, firefox and firebug to develop in

our lead designer uses dreamweaver

our lead developer writes his CSS directly into firebug, then copies it to textpad later to save it

[6] Have a look at what you've got; tweak as necessary

[7] Search out or create images for background-images, buttons, etc

Steven_A_S · 2008-01-03 09:37:53

Designsjohn,

Both the sites you reference are from members here (Seven and ColoEagle), and I believe they both hand write their code. There are some here that use Front Page or Dream Weaver for the basic design, but clean the code up by hand because both programs tend to leave a lot of crud (useless code) in their output. Either of these methods are fine (personally, I'm a strict hand coder).

I don't recommend depending strictly on web design programs if you want to make a professional looking page, as it's easy to lose control of the output. I've seen pages become nonfunctional because of some leftover code from page changes.

Last edited by Steven_A_S (2008-01-04 09:21:19)

vita10gy · 2008-01-03 14:57:01

Northie wrote:
The list of links, although displayed in a tabular format, is still a list of links and is best kept in a list; as it is

Except it's being arbitrarily broken up into "groups" of 4-5 them. I'm not sure one needs to have a dataset complete with rows and column headers to qualify as "tabular".

I see what you're getting at, nothing about a list of links implies a table, but you're also jumping though a lot of hoops just to not have to type <table> while still clearly defining tabular data. You're still defining a "bounding" element around the data (<div> rather <table>) you're still defining which sets belong to which rows (by grouping them in separate ul's even though there is nothing inherently obvious to group those on) and you are still defining each "cell" as <li> (though obviously no exception/special concessions are a factor there)

It just seems like a lot of bother for no gain if someone specifically requests something be shown in a table like fashion. I guess I've just never seen justification for doing so other than tables being the "old way" of doing things with no further explanation why.

Knowing our clients they would hop in the internet at home with the 2400 buad modem and visit the page and see it during the time it takes the css to download and freak out because it isn't a table and then "changes"

Last edited by vita10gy (2008-01-03 14:57:24)

Northie · 2008-01-03 16:06:23

but the beauty of a styled list is that the cols/rows can be defined by tweaking the CSS - there's no need for divs, etc; just a bit of thought about the classes; display inline or block; breaks and floats.

Try doing that with tables!

ColoEagle · 2008-01-03 17:56:35

Man this thread has been busy, leave for a couple days and come back to lots of good reading. glad

Seven wrote:
Additionally I need to float two images in the layout over the top of other elements - much like I did at http://www.bearcreekhardwoods.com However my technique isn't backward compatible. It doesn't seem to work in IE 6.

I hope this makes sense...

Just had a look at this site in IE6. Yup, definitely has a problem. Not a big thing to fix though.

In the css under "#contentFloatleaf" and "#contentGreen" add - position:relative; this will position both images as the top layer.
Additionally with the content not moving up on the inside pages, reduce the right margin in the "#contentOptional" You will need to play around with this setting but it appears that it will need 20 or 30 pixels less than what you have now.

Steven, you are correct. I do all my coding by hand. I do use FP but don't remember the last time I used the wysiwyg/design side of it. Like Northie I back up in technology and get a pad and pencil out when I am looking for a different layout.

ColoEagle · 2008-01-04 09:58:33

Steven_A_S wrote:
Sorry to correct you CE, but position:relative; is meant to position the element where it would naturally fall. The reason to use it is so that elements inside this element are positioned based on this one, not just on the body.

I would set those elements to position:absolute; and set right: (or left: in the case of #contentFloatleaf) and top: to the distance from the edge of div#wrapperOne (which is the closest positioned element).

Correct. In this case in IE6 the images are split partially above and partially below other elements. Using the position relative brings both images above all the elements where she wants them to be.

ColoEagle · 2008-01-04 10:16:25

Steven, in the way you mentioned above would this then require the addition of z-index in both of these and the lower elements?

Steven_A_S · 2008-01-04 12:55:51

Actually I retracted my response because I believe I remember the positioning coming up before when she had the original site reviewed. I can't find the original review, but I believe direct positioning was brought up, but it didn't work right for her or something.

Also after more consideration, I started to realize what your intention was with using both position:relative and her existing floats and realized that could work.

But in response to your question, setting the z-index shouldn't be needed, but then we're talking about IE, so may have been necessary anyway.

Last edited by Steven_A_S (2008-01-04 12:58:05)

Sponsored Results

Site Reference Forums

#1 2007-12-31 15:34:54

CSS vs. Tabular Data

#2 2007-12-31 15:56:40

Re: CSS vs. Tabular Data

#3 2007-12-31 16:07:14

Re: CSS vs. Tabular Data

#4 2007-12-31 17:10:16

Re: CSS vs. Tabular Data

Code: css

Code: html

Code: css

Code: html

#5 2007-12-31 23:40:33

Re: CSS vs. Tabular Data

#6 2008-01-01 10:27:10

Re: CSS vs. Tabular Data

#7 2008-01-02 12:26:21

Re: CSS vs. Tabular Data

#8 2008-01-02 17:46:53

Re: CSS vs. Tabular Data

#9 2008-01-03 07:54:45

Re: CSS vs. Tabular Data

#10 2008-01-03 07:59:33

Re: CSS vs. Tabular Data

designsjohn wrote:

#11 2008-01-03 08:14:07

Re: CSS vs. Tabular Data

#12 2008-01-03 08:57:21

Re: CSS vs. Tabular Data

#13 2008-01-03 09:37:53

Re: CSS vs. Tabular Data

#14 2008-01-03 14:57:01

Re: CSS vs. Tabular Data

Northie wrote:

#15 2008-01-03 16:06:23

Re: CSS vs. Tabular Data

#16 2008-01-03 17:56:35

Re: CSS vs. Tabular Data

Seven wrote:

#17 2008-01-04 09:58:33

Re: CSS vs. Tabular Data

Steven_A_S wrote:

#18 2008-01-04 10:16:25

Re: CSS vs. Tabular Data

#19 2008-01-04 12:55:51

Re: CSS vs. Tabular Data

Active Discussions

Review Requests and Introductions

Board footer