complicated html table

Posted on 2008-11-07
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
    LVL 39

    Expert Comment

    by:Roger Baklund
    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 42

    Expert Comment

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

    Author Comment

    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.
    LVL 39

    Expert Comment

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

    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

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

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
    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.…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    734 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

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now