CSS table

Toby Inkster · Apr 16, 2005

humbads said:
What is a table? It is a collection of data organized by rows and
columns.

Not really. A table is a collection of data organised by rows and columns
(and here comes the important part) where the cells in each row, and the
cells in each column share some common meaning, and the intersections
between rows and columns carries a significance.

I have the CSS2 programmer's reference, and it doesn't even have an
entry in its index for "columns".

Then throw it away. CSS 2.x provides plenty of mechanisms for creating
grid-like structures without using the TABLE element:

http://www.w3.org/TR/REC-CSS2/tables.html

Jim Scott · Apr 16, 2005

Funny. <flamebait>I'm afraid you'll get a lot of that around
here.</flamebait>

What is a table? It is a collection of data organized by rows and
columns. Since you want your images in rows and columns, it is best to
use a table to hold them. I have the CSS2 programmer's reference, and
it doesn't even have an entry in its index for "columns". CSS doesn't
know anything about rows and columns. Don't use tables where you can
use CSS, but that doesn't mean don't ever use tables. (Example, you
have a list of products and you want there to be a lot of white space
between each list item. Don't use a table with high cell padding, use
the line-height CSS property specified in em units on the LI tag.)

For your two by two tables, put your style definitions in a common file
and reference this file via a link tag in each html page. Then,
specify the class for the 2x2 tables, like this:

CSS:

table.foursquare { width: 100%; }
table.foursquare td { width: 50%; }

psuedo-HTML:
<link rel="stylesheet" type="text/css" href="globalstyles.css">
</head><body>
<table class="foursquare">
<tr><td><img1></td><td><img2></td>
<tr><td><img3></td><td><img4></td>
</table>

Now you can control the look of all the foursquare tables in your whole
website from a single file. That's the main advantage of CSS. Another
major advantage is inheritance, which you can see above in the
"table.foursquare td" style. This says the style applies to all td
elements within a table.foursquare. You save the tedious work of having
to specify a class attribute in each td. Now let your imagination run
wild with the possibilities.

If only it were that simple I would not be bothering you. If you were to
look at the local history pictures on my site, you would see that the
standard layout for the inserted page is a 2 column, 3 row table with a
button top right, image centre left with text in row below. However when
the image is wide and narrow I put the button above the image to
prevent/reduce scrolling right.
Sometimes there can be several small images with bits of text surrounding.
That's a bit of a fiddle and has required table below table, or even table
inside table to achieve.

humbads · Apr 16, 2005

and the cells in each column share some common meaning, and the
intersections between rows and columns carries a significance

That's a good point, but it is debatable as to whether or not it has
any practical value. Some people use Excel to store recipes, even
though it is 'supposed' to be for spreadsheets.

CSS 2.x provides plenty of mechanisms for creating
grid-like structures without using the TABLE element:

I didn't know that. At the same time, it is barely worth knowing since
a) IE does not support those table display properties, and b) those
properties skewer the simplicity of regular HTML. Too much abstraction
can be a counter-productive.

http://www.blooberry.com/indexdot/css/supportkey/classify.htm

dorayme · Apr 17, 2005

From: Toby Inkster said:
Not really. A table is a collection of data organised by rows and columns
(and here comes the important part) where the cells in each row, and the
cells in each column share some common meaning, and the intersections
between rows and columns carries a significance.

Toby A Inkster BSc (Hons) ARCS

Suppose we settle on the meaning of all the relevant words, there will still
be the question of when a designer should use the table tags. I know what
you are saying (and you say it well) but the answer by those who want to use
tables will always be, in the end, something like, "I use it if it achieves
*my* purpose in the simplest way *I* can figure"

dorayme

Toby Inkster · Apr 17, 2005

humbads said:
That's a good point, but it is debatable as to whether or not it has
any practical value. Some people use Excel to store recipes, even
though it is 'supposed' to be for spreadsheets.

That is true, but I tend to debate the way things *should* be done, rather
than the way they *could* be done.

There are generally a miscellany of different approaches to solving a
problem which, to the untrained eye -- e.g. a typical visitor to a web
site -- may seem equally good.

But to the trained eye, some solutions have elegance and grace whereas
others are ugly hacks. The best solution to a problem, is the one that is
beautiful to the trained eye, because this pleases everyone. (The
untrained eye is happy with any solution.)

I didn't know that. At the same time, it is barely worth knowing since
a) IE does not support those table display properties, and b) those
properties skewer the simplicity of regular HTML.

In technical realms, beauty is gernerally associated with simplicity.
Simplicity is also a good thing for the bean counters -- a simple solution
is less likely to go wrong, and if it does, probably faster (hence cheaper)
to fix. Simplicity is good.

In the specific case of presenting information in a grid-like fashion, if
Internet Explorer support is required, a table may be the simplest
solution.

If Internet Explorer support is not required though, using CSS's table
display stuff can make your markup even simpler.

Consider a list of quotations and choose this simplest possible markup.

It's a list, so one of UL, OL or DL is probably good. The order of the
list is not important to the understanding of the list, and the list is
not a list of definitions, so UL is where we start.

<UL>
</UL>

For each quotation we add a list item. Still simple.

<UL>
<LI>"Either this man's dead or my watch has stopped!" Groucho Marx
<LI>"Veni, Vidi, Vici" Julius Caesar
</UL>

Now, take advantage of HTML's handy Q and CITE elements:

<UL>
<LI><Q>"Either this man's dead or my watch has stopped!"</Q>
<CITE>Groucho Marx</CITE>
<LI><Q lang="la">"Veni, Vidi, Vici"</Q>
<CITE>Julius Caesar</CITE>
</UL>

And add a little CSS magic:

UL { display: table }
LI { display: table-row }
Q,CITE { display: table-cell }

Simple and elegant. If you want to see what it looks like, point a CSS 2.x
compliant browser here:

http://examples.tobyinkster.co.uk/table-tricks/q

RF Rohrer · Apr 22, 2005

You dont. Replacing table quickly with CSS is not possible cross-browser.
There are still too many browser quirks. Work with what is fast and solid
cross-browser.

RF Rohrer · Apr 22, 2005

You dont. Replacing table quickly with CSS is not possible cross-browser.
There are still too many browser quirks. Work with what is fast and solid
cross-browser.

RF Rohrer · Apr 22, 2005

You dont. Replacing table quickly with CSS is not possible cross-browser.
There are still too many browser quirks. Work with what is fast and solid
cross-browser.

kchayka · Apr 22, 2005

RF said:
Replacing table quickly with CSS is not possible cross-browser.

<sigh>

If you try to replace layout tables with CSS positioning without first
understanding what the CSS is really doing (and probably rethinking your
document structure), then you are quite likely to end up with a hacked
up mess. Then you'll throw your hands up in the air, declare that CSS
doesn't work, and go back to layout tables.

Take the time to actually learn the technology you're trying to use and
you'll have better results with less frustration. And as with anything
else, you'll get faster at it with practice.

BTW, did you really find it necessary to post this message 4 times?
And please don't top-post in this newsgroup.
<URL:http://allmyfaqs.com/faq.pl?How_to_post>

CSS File does not really work?	1	Jul 7, 2023
Only one table shows up with the information	2	Mar 29, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Javascript DOM	1	Mar 29, 2023
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Css not being loaded	1	Oct 3, 2017
How to have two html audio players on one page?	0	May 3, 2022
Help with my responsive home page	2	Dec 14, 2022

CSS table

Toby Inkster

Jim Scott

humbads

dorayme

Toby Inkster

RF Rohrer

RF Rohrer

RF Rohrer

kchayka

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads