How to modify table borders?

[Ellie C]

Hi,

I would like to modify the look of a table border and I can't figure out
how to do it. I wonder if anyone in this groupo can help. I saw the look
I want on a website (http://www.annestahl.com). The table under her name
has the look I want - making it loo like a raised area without the inner
border that you get with the usual table boders. I looked at the source
for this page and saw that this was done with CSS. I'm completely
unschooled in CSS but I tried copying the stuff in the referenced file.
But when I try adding this to my own page it dosen't work. Can anyone
give me some ideas?

Thanks,

Ellie

Here's the "code"

body {
background-color:#CCCC99;
font-family: "Century Gothic", "Lucida Sans Unicode", "Trebuchet MS",
Verdana;
}
a:hover { color:red }
a:link {color:#444200}
a:active {color:#ff0000}
a:visited {color:#666666}
table.menu {border
border: #999900;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
}
..table1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
h2 {
font-size: 16px;
}
..smtext {
font-size: 12px;
}

 

[Alan J. Flavell]

Here's the "code" [...]
h2 {
font-size: 16px;
}
.smtext {
font-size: 12px;
}

Ouch.

 

[Roy Schestowitz]

__/ [Ellie C] on Sunday 08 January 2006 16:52 \__

Hi,

I would like to modify the look of a table border and I can't figure out
how to do it. I wonder if anyone in this groupo can help. I saw the look
I want on a website (http://www.annestahl.com). The table under her name
has the look I want - making it loo like a raised area without the inner
border that you get with the usual table boders. I looked at the source
for this page and saw that this was done with CSS. I'm completely
unschooled in CSS but I tried copying the stuff in the referenced file.
But when I try adding this to my own page it dosen't work. Can anyone
give me some ideas?

Thanks,

Ellie

Here's the "code"

body {
background-color:#CCCC99;
font-family: "Century Gothic", "Lucida Sans Unicode", "Trebuchet MS",
Verdana;
}
a:hover { color:red }
a:link {color:#444200}
a:active {color:#ff0000}
a:visited {color:#666666}
table.menu {border
border: #999900;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
}
.table1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
h2 {
font-size: 16px;
}
.smtext {
font-size: 12px;
}

You probably needn't bother with CSS for this. I saw the table in question.
Have you looked at the standard attribute for tables in HTML? Have you bound
your table to the class table1 or menu at all? There is nothing too
sophisticated in the styles. There is also excess in terms of the number of
repeated declarations and attributes. Put the style in your header or within
a peripheral CSS file (link to it). You only need to make use of the classes
then (class="foo").

Best wishes,

Roy

PS - Try to learn HTML and be inspired by sites of higher quality. You might
adopt some bad habits or reflect badly on your site if you borrow code and
examples from the wrong places.

 

[Ellie C]

__/ [Ellie C] on Sunday 08 January 2006 16:52 \__

Hi,

I would like to modify the look of a table border and I can't figure out
how to do it. I wonder if anyone in this groupo can help. I saw the look
I want on a website (http://www.annestahl.com). The table under her name
has the look I want - making it loo like a raised area without the inner
border that you get with the usual table boders. I looked at the source
for this page and saw that this was done with CSS. I'm completely
unschooled in CSS but I tried copying the stuff in the referenced file.
But when I try adding this to my own page it dosen't work. Can anyone
give me some ideas?

Thanks,

Ellie

Here's the "code"

body {
background-color:#CCCC99;
font-family: "Century Gothic", "Lucida Sans Unicode", "Trebuchet MS",
Verdana;
}
a:hover { color:red }
a:link {color:#444200}
a:active {color:#ff0000}
a:visited {color:#666666}
table.menu {border
border: #999900;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
}
.table1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
h2 {
font-size: 16px;
}
.smtext {
font-size: 12px;
}

You probably needn't bother with CSS for this. I saw the table in question.
Have you looked at the standard attribute for tables in HTML? Have you bound
your table to the class table1 or menu at all? There is nothing too
sophisticated in the styles. There is also excess in terms of the number of
repeated declarations and attributes. Put the style in your header or within
a peripheral CSS file (link to it). You only need to make use of the classes
then (class="foo").

Best wishes,

Roy

PS - Try to learn HTML and be inspired by sites of higher quality. You might
adopt some bad habits or reflect badly on your site if you borrow code and
examples from the wrong places.

Yeah, I looked at the attributes for TABLE but couldn't find anything
that eliminated the "inner" border on tables. For instance, you set the
top border to a light color and the bottom border to a dark color, sure
you get the light color along the top and left side and the dark color
along the bottom andlefet side. But you also get a thinner line of the
opposite color on the inner edge of the table border. If you notice the
table in the web site I want to copy, there is no inner edge at all, so
that the table, in effect, looks like a raised, solid rectangle on the
page, whereas the typical table border looks like a raised hollow
rectangle around the table contents.

I did learn HTML some years ago - and found it to be the easiest but
most boring "programming" language I ever used. HTML is like programming
with all the hard and interesting parts taken out and all the boring
parts multiplied by 1000. It's a language without verbs, only nouns and
adjectives... ;-)

Ellie

 

[Roy Schestowitz]

__/ [Ellie C] on Monday 09 January 2006 16:37 \__

__/ [Ellie C] on Sunday 08 January 2006 16:52 \__

Hi,

I would like to modify the look of a table border and I can't figure out
how to do it. I wonder if anyone in this groupo can help. I saw the look
I want on a website (http://www.annestahl.com). The table under her name
has the look I want - making it loo like a raised area without the inner
border that you get with the usual table boders. I looked at the source
for this page and saw that this was done with CSS. I'm completely
unschooled in CSS but I tried copying the stuff in the referenced file.
But when I try adding this to my own page it dosen't work. Can anyone
give me some ideas?

Thanks,

Ellie

Here's the "code"

body {
background-color:#CCCC99;
font-family: "Century Gothic", "Lucida Sans Unicode", "Trebuchet MS",
Verdana;
}
a:hover { color:red }
a:link {color:#444200}
a:active {color:#ff0000}
a:visited {color:#666666}
table.menu {border
border: #999900;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
}
.table1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
h2 {
font-size: 16px;
}
.smtext {
font-size: 12px;
}

You probably needn't bother with CSS for this. I saw the table in
question. Have you looked at the standard attribute for tables in HTML?
Have you bound your table to the class table1 or menu at all? There is
nothing too sophisticated in the styles. There is also excess in terms of
the number of repeated declarations and attributes. Put the style in your
header or within a peripheral CSS file (link to it). You only need to make
use of the classes then (class="foo").

Best wishes,

Roy

PS - Try to learn HTML and be inspired by sites of higher quality. You
might adopt some bad habits or reflect badly on your site if you borrow
code and examples from the wrong places.

Yeah, I looked at the attributes for TABLE but couldn't find anything
that eliminated the "inner" border on tables. For instance, you set the
top border to a light color and the bottom border to a dark color, sure
you get the light color along the top and left side and the dark color
along the bottom andlefet side. But you also get a thinner line of the
opposite color on the inner edge of the table border. If you notice the
table in the web site I want to copy, there is no inner edge at all, so
that the table, in effect, looks like a raised, solid rectangle on the
page, whereas the typical table border looks like a raised hollow
rectangle around the table contents.

Yes, I agree that it looks unordinary and quite all right. The site as a
whole does not look professional though. Building it in such a way is
old-stylish in my humble opinion. What happened to standards-based design
that exploits full separation between content and layout? The site above
is not terrible, but I have seen far nicer menus and tables, which often,
but not always, exploit tiny graphics files.

I did learn HTML some years ago - and found it to be the easiest but
most boring "programming" language I ever used. HTML is like programming
with all the hard and interesting parts taken out and all the boring
parts multiplied by 1000. It's a language without verbs, only nouns and
adjectives... ;-)

Beautiful analogy. Use/hack/learn PHP then...