complicated html table

I have ttached a picture of the complex table I am trying to make in html.  Any assistance with the code would be immensely helpful.  Thank you in advance.
table.jpg
lpetrowiczAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Roger BaklundCommented:
Use rowspan and colspan to achieve this:
<table border="1">
<tr><td colspan="9">A</td></tr>
<tr><td rowspan="11">B</td><td colspan="7">E</td><td rowspan="11">C</td></tr>
<tr><td colspan="7">F</td></tr>
<tr><td>G</td><td>H</td><td>I</td><td>J</td><td>K</td><td>L</td><td>M</td></tr>
<tr><td>N</td><td rowspan="7" colspan="6">U</td></tr>
<tr><td>O</td></tr>
<tr><td>P</td></tr>
<tr><td>Q</td></tr>
<tr><td>R</td></tr>
<tr><td>S</td></tr>
<tr><td>T</td></tr>
<tr><td colspan="7">V</td></tr>
<tr><td colspan="9">D</td></tr>
</table>

Open in new window

David S.Commented:
That sure looks like a layout table to me. There are better ways to create layouts like that.
lpetrowiczAuthor Commented:
it's definitely a layout table.  I designed a website image in corel.  Now I need to figure out how to make it a webpage with links and all I know to do is to build a table and then break the photo down and create several different photos from it and place them into table and put back the puzzle.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Roger BaklundCommented:
ok... that is not the best way to do it. That is how it was done in the nineties. Now we use css.

There are several problems using tables for this. It is hard to maintain, but more importantly, it messes up the order of your content. When non-visual user agents (browsers for blind people, but also content spiders from google and others) try to read this, stuff is out of order. In this particular case, the topmenu is followed by the N menu item, then comes all the page content, then comes the rest of the submenu O-T.

Using css, you can define different "sections" and use margins and paddings, for example the table cells A, B, C and D can be replaced by this css rule:

body {
  padding:1em;
}

Then the E and F would be coded in html as

<div id="E">E content here</div>
<div id="F">F content here</div>

...and  css rules like this:

#E {
  height: 4em;
}
#F {
  height: 1em;
}

H-M is probably a menu, it should be coded like this:

<ul class="menu">
  <li>H</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
</ul>

with css like this:

ul.menu li {
  display:inline;
}

The cells N-T would be a secondary menu:

<ul class="submenu">
  <li>N</li>
  <li>O</li>
  <li>P</li>
  <li>Q</li>
  <li>R</li>
  <li>S</li>
  <li>T</li>
</ul>

with css like this:

.submenu {
  float:left
}

You don't need to cut up the image, you can put it in the background, also using css:

.menu {
  background: url(images/menubackground.gif) no-repeat top;
}

It might be a bit hard to get started, but it is much easier to maintain when you need to insert a new menu item or similar later.
lpetrowiczAuthor Commented:
I appreciate the assistance with this.  Is there a way I could get you to help me with this a little bit.  What I understand of CSS is that you write a CSS page that contains the margins and paddings and then it's placed in the index page as part of the code.  I have no idea where the code above would be placed.
Roger BaklundCommented:
Ok, I will give you a css crash course...

There are three different places where the css code is put, often all three places are used in combination.

1) In an external file
2) In a style element in the head part of the html document
3) In style attributes within the html

The first is used for "site-wide" css rules. The file is included into every page on the site with a link element in the head part of the html:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

When one particular page needs something special, you can use a style element in the head of that html page.

<style type="text/css">
a {
  color:red;
  background-color:white;
}
</style>

If the file style.css contains a rule about links having a blue color, you could use the above in the head part of a html page to make all links (A elements) on that page red. You would use this in combination: first include the site-wide rules with the LINK element, then override this particular rule with the STYLE element.

If one particular link on that page should be green, you could use a style attribute for that. It is placed within the relevant html element, like this:

<a href="contact.html" style="color:green;background-color:white;" >Contact</a>

You can have all of these on the same page at the same time, there is no conflict. If there is no style="" attribute, the rules within <style></style> in the head part of the document will be used, and if there is no rule there either, it will use the rule from the external file.

There is also three types of selectors, identifying three different targets for the rules:

1) Element level rules
2) Class level rules
3) Individual rules

The element level rules are written like this:

element {rules}

The class level rules are written like this:

.class {rules}

The individual rules are written like this:

#identifier {rules}

The element level rules applies to all elements of that type. The link rule above was an example, it applies to all A elements, i.e. all links.

My previous post also had examples of the class selector:

.submenu {
  float:left;
}

This means all elements with class="submenu" will have the rule "float:left".

There was also an example of individual rules:

#E {
  height: 4em;
}

This means the element (only one!) with id="E" will have this rule applied. You can not have the same id value for multiple elements, only one. If you need more, use a class.

You can also identify more specific targets for the rules by combining selectors:

ul.menu li {
  display:inline;
}

This means the LI element within the UL element with class="menu" should have this rule. Other LI elements within other UL elements without class="menu" wil *not* get this rule.

You can also list multiple targets, separating with a comma:

ul.menu li, ul.submenu li { color: white; background-color: #33cc66; }

This means the LI elements within both the .menu and the .submenu should have this background color.

Whitespace is not significant, you can have all rules on a single line if you like, but it is easier to read when you put in some spaces and linefeeds:

ul.menu li,
ul.submenu li {
  color: white;
  background-color: #33cc66;
}

There are many rules that can be specified, I have just used some basic rules in these examples. The full specification can be found here:

http://www.w3.org/TR/CSS21/

You should probably start here:

http://www.w3.org/TR/CSS21/intro.html#html-tutorial

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.