complicated html table

Posted on 2008-11-07
Medium Priority
Last Modified: 2012-05-05
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.
Question by:lpetrowicz
  • 3
  • 2
LVL 39

Expert Comment

by:Roger Baklund
ID: 22910127
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>N</td><td rowspan="7" colspan="6">U</td></tr>
<tr><td colspan="7">V</td></tr>
<tr><td colspan="9">D</td></tr>

Open in new window

LVL 43

Expert Comment

by:David S.
ID: 22910134
That sure looks like a layout table to me. There are better ways to create layouts like that.

Author Comment

ID: 22910249
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.

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

LVL 39

Expert Comment

by:Roger Baklund
ID: 22910492
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 {

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">

with css like this:

ul.menu li {

The cells N-T would be a secondary menu:

<ul class="submenu">

with css like this:

.submenu {

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.

Author Comment

ID: 22910771
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.
LVL 39

Accepted Solution

Roger Baklund earned 2000 total points
ID: 22912058
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 {

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 {

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 {

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:


You should probably start here:


Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question