SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jan 10, 2007, 05:21 #1
- Join Date
- Nov 2005
- Posts
- 496
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How can I stop my <td>'s spreading across my 100% width table?
...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:
Code:<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>
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
-
Jan 10, 2007, 05:50 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<table style="table-layout:fixed; width:100%; background-color:blue;"> <col style="width:80%"> <col style="width:5%" span="2"> <col style="width:10%"> <tbody> <tr> ...
Last edited by AutisticCuckoo; Jan 10, 2007 at 07:28.
Birnam wood is come to Dunsinane
-
Jan 10, 2007, 06:15 #3
- Join Date
- Nov 2005
- Posts
- 496
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jan 10, 2007, 06:22 #4
- Join Date
- Nov 2005
- Posts
- 496
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jan 10, 2007, 07:27 #5
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
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.Birnam wood is come to Dunsinane
-
Jan 11, 2007, 04:31 #6
- Join Date
- Nov 2005
- Posts
- 496
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wow man, that was well informative!
Thank you very much
-
Jan 11, 2007, 13:15 #7
- Join Date
- Jan 2007
- Posts
- 41
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks