Topic: Table look without tables Pages that link to <a href="https://ozoneasylum.com/backlink?for=28474" title="Pages that link to Topic: Table look without tables" rel="nofollow" >Topic: Table look without tables\

 
Author Thread
lallous
Maniac (V) Inmate

From: Lebanon
Insane since: May 2001

IP logged posted posted 09-26-2006 13:57 Edit Quote

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

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 09-26-2006 14:43 Edit Quote

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

lallous
Maniac (V) Inmate

From: Lebanon
Insane since: May 2001

IP logged posted posted 09-27-2006 09:27 Edit Quote

Hello Suho,

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

code:
/--------|                         |
| 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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-27-2006 09:38 Edit Quote

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, ...

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 09-27-2006 16:57 Edit Quote
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.

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 09-28-2006 04:09 Edit Quote

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

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

IP logged posted posted 09-28-2006 15:02 Edit Quote

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 ::
.........................................................................

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

IP logged posted posted 10-03-2006 13:31 Edit Quote

I think this belongs in the css forums...

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

mas
Maniac (V) Mad Librarian

From: the space between us
Insane since: Sep 2002

IP logged posted posted 10-06-2006 15:00 Edit Quote

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

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu