Should I build this with a table? or is there a better way?

This is tablular data, so using a table is idea for this kind of content. Use css to style the html tags to form your layout, then use tables to hold this tabular content.

thanks for the direction! I love your work btw, keep it up.. i'll let you know how that table comes out

It seems like I read somewhere that tables are bad for SEO.. do you think that has any truth to it? or as long as I still mark the tables up correctly with proper html tags (h1 h2 h3) do you think it will be fine?

You've got to differentiate between the proper use of tables and the improper use of tables for layout. Tables are not evil and used in their proper context they are not bad for SEO. Tables for layout is pure satanism.

You should also look at SEO as secondary to accessibility.

ive been playing around with some div percentages with a main div wrapped around it and they actually seem pretty good (and less confusing w/ all the diff table tags) i think i can get the same effect out of both. i'm trying it out anyways

I did however make the table one last night, im just trying both methods out

It's a large enough job to learn to do good, without wasting time learning to do evil at the same time. Tables have one legitimate purpose, that's to contain a table of data.

cheers,

gary

yes..., i found that out the other way the other night and let me tell you... i switched back to the table idea real quick. I definitely see the use in tables for certain types of data.. I'm so used to everyone preaching NEVER to use tables these days but they are still very useful if you use them correctly

No one at CSS Creator is against tables for their appropriate purpose. It looks to me, however, that the content is question is not tabular and so I would not use them in this case.

The fact that you couldn't do it without tables doesn't mean that tables are appropriate here, it only tells you something about your html/CSS skills.

Of course it is. It's a bunch of columns with column headers with the type of content in each cell being described by the label in the column header.

But it appears to me to violate the condition that there should only be one field per column.

what are you guys thoughts on making the "topic" page into tabular data?

http://www.phone7forum.com/viewtopic.php?f=2&t=4

Because thats what I was going to do.., make the main content for these 3 pages into tabular data:

http://www.phone7forum.com/
http://www.phone7forum.com/viewforum.php?f=2&sid=e8d57b8c25b094c09be4204208672655
http://www.phone7forum.com/viewtopic.php?f=2&t=4

______________________

Like I said, I would like to veer away from any usage of tables but if its appropriate then I'd like to use them. I have found that it way easier for me to get the desired effect w/ the tables though and then adding css to style them. The way the forum is setup does NOT have any use of tables. Instead they use ul, li, dd, dt, and dl tags.. I know about ul and li but I've never used the others before and I'm not really sure the best method or how to use them in this case. I just know its mountains code stuff like that and I'm trying to strip it all out and use the method that best works for me... So which route should i go down? I'm willing to learn the best and do things the right way so whatever you guys tell me I'm going to do

Hmm. It's possible. If you make the headers say something like

Username | Avatar | Rank | Posts | Date Joined | Location | Social Media Links | Post Text
------------------------------------------------------------------------------------------

You should probably also look into getting rid of this junk:

 
 <div class="side_bl"></div>
 <div class="side_bm"></div>
 <div class="side_br"></div>

thanks man! that is a proper table.. i'll study it and implement in.

You should probably also look into getting rid of this junk:

 
 <div class="side_bl"></div>
 <div class="side_bm"></div>
 <div class="side_br"></div>

What is the best work around for that? To absolute position them to the sides of the main div probably?

Take a look at this forum: all the individual forums are formatted exactly the same way. The latest posts is slightly different in that it has an extra column for the author which is what I'd probably do too. Technically the original post author and original post date and last post author and last post date aren't the same pieces of information, but from a usability perspective, it makes more sense to combine the two. Trying to do this in anything else other than a table would make far less semantic sense than combining a couple of columns that are closely related in content anyway.

That you can restructure as a table does not imply that you should. Nor does its being easier for you to handle imply that Good Things will follow.

Your data is stored as tables in your database, but when it is retrieved, it is put into a document. In the case of a forum, a likely structure is a nested list. Even that is not the best. HTML5 introduces the section element. It is at heart a div with semantic value. In the present, properly classed div elements most closely represent the true structure of a forum page. I invite you to view the source of this page of the CSSCreator forum for an example.

Again, I urge you to not waste your energies learning use tables as a layout tool. I think you misunderstood my previous exhortation.

cheers,

gary

No, my suggestion is to get rid of them altogether. Don't use markup for presentation. Markup is used to mark something up; in this case you are marking nothing up.

gary.turner, is using a table in this instance a bad idea? oneeezy, I suggest you take gary.turner's advice over mine. I was simply offering the idea and executing it as an exercise.

If we're talking about the forum page, where each topic is listed, that is a table. The page itself is not.

Looking at this page, where the topic and comments are, there are no tables. Likewise, the OP's page is, or should be, a table-free zone.

Consider, as a very simplified version, how the db, programming language and templating engine work:
the php page queries the db and holds the results in an array/list/other-thing-I-never-recall of an array/list/other-thing-I-never-recall of key:value pairs. Then exports that whatchamacallit to the template.

  // assign to smarty 
  $smarty->assign('res',$res); 
 
  $smarty->display('index.tpl');?>

...
{foreach $res as $p}
<div class="post">
  <h3>{$p.title}</h3>
  <p>Posted by {$p.author} at {$p.time} on {$p.date}</p>
  <div class="comment">{$p.text}</div>
  <div class="author">
    <ul>
      <li><img src="{p.avatar}" alt="{$p.author}&apos;s avatar"></li>
      <li>Joined: {$p.joindate}</li>
      <li>Location: {$p.loc}</li>
    </ul>
  </div> <!-- end author info -->
</div> <!-- end post -->
{foreachelse}
  <p> no results found</p>
{/foreach}

Possible css:

.post {
  overflow: hidden;  /* sets block formatting context to enclose float */
  }
 
.comment {
  float: left;
  width: 65%;
  }
 
.author {
  overflow: hidden;  /* sets block formatting context so it doesn't wrap */
  }
 
.author ul {
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
  font-size: .8em;
  }

gary

I know it's a bit of a stretch but I suppose I was just looking at it as a table formatable layout because it is a repeating structure that could contain descriptive headers. The point that I made it not look tabular sort of blows the idea to bits though.

ok guys, this is what im shooting for:
http://phone7forum.com/images/viewtopic.jpg

Im going to take Gary's advice and give this thing a go with no tables.. just semantic markup (I'm going to try) and as less divs as possible.

If anyone has some last minute advice feel free to give it.

~ oneeezy

ok,
this is my attempt at making this: http://phone7forum.com/viewtopic.html

Critique is welcome.., tell me if I did or what I should've done right and I will fix!

thanks!
Justin

Getting better. The code just isn't as svelte as it could, or dare I say should, be.

What is the purpose of the unordered list that has the time in it?

<span class="time">
<ul>
<li>2 hours ago</li>
</ul>
</span>

What are all the empty SPANs? I'm not sure I like all the other SPANs used all over the place.

Thanks!
Trying to really get this thing right before I move on. The UL, not really sure what I was thinking there.. I should probably just replace that with a span or p tag? Ok, purpose for the empty spans are for Background Images. Whenever I use bg images I either float them left or right and add top left or right to them, or absolute position them (depending on what works best for the case). And this thing is so graphical, I'm having problems having content in all the spans/divs, but I tried to think it out best I could before making it and use all the content in there as the hooks. Is there a better way to do this? I did some research on this and found you can add multiple background images to 1 div but and that would fix my problem.. but of course the sad story to that is IE won't notice them and who knows when it will...

This is my first time really using spans everywhere like this..usually I'm doing the same thing with divs. whats the best way you think? More use of the p tag?

AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH! Noooooo! Presentational markup is bad. Maybe even evil. Only content needs markup.

Notice there is no presentational markup in this example: http://www.alistapart.com/d/slidingdoors/v2/v2.html (from this article: http://www.alistapart.com/articles/slidingdoors/).

I kno... I kno.... I don't want to do it I want a fix around it! but how else am i supposed create a certain look when I have no content in them? For example, The very bottom of the page, the black bar that completes everything has 1 empty div:

<div class="bottom">
         <div class="bottom-left"></div>
         <div class="bottom-right"><img src="/images/button_postreply.png" alt="Post Reply" class="post-reply-two" /></div>
         </div>

It uses 3 images:

bottom_left: http://phone7forum.com/images/forum_bl.png
bottom_middle: http://phone7forum.com/images/forum_bm.png
bottom_right: http://phone7forum.com/images/forum_br.png

and the css for it:

.bottom {
	background: url("/images/forum_bm.png") repeat-x;
	height: 100px;
	margin: 0 51px 0 30px;
	position: relative;
}
 
.bottom-left {
	background: url("/images/forum_bl.png") no-repeat top left;
	position: absolute;
	width: 30px;
	height: 100px;
	left: -30px;
	top: 0;
}
 
.bottom-right {
	background: url("/images/forum_br.png") no-repeat scroll right top transparent;
	height: 100px;
	position: absolute;
	right: -51px;
	top: 0;
	width: 51px;
}

with no content, how am i supposed to create that? why is this so bad.., just out of curiosity? I would really like a way around it.

and i have to make it expandable since its a "liquid layout".. so it leaves looking for the best way to do this

Yes, get rid of that one, too.

Just like the article I posted. If there is no content it doesn't belong in the markup.

Because it's styling, it belongs in the CSS not in the HTML. If you're going to use presentational markup you may as well go back to the 1997 way of doing things with <FONT> and tables-based layout and throw in a few <BLINK> tags for good measure.

dude! there has to be a way around this to make it look the way i designed it to... cuz if I can't have that black bar then that will pretty much screw up everything. If there isn't a fix for it I'm biting the dust and doing it anyways. (don't hate me everyone!) hah..

If the future was here and css 3 was well into action I'd have this thing knocked out no problem. Come on future....

I'm not saying you need to abandon your design, I'm just suggesting you do it correctly. Empty tags aren't the way to go. See the article (and it's sequel) that I posted for better ideas.

About 7 or 8 years ago using an empty div to clear floats was pretty common but it's been deprecated for reasons of doing away with presentational markup.

Being too pedantic over empty elements, for a long time an empty span within an anchor was the approach to image replacement

I suppose. I think the code could be lightened a lot but carry on.

Agree with the sentiment overall; generally there is a tendency for markup to be abused for the sake of presentational requirements, but also the limitations placed on us by markup and CSS never really stepping up to the plate and delivering what we need has forced that too an extent.

I really shouldn't preach until I clean up the mess on my home pages.