• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

how to center table heading

 
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
My page was too long to use the background image in body tag without it tiling. so i put it in table tag. I wanted the heading to have the background so I put it in a <th>. However I cant seem to center it on the page. <center> doesnt work, even with <th width="100%"> or <th colspan="4">
<th align="center"> didnt work either.

I should probably just stretch the image and put it in body tag, but I would still like to know how to center a table heading.
[This message has been edited by Randall Twede (edited March 12, 2001).]
 
Ranch Hand
Posts: 1070
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Personally, I never use a th tag. I don't feel I gain much and would just rather stick with a td tag. If I need to highlight it, I'll bold it, make it bigger, etc...
However, one thing I want to point out, when you use a background image for a table, in Netscape the image will repeat for every new cell. I also tried it where I had one table with only one cell. In that table, I had the background image. Then I had another table in that one cell that did all my work. However, it still repeated every cell.
Also, I ran into problems when I tried to strecth the image because of people running on differnt screen sizes. However, for the design that my art department used, I had to use a background image. The solution I came up with was to have the bottom and the right bleed into just one color so the last few pixels were one color. That made it so the file size wasn't too big. Then I had a table with no margins, width 100%, the background the same color as what the image bled into, and made sure there was nothing after the table. Then it all seemed seamless. But I did say something to art so they wouldn't do that again.
Bill
[This message has been edited by bill bozeman (edited March 12, 2001).]
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I didnt know that about Netscape. This is the first time I tried putting it in table tag. I ended up making the image 10% bigger(its now about 1000X400) and put it in body tag. It looks good at 800X600(my main audience I believe).
[This message has been edited by Randall Twede (edited March 12, 2001).]
 
Sheriff
Posts: 7001
6
Eclipse IDE Python C++ Debian Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There are several problems with the HTML example you give above. The first is that you don't seem to end all your tags. For multi-browser compatibility it is vital that all tags are both started and ended properly. The second is that your "th" is not inside a "tr", so it won't even get placed in the table. What you probably saw was your heading text appearing before the table (if you turn on borders by adding border='1' to your table definition, you should see this more clearly). Third, the <center> tag should always be placed either fully outside the table (in which case it will affect the placement of the table) or inside a <th> or <td> tag (in which case it will affect the placement of the content of that tag) - a better way is to use the 'align' attributes, though.
I'm also puzzled that you have four columns, each with a width of 10%. This does not add up to 100%, so what you actually get is up to the browser. If you are going to specify column widths, make sure they add up to 100%.
As a solution, try this:
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
As I said, I ended up making the image larger and put it in the body tag. I was then able to make the heading seperate from the table. However I tried putting center tag inside the th tag and that didnt work either. I tried using align attribute. I tried colspan=4 nothing worked. I didnt realize th should be inside tr, however it worked anyway in IE as the heading had the background behind it. It is not that important now, I just think there must be a way to center a table heading. You are correct about 10% should be 25% though. Surprisingly that worked right anyway also in IE. I did close all my tags, I just didnt list all the code(the table has many rows).
<tr colspan='4'><th align="center"><h2>Characters</th></tr>
might work
[This message has been edited by Randall Twede (edited March 14, 2001).]
 
bill bozeman
Ranch Hand
Posts: 1070
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just one other note, the colspan should be on the td or th tag, not the tr tag. I only put two things in a tr tag, bgcolor or background, and I rarely put either of those. Personally I like my tr's to have no attributes and have my all attributes in the th or td tag.
Bill
 
Frank Carver
Sheriff
Posts: 7001
6
Eclipse IDE Python C++ Debian Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Oops, sorry. Serves me right for not testing it properly.
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
oh well if it ever comes up again I'll worry about it then. I did learn something from both of you though so it was worth the time. thanks
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic