We help IT Professionals succeed at work.

HTML Code for Table Header Format

kpu8
kpu8 asked
on
281 Views
Last Modified: 2012-05-09
I currently have a standard three column layout webpage and one of the
table headers (the center one) it has been asked that it have on the top of it
the three headers below Wholesale, Clocks, Thermometers as each header has a specific color. See attached image:

However not matter what I do - I can't seem to get the table formatted so that the
Items are formatted the way I want them. What happens is that Clocks takes up all the
available space of the middle header column.

<table width="81%" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="4" width="81%" height="2" bgcolor="red"></td></tr>

<tr>
    <th width="20%" bgcolor="#970b25"><font color="#fafffb" face="Arial"><b>Online CATALOG</b></font></th>
    <th width="15%" bgcolor="#8fa9f5"><font color="#f6ffef" face="Arial"><b>Wholesale</b></font></th>  
    <th width="12%" bgcolor="#89d8ff"><font color="#f6ffef" face="Arial"><b>Clocks</b></font></th>
    <th width="15%" bgcolor="#8fa9f5"><font color="#f6ffef" face="Arial"><b>Thermometers</b></font></th>
    <th width="1%"  bgcolor="#9932CC"><br></td>
    <th width="20%" bgcolor="#f595f9"><font color="#700081" face="Arial"><b>Accessories</b></th>
</tr>
header-exp.gif
Comment
Watch Question

Commented:
Just do  this

1. add colspan=3 to online cataloge header tag <th  colspan=3....>
2. add </tr> after the header thenadd <tr>

I hope that was easy



CERTIFIED EXPERT
Top Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Top Expert 2015

Commented:
Then you can adjust how much space the Online CATALOG and Accessories columns take up. In the html above they are 20% each, but could go to 40%.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
try this. You need colspan in your th tag. The bottom images should be inside td tags.

I've also changed the percentage widths to pixels, so they are easier to control, ie getting the purplu line to always be 1px.

If there's anything else, let me know.

I'm not sure I answered your question though. can you post a picture of what you want it to look like or a link to your site.
<table width="81%" border="0" cellpadding="0" cellspacing="0">
<tr><th  colspan="5 " bgcolor="#970b25"><font color="#fafffb" face="Arial"><b>Online CATALOG</b></font></th></tr>
<tr>
    
    <td width="183" height="30" align="center" bgcolor="#8fa9f5"><font color="#f6ffef" face="Arial"><b>Wholesale</b></font></td>  
    <td width="150" align="center" bgcolor="#89d8ff"><font color="#f6ffef" face="Arial"><b>Clocks</b></font></td> 
    <td width="229" align="center" bgcolor="#8fa9f5"><font color="#f6ffef" face="Arial"><b>Thermometers</b></font></td>
    <td width="1"  bgcolor="#9932CC"></td>
	<td width="219" align="center" bgcolor="#f595f9"><font color="#700081" face="Arial"><b>Accessories</b></font></td>
</tr>
</table>

Open in new window

CERTIFIED EXPERT
Top Expert 2015

Commented:
Amazing! Three different interpretations of the same question. Some clarification please.
table.png

Author

Commented:
Thanks! This is what I was trying to do and couldn't figure out. It was funny that the interpertation was different - sorry about that I tried to explain it and thought to myself this is going to need an image so glad I posted that to help.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
I'm sorry, but the image you posted did not represent the final output in the least. Maybe next time you won't waste as many people's time.
CERTIFIED EXPERT
Top Expert 2015

Commented:
@kozaiwaniec,
The way I read the question, the requirements were for a "standard three column layout webpage" with the center column divided into three more columns. The image posted represented current output, not the desired output.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
How did you know then, that "online Catalog" was one column, the next three the 2nd column, and Accessories the last column?

It's just a rhetorical question. I don't expect you to waste any more time on this.

Just getting very tired of people not explaining what they want.
CERTIFIED EXPERT
Top Expert 2015

Commented:
I don't mind answering.
The "(the center one)..." of a three column layout has "...three headers below Wholesale, Clocks, Thermometers". I admit I had to do a little English translation, but the rhetorical question becomes, how did you come with a solution that had four columns?
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Actually I thought the whole thing was a header for a three column design. And contextually, Online Catalog covered the others. So I totally misunderstood?  But it would have been nice if he had supplied a picture of what he wanted, given that he can't speak english.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
OK, so I haven't been very nice. I'm sorry.

But it's always my intention to help...
CERTIFIED EXPERT
Top Expert 2015

Commented:
Think of EE as the Geek Squad help desk at the Best Buy (sometimes). Just shrug it off and move on to the next customer. You have been a member for just three weeks. Stick around. I've been a member only since February but I could already tell you some stories!
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Cheers

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.