Smallest Possible <TD> width values

[effendi]

Hi everyone

Sorry to ask such a simple question. I created a table with 18 columns-
16 of which represent weeks starting from 1 to 16. In each cell I have
a field which takes either a Null value or and "X". Since I only have
at most one (1)character, I would like to make the td with as small as
possible. I have placed width="5px" but it does seem to work. Can
anyone suggest how I can make the cell smaller?

Thanks

[Chris Morris]

ef*****@epitome.com.sg writes:

Sorry to ask such a simple question. I created a table with 18 columns-
16 of which represent weeks starting from 1 to 16. In each cell I have
a field which takes either a Null value or and "X". Since I only have
at most one (1)character, I would like to make the td with as small as
possible. I have placed width="5px" but it does seem to work. Can
anyone suggest how I can make the cell smaller?

1) You mean width="5" or style="width: 5px;" for something that will
do something.

2) Actually, neither of those does what you actually want, which is
for the table cell to shrink as small as possible while still
containing the data. If someone's using a large font, then 5px
won't be anything like enough room to contain the 'X'.

3) Fortunately, *provided* that there's nothing else in the table (for
example, a width attribute on the <table> tag) to make it wider,
columns only take up the minimum space needed.

So, the following should work.
<table>
....
<tr>...<td>X</td><td>X</td><td></td>...</tr>
....
</table>

Can you post the URL of the page the table is on?

--
Chris

[RobG]

ef*****@epitome.com.sg wrote:

Hi everyone

Sorry to ask such a simple question. I created a table with 18 columns-
16 of which represent weeks starting from 1 to 16. In each cell I have
a field which takes either a Null value or and "X". Since I only have
at most one (1)character, I would like to make the td with as small as
possible. I have placed width="5px" but it does seem to work. Can
anyone suggest how I can make the cell smaller?

Depends on what 'works' means. Set the width to 1em and center
align the text. If the numbers get bigger, you may need to use 2en or
similar:

<style type="text/css">
td {border: 1px solid blue; width: 1em; text-align:center;}
</style>

<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
<td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
</tr>
<tr>
<td>x</td><td>&nbsp;</td><td>x</td><td>x</td><td>x</td><td>x</td>
<td>&nbsp;</td><td>x</td><td>x</td><td>&nbsp;</td><td>x</td>
<td>x</td><td>&nbsp;</td><td>x</td><td>&nbsp;</td><td>x</td>
</tr>
</table>

--
Rob

[Steve Pugh]

ef*****@epitome.com.sg wrote:

Sorry to ask such a simple question. I created a table with 18 columns-
16 of which represent weeks starting from 1 to 16. In each cell I have
a field which takes either a Null value or and "X". Since I only have
at most one (1)character, I would like to make the td with as small as
possible.
That will happen automatically, unless you've specified a width for
the overall table that is smaller than the width of the sum of the
cells.
I have placed width="5px" but it does seem to work.
Is that meant to be HTML or CSS?

In HTML you would use width="5" and in CSS you would use width: 5px;.
In both cases the widths will be ignored if (a) the cells need to be
wider because the contents are wider or (b) the table has a width set
that means that the cells must be wider in order to add up to the
table width.
Can anyone suggest how I can make the cell smaller?

Stop trying. Unless you do something to stop them tables normally
shrink to the smallest possible size. If you still have problems post
the URL so we can see if anything else on the page is interfering.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[c.thornquist]

<ef*****@epitome.com.sg> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...

Hi everyone

Sorry to ask such a simple question. I created a table with 18 columns-
16 of which represent weeks starting from 1 to 16. In each cell I have
a field which takes either a Null value or and "X". Since I only have
at most one (1)character, I would like to make the td with as small as
possible. I have placed width="5px" but it does seem to work. Can
anyone suggest how I can make the cell smaller?

Thanks

Do not use the width attribute at all for a <td>. The cell will shrink to
the size of the "X". But if your two digit numbers for the weeks are in
that same table, then you won't have just one character per cell.

IE does something weird, though. Your closing TD tag must be on the same
line as the opening TD tag. If it is moved down a line or so, it makes the
height larger than what you want. Not always, though. It's a quirk of IE, I
believe. I've read about it several times on developer's websites.

Also, a cell containing a transparent .gif can make it shrink even more.
I've had TD colspans set to null in which I couldn't get them to shrink
below what appeared to be 10 pixels in height. But after placing a
transparent gif set to the height I wanted, say 5-7 pixels, in the cell, the
colspan shrunk in height.

When you set your table border to "1", is the border close to your "X" on
all sides? It should be. I assume you have cellpadding & cellspacing set to
zero.

Carla

[Jukka K. Korpela]

Chris Morris <c.********@durham.ac.uk> wrote:

