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?
 
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
0
 
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

0
 
David S.Commented:
That sure looks like a layout table to me. There are better ways to create layouts like that.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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.
0
 
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.
0
 
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.