Hello,

I am trying to replicate a table design that I created for Print in
Photoshop:

http://www.wikifortio.com/504226/Test.jpg

Is it possible to create this with CSS?

I created a table with thead, tfoot and tbody tags.
The tags thead and tfoot use tr and th. The tag tbody uses tr and td.

I have been trying to style this with CSS but no success. Is this
possible?

Thanks,
Miguel

Scripsit shapper:

> Hello,

Please get to the point. Preferably in the Subject line. Now the most
significant part (given the context, which implies that everything here
deals with CSS) is "this". Does this give clue?

> I am trying to replicate a table design that I created for Print in
> Photoshop:
>
> http://www.wikifortio.com/504226/Test.jpg

Can't you explain the idea in words? Do we have to look at the picture
before we even know what on &Planet; you are talking about?

> Is it possible to create this with CSS?

Probably not. Most things in the world aren't possible to create with
CSS.

> I created a table with thead, tfoot and tbody tags.
> The tags thead and tfoot use tr and th. The tag tbody uses tr and td.

That's trivial and fairly irrelevant. You're effectively just saying
"I'm using table markup".

> I have been trying to style this with CSS but no success.

But you don't share your best effort with us.

> Is this possible?

It depends on what "this" is.

Oh well, I peeked. And most of it is possible with CSS, though the
rounded corners would require some hackery (or the use of a background
image and _fixed_ dimensions, in pixels, for the content). I'd estimate
it might take about 4 hours.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

shapper wrote:

> I am trying to replicate a table design that I created for Print in
> Photoshop:
>
> http://www.wikifortio.com/504226/Test.jpg

http://k75s.home.att.net/show/wikifortio.jpg

Find a place to upload your screenshot that does not require anyone to
have to download the graphic file, save it, and use their own image
editor. Like my link.

If you're working on a web site project, you must have access to a
server somewhere...

--
-bts
-Friends don't let friends drive Vista

On Mar 1, 1:20 pm, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalid> wrote:
> shapper wrote:
> > I am trying to replicate a table design that I created for Print in
> > Photoshop:
>
> >http://www.wikifortio.com/504226/Test.jpg
>
> http://k75s.home.att.net/show/wikifortio.jpg
>
> Find a place to upload your screenshot that does not require anyone to
> have to download the graphic file, save it, and use their own image
> editor. Like my link.
>
> If you're working on a web site project, you must have access to a
> server somewhere...
>
> --
> -bts
> -Friends don't let friends drive Vista

Jukka,

calm down ... no stress. I admit I didn't post it the best way ...
.... but there was an image to download describing what I am trying to
do.

Beauregard,

I am following your advice:

http://www.27lamps.com/_lab/Table.htm

Basically my problems are:

1. Add the background image on each header cell with a 1px white space
between the background and the border.

The problem here is how to have the 1px white space between the
background color and the border.

2. Add the small icon on the bottom right corner of each header table
cell.

I have no idea how to do it unless I use background image ... but
then I will not be able to use the other one, right?

This is what I have:

..Grid
{
border-collapse: collapse;
margin: 20px;
color: #505050;
font-size: 70%;
width: 600px;
}
..Grid td, .Grid th
{
border: solid 1px #B6CBE7;
}
..Grid thead th
{
background: url(Images/GridHeaderBackground.jpg) repeat-x;
padding: 1px;
}

Thank You,
Miguel

Scripsit shapper:

> calm down ... no stress. I admit I didn't post it the best way ...
> ... but there was an image to download describing what I am trying to
> do.

So the URL you originally posted did not refer to something that
illustrates what you want? Instead we were supposed to _indirectly_
download an image, which was assumed to tell what "this" is.

That was even more clueless than I expected. Are you surprised to hear
that I lost all interest in trying to you?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Mar 1, 2:44 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> Scripsit shapper:
>
> > calm down ... no stress. I admit I didn't post it the best way ...
> > ... but there was an image to download describing what I am trying to
> > do.
>
> So the URL you originally posted did not refer to something that
> illustrates what you want? Instead we were supposed to _indirectly_
> download an image, which was assumed to tell what "this" is.
>
> That was even more clueless than I expected. Are you surprised to hear
> that I lost all interest in trying to you?
>
> --
> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Jukka,

This is starting to be a soap opera ...

In my initial post the problem was not explained the best way ... or
not the way usually is done here.

I tried to improve it following Beauregard tips.

Obviously it is up to each person to me or not ... I am not going
to discuss that.

Thank You,
Miguel

shapper wrote:

> .Grid thead th
> {
> background: url(Images/GridHeaderBackground.jpg) repeat-x;
> padding: 1px;
> }

Here is your fundamental problem, the padding *includes* not *excludes*
the background.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>blocks</title>

<style type="text/css">
body { background-color: #faa; }
.test {
margin: 20px; padding: 10px; border: 1px solid #00f;
background-color: #afa;
}
</style>
</head>
<body>
<div class="test">
The canvas color will be pink. Now the test block's background is
green. Notice that the margin does not include the test's background,
but the padding does. Now you cannot use margins on table cells.
</div>
</body>
</html>

It s to understand what you are doing. See:
http://www.w3.org/TR/CSS21/box.html#box-dimensions

Now that said from your mock up image:

http://www.wikifortio.com/504226/Test.jpg

I have no idea what white line you are talking about.

--
Take care,

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

Scripsit shapper:

> In my initial post the problem was not explained the best way ... or
> not the way usually is done here.

And you still haven't explained the problem verbally, in words, in plain
English.

> Obviously it is up to each person to me or not ... I am not going
> to discuss that.

But you _are_ making pointless postings that say what you are not going
to do, as if that were of any interest to anyone.

I'm not trying to explain anything to you. Others may benefit from the
observation that people should others to them, using things
like
- meaningful Subject line
- clear explanation of the problem
- posting a URL without having been asked
- not posting useless babbling.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/