1) You mean width="5" or style="width: 5px;" for something that
will do something.
Those are the syntactically correct ways, but in practice browsers will
eat width="5px" (they basically ignore what comes after the number).
2) Actually, neither of those does what you actually want, which is
for the table cell to shrink as small as possible while still
containing the data. If someone's using a large font, then 5px
won't be anything like enough room to contain the 'X'.
There would be problems even with small fonts, since 5px is really
small.
3) Fortunately, *provided* that there's nothing else in the table
(for
example, a width attribute on the <table> tag) to make it wider,
columns only take up the minimum space needed.

Yes, but that includes cell padding, which is nonzero by default, and
by default there's also spacing between cells. You can use
<table cellpadding="0" cellspacing="0">
but it's actually easier to use CSS, where you could also set padding
for cells as you like (e.g., top and bottom padding but no horizontal
padding). E.g.

table { border-collapse: collapse; }
td { padding: 0; /* or e.g. padding: 2px 0; */ }

Then there's the question how accessible the table is. How would it
work in speech synthesis?

(And there's also the question whether "X" or "x" is really a suitable
character. You don't really mean the letter of the Latin alphabet but
an x-like mark, which could perhaps be identified with U+2717 BALLOT X.
However, using &#x2717; is probably not a feasible option at present,
since few fonts contain it.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[effendi]

Jukka K. Korpela wrote:

Chris Morris <c.********@durham.ac.uk> wrote:

1) You mean width="5" or style="width: 5px;" for something that
will do something.
Those are the syntactically correct ways, but in practice browsers

will eat width="5px" (they basically ignore what comes after the number).

2) Actually, neither of those does what you actually want, which is
for the table cell to shrink as small as possible while still
containing the data. If someone's using a large font, then 5px
won't be anything like enough room to contain the 'X'.
There would be problems even with small fonts, since 5px is really
small.

3) Fortunately, *provided* that there's nothing else in the table
(for
example, a width attribute on the <table> tag) to make it wider,
columns only take up the minimum space needed.

Yes, but that includes cell padding, which is nonzero by default, and

by default there's also spacing between cells. You can use
<table cellpadding="0" cellspacing="0">
but it's actually easier to use CSS, where you could also set padding for cells as you like (e.g., top and bottom padding but no horizontal padding). E.g.

table { border-collapse: collapse; }
td { padding: 0; /* or e.g. padding: 2px 0; */ }

Then there's the question how accessible the table is. How would it
work in speech synthesis?

(And there's also the question whether "X" or "x" is really a suitable character. You don't really mean the letter of the Latin alphabet but an x-like mark, which could perhaps be identified with U+2717 BALLOT X. However, using &#x2717; is probably not a feasible option at present,
since few fonts contain it.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Thanks every one. My table actually need to have a width of 770. I want
my first two columns to be 200 and the other 16 to take the rest
evenly. I removed all td width attributes and so far is seems to take
up more space 770 horizontally.

I will try a few other variation.

[Jukka K. Korpela]

ef*****@epitome.com.sg wrote:

Thanks every one.
Please learn to trim quotations if you need further help some day.
My table actually need to have a width of 770.
No it doesn't. You have wrong design, and _you_ try to force the width
to 770 (thereby virtually guaranteeing that printing the page will
result in frustration, among other things).
I want my first two columns to be 200 and the other 16 to take the
rest evenly. I removed all td width attributes and so far is seems
to take up more space 770 horizontally.
This does not parse. Do you mean _more than_ 770 (pixels)?
I will try a few other variation.

You might need to redesign the page. Or maybe _design_ it for the first
time, since this sounds you are just randomly trying different things.
Sorry, can't give more details in the absence of any info on what you
are really trying to achiee.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[effendi]

Jukka K. Korpela wrote:

ef*****@epitome.com.sg wrote:

Thanks every one.
Please learn to trim quotations if you need further help some day.

My table actually need to have a width of 770.

No it doesn't. You have wrong design, and _you_ try to force the

width to 770 (thereby virtually guaranteeing that printing the page will
result in frustration, among other things).

I want my first two columns to be 200 and the other 16 to take the
rest evenly. I removed all td width attributes and so far is seems
to take up more space 770 horizontally.
This does not parse. Do you mean _more than_ 770 (pixels)?

I will try a few other variation.

You might need to redesign the page. Or maybe _design_ it for the

first time, since this sounds you are just randomly trying different things. Sorry, can't give more details in the absence of any info on what you are really trying to achiee.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Thanks everyone. I solved it.

This is what I did. I set the table width to be 770.
on the first row. I merged the first two columns, and merged the other
sixteen columns.

In the properties of the first merged column, I set the width property
to be "350" (width="350"). In the properties of the second column, I
set width="100%".

What this does is it ensured the first 2 columns take up 350 px and the
rest 520 pixels is spread evenly among the 16 columns. This made the
column as small as it needed to be. If I wanted it smaller. I just make
the width of the first two columns wider.