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/

On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> 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/

Jukka,

I think more then this I can't do:

1. What I am trying to do:
http://www.27lamps.com/_lab/Table.htm

2. What I have:
http://www.27lamps.com/_lab/TableHtml.htm

Thank You,
Miguel

On Mar 1, 3:29 pm, shapper <mdmo...@gmail.com> wrote:
> On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>
>
>
> > 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/
>
> Jukka,
>
> I think more then this I can't do:
>
> 1. What I am trying to do:http://www.27lamps.com/_lab/Table.htm
>
> 2. What I have:http://www.27lamps.com/_lab/TableHtml.htm
>
> Thank You,
> Miguel

Jonathan,

The white space I mean is the the background in each table header cell
to have a margin of 1px.

Please, see the links I just posted.

Thank You,
Miguel

shapper wrote:
> On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>> 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/
>
> Jukka,
>
> I think more then this I can't do:
>
> 1. What I am trying to do:
> http://www.27lamps.com/_lab/Table.htm
>
> 2. What I have:
> http://www.27lamps.com/_lab/TableHtml.htm

Well as Jukka has been telling you, urls . His surliness is
justified because you should have posted this first.


As I posted, you cannot make the padding a different color so one way is
to make the TABLE background blue and the TH border white. But note the
problem illustrated with your background image...

<!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>Test</title>

<style type="text/css">
body { font-family: sans-serif; }
table { color: #5050505; background-color: #b6cbe7; width: 30em; }
th { border: 1px solid #fff; color: #5050505;
background: #b6cbe7
url(http://www.27lamps.com/_lab/Images/G...ckground.jpg);
}
td { background-color: #fff; }

table.oops { font-size: 150%; }
</style>
</head>
<body>
<table>
<tr><th>Tag</th><th>Command</th></tr>
<tr><td>row 1, col 1</td><td>row 1, col 2</td></tr>
<tr><td>row 2, col 1</td><td>row 2, col 2</td></tr>
<tr><td>row 3, col 1</td><td>row 3, col 2</td></tr>
</table>

<p>But look what happens when user enlarges font!<p>

<table class="oops">
<tr><th>Tag</th><th>Command</th></tr>
<tr><td>row 1, col 1</td><td>row 1, col 2</td></tr>
<tr><td>row 2, col 1</td><td>row 2, col 2</td></tr>
<tr><td>row 3, col 1</td><td>row 3, col 2</td></tr>
</table>

</body>
</html>




--
Take care,

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

shapper wrote:

> I think more then this I can't do:
>
> 1. What I am trying to do:
> http://www.27lamps.com/_lab/Table.htm

So you want little triangle images in the corner...

> 2. What I have:
> http://www.27lamps.com/_lab/TableHtml.htm

Here is what I see, but note I made a modification or three to your CSS:

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

First, I removed Verdana. See:
http://k75s.home.att.net/fontsize.html

Second, I changed the font size of the cells to 100%. See fontsize.html
(Well, actually, I removed your 80% line. The C of CSS is Cascading.)

Third, I see a purple background, because that is my default background
color. You have not assigned one, to either the body, or the cells.

If you want little blue triangles, you would need to use transparent
..gif or .png and make the white area of the image transparent...

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

shapper wrote:

> Jonathan,
>
> The white space I mean is the the background in each table header cell
> to have a margin of 1px.
>
> Please, see the links I just posted.

Already told you cannot be done, padding will be the background color.
Other than the way I show in the example in my other post you would have
to nest extra block elements within each table cells...yuck...

--
Take care,

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

On 1 mar, 10:29, shapper <mdmo...@gmail.com> wrote:
> On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>

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

> I think more then this I can't do:
>
> 1. What I am trying to do:http://www.27lamps.com/_lab/Table.htm
>
> 2. What I have:http://www.27lamps.com/_lab/TableHtml.htm

Miguel,

Jukka is absolutely right. Basically, if you want , try to be as
ful as possible. And very important: show or try to provide as
much useful, ful info that explains, that presents the issue, the
whole picture.

Words like "this", "0000001", "Table", "n00000001", etc.. are either
meaningless, irrelevant or misleading or confusing. It irritates a
very wide majority of readers of posted messages to have to read and
visit webpages just to try to figure out what is the problem, issue,
etc...

What you want to get as a layout may not be logical, coherent from a
web design perpective. What is the content of your table? Is it
tabular data? If not, then you may be misusing tables.

Usually, column headers in a table are centered, not left-aligned:
that is true for all text and graphical browsers. Even for most
printed material.

What's the purpose of that small image at bottom right corner? within
your page context? within your webpage situation? Is it for cosmetic,
ornemental purposes? etc.
We have no idea, no clue, no explanations.

> a 1px white space between the background and the border

I do not see a 1px white space between the background and the border.
I see a 1px white border around the table cell though. The blue
between the 1px solid white borders may be the background-color of the
wrapping block container. Again, we don't know, we just see a chunk of
an image.

If you want a white border surrounding the table header cells, then
choose a 1px white border.

.Grid thead th
{
border: solid 1px #B6CBE7;

not a #B6CBE7 color.

Regards, Gérard

On Mar 1, 10:26 pm, GTalbot <newsgr...@gtalbot.org> wrote:
> On 1 mar, 10:29, shapper <mdmo...@gmail.com> wrote:
>
> > On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>
> > 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.
> > I think more then this I can't do:
>
> > 1. What I am trying to do:http://www.27lamps.com/_lab/Table.htm
>
> > 2. What I have:http://www.27lamps.com/_lab/TableHtml.htm
>
> Miguel,
>
> Jukka is absolutely right. Basically, if you want , try to be as
> ful as possible. And very important: show or try to provide as
> much useful, ful info that explains, that presents the issue, the
> whole picture.
>
> Words like "this", "0000001", "Table", "n00000001", etc.. are either
> meaningless, irrelevant or misleading or confusing. It irritates a
> very wide majority of readers of posted messages to have to read and
> visit webpages just to try to figure out what is the problem, issue,
> etc...
>
> What you want to get as a layout may not be logical, coherent from a
> web design perpective. What is the content of your table? Is it
> tabular data? If not, then you may be misusing tables.
>
> Usually, column headers in a table are centered, not left-aligned:
> that is true for all text and graphical browsers. Even for most
> printed material.
>
> What's the purpose of that small image at bottom right corner? within
> your page context? within your webpage situation? Is it for cosmetic,
> ornemental purposes? etc.
> We have no idea, no clue, no explanations.
>
> > a 1px white space between the background and the border
>
> I do not see a 1px white space between the background and the border.
> I see a 1px white border around the table cell though. The blue
> between the 1px solid white borders may be the background-color of the
> wrapping block container. Again, we don't know, we just see a chunk of
> an image.
>
> If you want a white border surrounding the table header cells, then
> choose a 1px white border.
>
> .Grid thead th
> {
> border: solid 1px #B6CBE7;
>
> not a #B6CBE7 color.
>
> Regards, Gérard

Gerard,

I understand your point, and I already admitted that initially my
problem was not well formulated.

I then explained it better and posted two links. I feel I couldn't be
more clear about my problem.
I believe that with very little effort my problem could be understood
from it ...

I understand that my CSS technical terms are not the best ones ... I
work mostly in ASP.NET/VB.NET/C#/SQL.

Due to my formation I work mostly with Neural Networks and
Optimization ...
Problems in this area are much more complex then in ASP.NET, CSS, ...
... but people don't start jumping around when someone does not
formulate the problem the best way.

This is something I see very often in this CSS groups for a long
time ... I think never with me but ...

Now what matters:

Gerald, I was not trying to create some layout with tables ...
I am using this only for tabular data and trying to stylish my table
according to a style made in Photoshop.

As Jonathan said the only solution would be to nest extra block
elements within table cells.
I solved it by placing divs inside header tables cells ... it is not
perfect but ...

A better solution would be possible if I could use two backgrounds
inside my table cells ...
... well this is not possible yet. In CSS 3 it will be possible. I
found the following:

http://www.css3.info/preview/multiple-backgrounds/

Thank You,
Miguel

On Mar 1, 11:17 pm, shapper <mdmo...@gmail.com> wrote:
> On Mar 1, 10:26 pm, GTalbot <newsgr...@gtalbot.org> wrote:
>
>
>
> > On 1 mar, 10:29, shapper <mdmo...@gmail.com> wrote:
>
> > > On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>
> > > 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.
> > > I think more then this I can't do:
>
> > > 1. What I am trying to do:http://www.27lamps.com/_lab/Table.htm
>
> > > 2. What I have:http://www.27lamps.com/_lab/TableHtml.htm
>
> > Miguel,
>
> > Jukka is absolutely right. Basically, if you want , try to be as
> > ful as possible. And very important: show or try to provide as
> > much useful, ful info that explains, that presents the issue, the
> > whole picture.
>
> > Words like "this", "0000001", "Table", "n00000001", etc.. are either
> > meaningless, irrelevant or misleading or confusing. It irritates a
> > very wide majority of readers of posted messages to have to read and
> > visit webpages just to try to figure out what is the problem, issue,
> > etc...
>
> > What you want to get as a layout may not be logical, coherent from a
> > web design perpective. What is the content of your table? Is it
> > tabular data? If not, then you may be misusing tables.
>
> > Usually, column headers in a table are centered, not left-aligned:
> > that is true for all text and graphical browsers. Even for most
> > printed material.
>
> > What's the purpose of that small image at bottom right corner? within
> > your page context? within your webpage situation? Is it for cosmetic,
> > ornemental purposes? etc.
> > We have no idea, no clue, no explanations.
>
> > > a 1px white space between the background and the border
>
> > I do not see a 1px white space between the background and the border.
> > I see a 1px white border around the table cell though. The blue
> > between the 1px solid white borders may be the background-color of the
> > wrapping block container. Again, we don't know, we just see a chunk of
> > an image.
>
> > If you want a white border surrounding the table header cells, then
> > choose a 1px white border.
>
> > .Grid thead th
> > {
> > border: solid 1px #B6CBE7;
>
> > not a #B6CBE7 color.
>
> > Regards, Gérard
>
> Gerard,
>
> I understand your point, and I already admitted that initially my
> problem was not well formulated.
>
> I then explained it better and posted two links. I feel I couldn't be
> more clear about my problem.
> I believe that with very little effort my problem could be understood
> from it ...
>
> I understand that my CSS technical terms are not the best ones ... I
> work mostly in ASP.NET/VB.NET/C#/SQL.
>
> Due to my formation I work mostly with Neural Networks and
> Optimization ...
> Problems in this area are much more complex then in ASP.NET, CSS, ...
> ... but people don't start jumping around when someone does not
> formulate the problem the best way.
>
> This is something I see very often in this CSS groups for a long
> time ... I think never with me but ...
>
> Now what matters:
>
> Gerald, I was not trying to create some layout with tables ...
> I am using this only for tabular data and trying to stylish my table
> according to a style made in Photoshop.
>
> As Jonathan said the only solution would be to nest extra block
> elements within table cells.
> I solved it by placing divs inside header tables cells ... it is not
> perfect but ...
>
> A better solution would be possible if I could use two backgrounds
> inside my table cells ...
> ... well this is not possible yet. In CSS 3 it will be possible. I
> found the following:
>
> http://www.css3.info/preview/multiple-backgrounds/
>
> Thank You,
> Miguel

I just posted the new version:

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

I am not sure if this is the best way to do this. The problem I have
now is that I get a "border" on the footer.

Thank You,
Miguel

shapper meinte:

> I just posted the new version:
>
> http://www.27lamps.com/_lab/Table.htm
>
> I am not sure if this is the best way to do this. The problem I have
> now is that I get a "border" on the footer.

Sigh. You still haven't stated, what you want to achieve. So
everything's ok except the footer border? Right?

Well, the footer border isn't a border. It's just the background color
of the table, that shines through since you've non-collapsing borders.
Since this is a table property it can't be turned off for single rows.

What tools - if any - are you using? Do yourself a favour and get the
Firebug extension for your Firefox. Makes it easy to track down issues,
change and deactivate CSS properties on the fly, and a lot even more
useful things.

Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

On Mar 2, 12:00 am, Gregor Kofler <use...@gregorkofler.at> wrote:
> shapper meinte:
>
> > I just posted the new version:
>
> >http://www.27lamps.com/_lab/Table.htm
>
> > I am not sure if this is the best way to do this. The problem I have
> > now is that I get a "border" on the footer.
>
> Sigh. You still haven't stated, what you want to achieve. So
> everything's ok except the footer border? Right?
>
> Well, the footer border isn't a border. It's just the background color
> of the table, that shines through since you've non-collapsing borders.
> Since this is a table property it can't be turned off for single rows.
>
> What tools - if any - are you using? Do yourself a favour and get the
> Firebug extension for your Firefox. Makes it easy to track down issues,
> change and deactivate CSS properties on the fly, and a lot even more
> useful things.
>
> Gregor
>
> --http://photo.gregorkofler.at::: Landschafts- und Reisefotografiehttp://web.gregorkofler.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum

Greg,

I know it is not a border that is why I wrote "border".
I am using Visual Studio ...

I just installed Firebug.

Thanks,
Miguel

On 1 mar, 18:17, shapper <mdmo...@gmail.com> wrote:


> Now what matters:
>
> Gerald, I was not trying to create some layout with tables ...
> I am using this only for tabular data and trying to stylish my table
> according to a style made in Photoshop.


You still haven't answered many questions I asked you... you know,
webpage context, purpose of that small image, etc... <...deep
breath...>

Good luck, Gérard

On Mar 2, 3:51 am, GTalbot <newsgr...@gtalbot.org> wrote:
> On 1 mar, 18:17, shapper <mdmo...@gmail.com> wrote:
>
> > Now what matters:
>
> > Gerald, I was not trying to create some layout with tables ...
> > I am using this only for tabular data and trying to stylish my table
> > according to a style made in Photoshop.
>
> You still haven't answered many questions I asked you... you know,
> webpage context, purpose of that small image, etc... <...deep
> breath...>
>
> Good luck, Gérard

Gérard,

I did explained!

1. The table is not for layout is for data presentation.
2. The small icon, in this moment is just a stylish element.
However in the future it will indicate something about the column.

I concluded that with CSS2 is not possible to create a header cell
with a background, having that background a 1px spacing from the table
cell border and at the same time having a small icon on the bottom
right corner.
Of course, this style should only be applied to header cells. So using
other approaches creates problems with footer.

In CSS3 with multiple backgrounds the problem solution will be
straight forward.

I then abdicated of the 1px spacing between the table cell background
and its border.

Then I applied the small icon as th background and the blue bar as tr
background.

Thank You,
Miguel