Topic: Table look without tables (Page 1 of 1)

Hello

Can anyone point me to a tutorial on how to make a table look w/o using tables instead just using CSS?

--
Regards,
Elias

First of all, what do you mean by "table look"? In other words, what sort of content are we presenting here?

If you want to arrange tabular data, just use a table.

On the other hand, if you're looking for a grid layout, that's another story. But I think we need to clear up this "table look" thing first.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Hello Suho,

Usually, I use a table to create something like this:

/--------|                         |
| menu   |   contents go here      |
|        |                         |
|--------|-------------------------|

That is a table with say 100px for menu and the rest for contents. I've seen sites doing this sort of layout w/o tables.

Another usage is for tabular representation of data (a grid), is that also possible using CSS?

--
Regards,
Elias

This is a 2 column layout. Google knows how to do that.
Tables are meant to represent tabular datas. Use them for that and CSS to stylize the tables, th, td, ...

quote:

---

lallous said:

That is a table with say 100px for menu and the rest for contents. I've seen sites doing this sort of layout w/o tables.

Another usage is for tabular representation of data (a grid), is that also possible using CSS?--Regards,Elias

---

Ok, let's step back a moment!

Of course you have seen sites doing this sort of thing without tables, as there has been no reason to use tables for layout for several years now. Please take a look through the FAQ for CSS layout information, as well as doing some google searches for phrases such as -

tableless layout
CSS layout
2 column layout
semantic markup
why tables for layout is stupid

etc...

As for tabular data - that is what a table is for. PLEASE do not attempt to 'fake' a table when what should be logically used is actually a table! =)

And lastly, in regard to "is this possbile with CSS?"

Let's clarify.

CSS = Cascading Style Sheets. This is code that is specifically used for stylistic aspects of a web page.
HTML = Hyper Text Markup Language. This is scpecifically used for structural aspects of a web page.

The question at hand is not whether something is "possible with CSS". The question is, what is the appropriate HTML element with which to code each part of you web page, and what styles can be applied to that element to make it behave the way you want it to.

That may sound like a silly quibble, but it is important to have the right mindset and approach when starting to code.

Sorry for the delay in replying, but I've been away for a couple of days.

Definitely take DL's suggestion about FAQ and Google searches. You'll find tons of information and tutorials that will take you where you need to go.

I would also like to clarify something:

quote:

---

Another usage is for tabular representation of data (a grid)

---

That's not what I meant by a grid. A table is for tabular data (and, as DL and poi said, if you've got tabular data, don't hesitate to use a table--that's what they're for). A grid, on the other hand, is a geometrical framework underlying a physical design. With a grid-based design, you arrange your content according to this grid. One way of accomplishing this is by using a table--but this is the wrong way. The same grid-bsed layout can be achieved through CSS. Think of the grid as the blueprint and CSS/HTML and tabled HTML as the materials and tools with which you are going to build the house. Using tables in HTML to achieve a grid-based layout is like trying to build a house using playing cards and chewing gum.

So, basically what I'm saying is this: stop thinking of a grid as a table. A grid is a principle by which you organize your content. Tables are the wrong way to go about realizing this principle (unless the content in question is tabular data, of course).

For more on grid-based layouts, Google is your friend.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Just on link to get you started:
http://css.maxdesign.com.au/floatutorial/index.htm
look for tutorial 8: liquid two column layout
And another with 3 columns:
http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

There are tons more and all kind of ways to do it. The question should not be "Can it be done?" but "How do i want to do it?"
Have fun

.........................................................................
:: Develop yourself, develop your life, develop the world ::
.........................................................................

I think this belongs in the css forums...

.........................................................................
:: Develop yourself, develop your life, develop the world ::
.........................................................................

be sure to check http://www.positioniseverything.net/

The Space Between Us | My Blog: lukas.grumet.at