How can I stop my <td>'s spreading across my 100% width table?

[littlejim84]

...If that made sense?

Basically, say I've got a header bar in my web app. I want it to go across the screen. On the left I want the page header text, next to that I want some <div> navigation buttons I've made, then on the right hand side of the screen I want a drop list with view options or whatever. Say my code looks like this:

<table style="width: 100%; background-color: blue;">
<tr>
<td>Page Title</td>
<td><div class="button">ADD</div></td>
<td><div class="button">DELETE</div></td>
<td style="text-align: right;"><select><option>Whatever</option></select></td>
</tr>
</table>

When I look at this in the browser, the <td>'s width seem to get spread evenly across the whole width of the table. This is not ideal for me. I basically want the page title text and a couple of <div> buttons to be grouped to the left and the view select thingy on the right. I have tried to put exact pixel widths for the <td>s but that ain't too flexible really (say I want to change the text size later etc.)

Is there a solid way of doing this thing? Should I do away with the <table> altogether? Is there another way of having <div> buttons that can sit happily side by side without having to resort to putting them in separate <td>s?

Thank you for any help on this issue.
Little Jim

[AutisticCuckoo]

<table style="table-layout:fixed; width:100&#37;; background-color:blue;">
  <col style="width:80%">
  <col style="width:5%" span="2">
  <col style="width:10%">
  <tbody>
    <tr> ...

[littlejim84]

Cheers. But could you possibly explain what these new things do exactly? I haven't encountered them before. It's just so I understand what I'm putting into my code. Thanks for the quick reply.

[littlejim84]

Is there anyway of making <td>s fit width wise to what's inside them? So say I had the word INVOICES with a <td>..</td> around it, is there not a CSS command or something that will make that <td>s width fit perfectly around that word? Then have somekind of wildcard width * for the next <td> along that can stretch to the end of the table?

...If that makes sense.

[AutisticCuckoo]

Cheers. But could you possibly explain what these new things do exactly?

The COL element in HTML specifies a table column. HTML tables don't really have a column concept – they consist of rows and cells – but the COL element type allows some rudimentary access to 'columns'.

There aren't many presentational aspects you can control for an entire column, only these:

• border properties (but only if the table has border-collapse:collapse)
• background properties (colour, etc.)
• the width property
• the visibility property

In this example, I set the widths for the four columns. Columns 2 and 3 use the same width, because of the span attribute. Obviously, you need to adapt the actual values.

The table-layout:fixed property for the table makes browsers use an alternate rendering algorithm. Normally, a browser will first read through the entire table to figure out how many columns there will be and how to distribute their widths proportionally to their contents. Then the table is scanned through once more and rendered. This two-phase process can be noticeably slow for a large table.

With the fixed rendering algorithm, only one phase is required. The browser will use the first row (or column specifications) to determine the number of columns and their widths. Then it just needs a single pass through the table to render it.

Is there anyway of making <td>s fit width wise to what's inside them?

Not really. If you don't declare the width for one or more COL elements, their widths will be determined by the browser. With the fixed rendering algorithm, only the cells in the first row of the table are taken into account, which means that you then need to have the widest content in each column in the first row.

If you omit table-layout:fixed and omit the width specification for one or more COL elements, you may get closer to what you are trying to achieve. You won't have full control, but it may be good enough.

[littlejim84]

Wow man, that was well informative!

Thank you very much

[sellerstock]

I believe there are options in html coding to indicate the width of the table in pixels instead of in percentage. The disadvantage would occur when the browser is not opened to full screen. Sometimes you see little instructions somewhere on a website that say This site is best viewed with SuchandThus Browser opened to 100%. I suppose that will work, in its way, but I personally think these little messages are tacky. What I do is test my sites before I upload them in both IE and Firefox.