Need help converting Table to CSS

M.L.

unread,

Jan 5, 2012, 7:09:19 PM1/5/12

to

I'm trying to learn how to convert a 3 row, 2 column table to CSS. I
found the sample below that appeared to work OK in Firefox 9 until I
applied CSS border styling.

Without the table cell CSS border styling, the result shows 3 rows and
2 columns, but the table border CSS encloses only 2/3 of the rows.
http://i41.tinypic.com/o931v9.jpg

With the table cell "border:1px solid #333;" styling, the result shows
6 rows and 1 column with the table border CSS again enclosing only 2/3
of the rows.
http://i39.tinypic.com/23s9js9.jpg

I'd appreciate help with determining what CSS design concept I'm
missing. Thanks.

The CSS table example HTML is as follows:

**********************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tables to CSS</title>
<style type="text/css">
.tbl1 {width:600px;border-collapse:separate;border:1px solid
#333333;background-color:GreenYellow ;}
.tr1 {clear:both;}
.td1
{float:left;width:50%;padding:4;text-align:left;vertical-align:middle;font-weight:normal;color:red;border:1px
solid #333333;}
</style>
</head>
<body>
<div class="tbl1">
<div class="tr1">
<div class="td1">Cell 1</div>
<div class="td1">Cell 2</div>
</div>
<div class="tr1">
<div class="td1">Cell 3</div>
<div class="td1">Cell 4</div>
</div>
<div class="tr1">
<div class="td1">Cell 5</div>
<div class="td1">Cell 6</div>
</div>
</div>
</body>
</html>
**********************************************

Jonathan N. Little

unread,

Jan 5, 2012, 8:46:14 PM1/5/12

to

M.L. wrote:
>
> I'm trying to learn how to convert a 3 row, 2 column table to CSS. I
> found the sample below that appeared to work OK in Firefox 9 until I
> applied CSS border styling.
>
> Without the table cell CSS border styling, the result shows 3 rows and
> 2 columns, but the table border CSS encloses only 2/3 of the rows.
> http://i41.tinypic.com/o931v9.jpg
>
> With the table cell "border:1px solid #333;" styling, the result shows
> 6 rows and 1 column with the table border CSS again enclosing only 2/3
> of the rows.
> http://i39.tinypic.com/23s9js9.jpg

Seems to be a common misconception, it is not table *OR* CSS. CSS did
not *replace* tables for tabular data. Just replaces using a table as a
layout device for non-tabular data.

> I'd appreciate help with determining what CSS design concept I'm
> missing. Thanks.
>
> The CSS table example HTML is as follows:
>
> **********************************************
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html>
> <head>
> <title>Tables to CSS</title>
> <style type="text/css">
> .tbl1 {width:600px;border-collapse:separate;border:1px solid
> #333333;background-color:GreenYellow ;}

If "tbl1" is not a table then the "border-collapse" rule is not applicable.

> .tr1 {clear:both;}
> .td1
> {float:left;width:50%;padding:4;text-align:left;vertical-align:middle;font-weight:normal;color:red;border:1px
> solid #333333;}
> </style>
> </head>
> <body>
> <div class="tbl1">
> <div class="tr1">
> <div class="td1">Cell 1</div>
> <div class="td1">Cell 2</div>
> </div>
> <div class="tr1">
> <div class="td1">Cell 3</div>
> <div class="td1">Cell 4</div>
> </div>
> <div class="tr1">
> <div class="td1">Cell 5</div>
> <div class="td1">Cell 6</div>
> </div>
> </div>
> </body>
> </html>
> **********************************************

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Gus Richter

unread,

Jan 5, 2012, 9:00:03 PM1/5/12

to

What Jonathan said and .......

That TABLE uses the same defective traditional box model in Standards
Mode as it does in Quirks Mode and which you are getting for the whole
document by using the Transitional Doctype Declaration.

<http://www.google.ca/search?q=box+model&hl=en&client=firefox-a&hs=H8e&rls=org.mozilla:en-US:official&prmd=imvns&tbm=isch&tbo=u&source=univ&sa=X&ei=BVAGT4yUD6j40gHDlYWQDw&ved=0CEcQsAQ&biw=1280&bih=814>

Removing the border from .td1 works to achieve 50% width for it to fit
only because your padding is ignored because it is without a value.
Correcting it to padding:4px; will cause the .td1 to be overset of
the 50% by 10px, that means that .td1 has a width of
1px+4px+300px+4px+1px = 310px which makes it clear that two .td1's
(620px)will not fit within the 600px .tbl1 .

Although using a Strict/Standards Doctype won't solve anything in your
document, you should be using it.

--
Gus

dorayme

unread,

Jan 5, 2012, 9:24:22 PM1/5/12

to

In article <2oecg7906sj7u9eko...@4ax.com>,

M.L. <m...@privacy.invalid> wrote:

> I'm trying to learn how to convert a 3 row, 2 column table to CSS.

I know what you mean but it sounds as if there are false
assumptions behind it. CSS is not the opposite of HTML, or a form
that HTML can be converted into. An HTML table can be styled with
CSS, even heavily so, it can probably even be disguised as Roger
or Jessica Rabbit. On the other hand, all sorts of sets of HTML
non TABLE elements can be made to look like a grid formation,
even looking like a real HTML table using CSS.

> I
> found the sample below that appeared to work OK in Firefox 9 until I
> applied CSS border styling.
>
> Without the table cell CSS border styling, the result shows 3 rows and
> 2 columns, but the table border CSS encloses only 2/3 of the rows.
> http://i41.tinypic.com/o931v9.jpg
>

This looks like the container is not seeing the floats in it and
it needs to be forced into enclosing them. There are different
ways to do this, one way is to overflow: hidden on the container.
Other ways and a general discussion of the issues, see

<http://netweaver.com.au/floatHouse/page7.php>

> With the table cell "border:1px solid #333;" styling, the result shows
> 6 rows and 1 column with the table border CSS again enclosing only 2/3
> of the rows.
> http://i39.tinypic.com/23s9js9.jpg
>
> I'd appreciate help with determining what CSS design concept I'm
> missing. Thanks.

What exactly is the look you want? And why would you not use a
proper HTML table? HTML tables are good things and are essential
things for marking up lists of items whose relationships you need
to communicate.

There are many different ways to make a grid formation, what is
the content you have and what is the layout you want?

--
dorayme

tlvp

unread,

Jan 5, 2012, 9:50:41 PM1/5/12

to

On Thu, 05 Jan 2012 18:09:19 -0600, M.L. wrote:

> I'm trying to learn how to convert a 3 row, 2 column table to CSS. ...

Hmm ... if you're good at making tables, and an utter novice at crafting
decent CSS, then why not do as I'd do, and just stick to making tables?

Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

M.L.

unread,

Jan 6, 2012, 12:06:25 AM1/6/12

to

Thanks to all who replied. And a special thanks to Gus for the
rigorous technical analysis of the problem.

I corrected the padding and applied a new CSS rule for the rightmost
cells which removed their width and float properties. Those fixes gave
me the similarity I was seeking.