Table Columns
shapper
What is the correct way to have a table with 3 equal width columns?
And is it possible to have a margin between each column but not having
on the left side or right side of the table?
And also have the same margin between two consecutive rows ...
Something like:
Col1 <Space> Col2 <Space> Col3
Thanks,
Miguel
Ben C
> Hello,
>
> What is the correct way to have a table with 3 equal width columns?
Set the first cell in each column to width: 33%.
> And is it possible to have a margin between each column but not having
> on the left side or right side of the table?
You could set margins on the tds and ths, except no top margin for those
in the first row, no left margin for those in the left column, etc.
A bit fiddly though and rather too much like hard work. So you could try
something like this instead:
/* Gaps around the cells */
td, th { border: 20px solid transparent; }
/* But clip the whole table to a box 20px too small for it all
* on all sides */
table { margin : -20px; border-spacing: 0; }
/* This must be shrink-to-fit width, which is why we use float.
* It doesn't really need to be overflow: hidden since the only
* things overflowing it are transparent borders, but we're
* control freaks. */
div.foo
{
float:left;
border: 1px solid black;
overflow: hidden;
}
...
<div class="foo">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
Of course you can size the gaps in ems rather than px if you want them
to grow with fonts.
This reminds me of a claim Korpela recently made about some things you
can do with presentational border attributes that you can't do with CSS.
Well, <table rules=all border=0> is certainly fiddly if not impossible
to do with CSS.
Jukka K. Korpela
> What is the correct way to have a table with 3 equal width columns?
It depends. More context is needed. Specifically, width equal to what? And
at what cost?
You can set widths explicitly and use table-layout: fixed on the table
element. But this comes with considerable risks (which should be analyzed in
the appropriate specific context).
> And is it possible to have a margin between each column but not having
> on the left side or right side of the table?
Margin properties are, by CSS specs, ignored for table columns and cells.
> And also have the same margin between two consecutive rows ...
You can set border-spacing, but it lacks support on many browser versions
that are still important. Moreover, it applies to a table as a whole.
Although you can set vertical and horizontal spacing as different, it will
also affect the spacing e.g. between the table's left edge and the first
column. Apparently you don't want to do that.
There's a trick, though: kill that undesired spacing by setting negative
margins for the table as a whole, e.g.
table { border-spacing: 1em;
margin: -1em; }
This trick has serious risks, though: what happens on browsers that support
the margin property (which is supported by all CSS-enabled browsers) but do
not support the border-spacing property?
> Something like:
>
> Col1 <Space> Col2 <Space> Col3
A crucical question is whether the space should appear between borders of
the cells. If the table has no borders, then the obvious solution is to use
padding for the cells.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
shapper
> It depends. More context is needed.
Hello,
Basically I would like to create a products gallery with 4 columns
equal width.
The total width I have available is 840px (I can use pixels or
percentage).
Each product should display an image with the name under it and a
brochure link under the name.
And each product should have a black background.
So it would be something like (I am showing 2 columns):
|-------------| |-------------|
|--Image--| |_______|
|--Name--| |_______|
|--Link-----| |-------------|
So the first product should be just at the far left with no border
(and having a black background on it).
Then leave margin and have the next product on the right and so on.
Between each row have also the same margin.
I can place a drawing online if needed.
I tried to create this with Lists and Divs but it never felt right and
hard to make it work.
So I decided to go for a table ... but I am not really sure if this is
possible or how.
Thanks,
Miguel
dorayme
<6b5f5418-cdd7-41be...@y7g2000yqa.googlegroups.com>,
shapper <mdm...@gmail.com> wrote:
> I can place a drawing online if needed.
How about your best shot HTML/CSS URL online?
--
dorayme
John Hosking
> On Jul 5, 8:00�pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>> It depends. More context is needed.
>
> Basically I would like to create a products gallery with 4 columns
> equal width.
So, the context for your request for "3 equal width columns" (your OP) is
"4 columns equal width?"
[...]
>
> So it would be something like (I am showing 2 columns):
2, 3, 4: what's the difference if we're all friends?
>
>|-------------| |-------------|
>|--Image--| |_______|
>|--Name--| |_______|
>|--Link-----| |-------------|
What a mess. I don't think you can do this with CSS2. I think you might
need CSS3 and HTML5 to do this. ;-)
Maybe the diagram below more accurately reflects your desires[1]?
. |<------------------------- 840px ------------------------->|
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxx|-----------| |-----------| |-----------| |-----------|xxxxx
xxxx| | | | | | | |xxxxx
xxxx| |------| | | |------| | | |------| | | |------| |xxxxx
xxxx| | Prod.| | | | Prod.| | | | Prod.| | | | Prod.| |xxxxx
xxxx| |Image1| | | |Image2| | | |Image3| | | |Image4| |xxxxx
xxxx| |______| | | |______| | | |______| | | |______| |xxxxx
xxxx| | | | | | | |xxxxx
xxxx| Some | | Some | | Some | | Some |xxxxx
xxxx| Text | | Other | | Text | | More |xxxxx
xxxx| | | Text | | which is | | Text |xxxxx
xxxx| | | | | Different | | |xxxxx
xxxx|___________| |___________| |___________| |___________|xxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
. -->| m |<-- -->| m |<-- -->| m |<--
where x is something or maybe nothing on, presumably, a light background,
and the white spaces represent black backgrounds. It's sort of a negative
image represented by alpha characters in a text-only environment.
It's an interesting problem (IIUIC), for which I currently have no answer
(but do see the responses from Ben and Jukka). I am rather certain that if
I had this problem facing me IRL I would end up working around it and just
accept some margin space on the left and right sides.
>
> So the first product should be just at the far left with no border
> (and having a black background on it).
> Then leave margin and have the next product on the right and so on.
> Between each row have also the same margin.
>
> I can place a drawing online if needed.
A URL to your attempt(s) would be better.[2]
[1] No guarantee for how the diagram looks in GoogleGroups.
[2] dorayme is right. Again!
--
John
Jukka K. Korpela
> Basically I would like to create a products gallery with 4 columns
> equal width.
I see, kind of.
> The total width I have available is 840px
But who knows what your visitors have available or are willing to allocate?
> Each product should display an image with the name under it and a
> brochure link under the name.
> And each product should have a black background.
You could consider making each product info a separate box, writing them one
after another, and using floating to let browser lay them out - a bit like
they do text formatting.
What I mean is simply a sequence of
<div class="prod">...</div>
with something like
.prod { float: left; width: 200px; height: 300px; margin-right: 8px;
margin-bottom: 8px; }
You may wish to use borders, backgrounds, etc., but that should be simple.
The basic approach is similar to the "fluid galleries" idea that I have
described in
http://www.cs.tut.fi/~jkorpela/www/captions.html
Since the images are probably of the same size, this is one of rare cases
where the px unit makes sense in dimensioning. What you put inside the boxes
and how you format it is then a separate issue; it is best to solve it
separately, and there are many possible approaches, like "absolute"
positioning (that is, positioning its contents relative to the box), but
probably you can use something very simple there.
If you really want to get rid of fluidity, you _can_ put the stuff inside a
container that has a fixed width in pixels. But please don't tell me! ;-)
> So I decided to go for a table ... but I am not really sure if this is
> possible or how.
Of course it is possible, but it is clumsy and restrictive in a case like
this.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
shapper
I created an example for what I am trying to do:
http://www.flyondreams.pt/Beta/Gallery.htm
This example works with Div's and Lists.
I am not able to create a bottom margin on each row. I don't know why.
I am not sure if this is the best option ... Or if I should use a
table.
Something strange goes on when using a Caption with more then one
line.
I think the only option to solve this specific problem would be a
table.
Any suggestion for my present code or alternatives are welcome.
I will update my code ...
Thanks,
Miguel
dorayme
<8978b826-34ac-4d1f...@d32g2000yqh.googlegroups.com>,
shapper <mdm...@gmail.com> wrote:
> Hi,
>
> I created an example for what I am trying to do:
> http://www.flyondreams.pt/Beta/Gallery.htm
>
> This example works with Div's and Lists.
> I am not able to create a bottom margin on each row. I don't know why.
>
If you want to create an equal looking set up without floats snagging
along these lines, it helps to know which your longest caption is going
to be. Then you have two strategies here. Either put the boxes with the
longest captions in a group at the end or make sure all the boxes have a
generous height.
For example:
<http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/thumbLands
capeGallery7.html>
works ok for short captions. If one or two or a few were longer, either
rearrange to the end of the lists or perhaps - if one of the captions
was "a longer caption and description that goes on a while." something
like add height: 12em to #wrapper div
This makes all the boxes spread to accommodate the rarer taller ones.
> I am not sure if this is the best option ... Or if I should use a
> table.
If you really do not know the height of the tallest boxes or you do not
group the taller ones intelligently in a deliberate manner to avoid a
waste of space, then a table is the way to go. Especially in your case
considering you do not seem to want really fluid as in my URL above but
a mere 800px fixed. You seem to have a predetermined number of cols.
Make life easier for yourself, be unsemantic and use a table! It is not
your fault that IE especially does not support CSS table display
possibilities. Blame IE. Sleep well. Cook and send Portuguese food.
--
dorayme
Jukka K. Korpela
> I created an example for what I am trying to do:
> http://www.flyondreams.pt/Beta/Gallery.htm
Looks pretty much like a simple layout you could achieve easily the way I
outlined before.
> This example works with Div's and Lists.
Excessive markup.
> I am not able to create a bottom margin on each row. I don't know why.
I wouldn't care, since the approach is unnecessarily complex.
> I am not sure if this is the best option ...
I am sure it isn't.
> Or if I should use a table.
You shouldn't.
> Something strange goes on when using a Caption with more then one
> line.
> I think the only option to solve this specific problem would be a
> table.
>
> Any suggestion for my present code or alternatives are welcome.
> I will update my code ...
>
> Thanks,
> Miguel
--
--
Yucca, http://www.cs.tut.fi/~jkorpela/
BootNic
dorayme <dorayme...@optusnet.com.au> wrote:
> In article
> <8978b826-34ac-4d1f...@d32g2000yqh.googlegroups.com>,
> shapper <mdm...@gmail.com> wrote:
>
>> I created an example for what I am trying to do:
>> http://www.flyondreams.pt/Beta/Gallery.htm
[snip]
> For example:
>
> <http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/thumbLands
> capeGallery7.html>
[snip]
inline-block example, not quite the same but similar.
[url] http://bootnic.bounceme.net/InlineBlock.html [/url]
[snip]
> It is not your fault that IE especially does not support CSS
> table display possibilities.
IE 8 has the possibility to use display:table;
[snip]
--
BootNic Tue Jul 7, 2009 11:58 am
A positive attitude may not solve all your problems, but it will
annoy enough people to make it worth the effort.
*Herm Albright*
Jukka K. Korpela
>> Something strange goes on when using a Caption with more then one
>> line.
Sorry, I hit "Send" too early and therefore just quoted the rest of Miguel's
message. Not one of my habits...
Anyway, what he needs is something simple like
<div class="prod">
<img ...>
<div>caption</div>
<a href="...">...</a>
</div>
used the way I suggested before, and internally formatted e.g. with
.prod { width: 200px; height: 200px; margin-right: 8px; margin-bottom:
8px; }
.prod { background: #0ff; color: #000; text-align: center; }
.prod img { width: 120px; height: 120px; margin-top: 8px; }
Naturally, the caption texts and the formatting should be designed so that
the texts fit. Otherwise the texts flows out of the box - though you might
just cut it off using overflow: hidden.
>> I think the only option to solve this specific problem would be a
>> table.
Oh no. If you insist, you could use a simple table instead of the class
"prod" div... then you could even dispense with CSS (as you can say
align="left" to a table to make tables float left).
--
Yucca, http://www.cs.tut.fi/~jkorpela/
shapper
> Jukka K. Korpela wrote:
> Anyway, what he needs is something simple like
>
> <div class="prod">
> <img ...>
> <div>caption</div>
> <a href="...">...</a>
> </div>
I saw this markup on the page you suggested me before but why not
<p>caption</p>?
I can still use CSS on it but is more appropriated or not?
>
> used the way I suggested before, and internally formatted e.g. with
>
> .prod { width: 200px; height: 200px; margin-right: 8px; margin-bottom:
> 8px; }
> .prod { background: #0ff; color: #000; text-align: center; }
> .prod img { width: 120px; height: 120px; margin-top: 8px; }
>
> Naturally, the caption texts and the formatting should be designed so that
> the texts fit. Otherwise the texts flows out of the box - though you might
> just cut it off using overflow: hidden.
That is one of the problems.
I will not be able to fit the caption.
The caption is a product name that can fill more than one line. I am
not able to control it.
And I need to, when a caption fills more than one line, to push the
entire row down.
I need to follow these two requirements ...
... The background color on each product "cell" I can discard but I
would not like to.
So this said as far as I was able to code I think table is the only
solution or not?
Jukka K. Korpela
> I saw this markup on the page you suggested me before but why not
> <p>caption</p>?
Is a caption a paragraph?
> The caption is a product name that can fill more than one line. I am
> not able to control it.
Then you should design the box layout and size so that any reasonable
caption fits (and let unreasonable captions get truncated).
> And I need to, when a caption fills more than one line, to push the
> entire row down.
The appearance will look more or less crappy if the heights of the boxes
vary.
> I need to follow these two requirements ...
> ... The background color on each product "cell" I can discard but I
> would not like to.
What makes you think you could not use background in any approach?
> So this said as far as I was able to code I think table is the only
> solution or not?
If you really want the crappy behavior with box heights varying by caption
text length, then yes, you would in practice need an HTML table (the table
properties in CSS are poorly supported and would not make the situation much
easier).
--
Yucca, http://www.cs.tut.fi/~jkorpela/
shapper
> Then you should design the box layout and size so that any reasonable
> caption fits (and let unreasonable captions get truncated).
And what about creating a div container for each row:
http://www.flyondreams.pt/Beta/Gallery2.htm
For me it satisfies what I described ... almost
I have only one problem with this:
The "Some Text" at the end does not goes down the Gallery div.
Probably this has something to do with the floats but I am not able to
solve it.
>
> What makes you think you could not use background in any approach?
>
My tries ... :-) ... And margins and padings ... But I will give it a
new try when I solve this float problem.
Jukka K. Korpela
> On Jul 8, 5:50 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>> Then you should design the box layout and size so that any reasonable
>> caption fits (and let unreasonable captions get truncated).
>
> And what about creating a div container for each row:
> http://www.flyondreams.pt/Beta/Gallery2.htm
I don't see how the containers help. They surely create something row-like,
but in a rigid manner, not letting the gallery adapt to the available width.
> The "Some Text" at the end does not goes down the Gallery div.
> Probably this has something to do with the floats but I am not able to
> solve it.
It surely depends on the floating. Whatever appears after left-floated
elements will appear on the right of them if there is space there. To
prevent this, use <br clear="all"> (or just <br clear="left">) before the
text or its CSS equivalent, e.g.
<div style="clear: both">Some Text</div>
--
Yucca, http://www.cs.tut.fi/~jkorpela/