www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: Need help on Tables

  1. #1
    Join Date
    Apr 2003
    Location
    ct
    Posts
    5

    Unhappy Need help on Tables

    hello can someone help me please? I'm building a website and I want to know if one can use tables instead of frames? how is it possible (using tables) to make the links in the "left menu" "left row or cell" to load into the "right row or cell" and also how to make commands inside the table? like I put <.center> and it didn't work..of course w/o the .
    and last but not least Is it true that tables are better to navigate with then frames?
    I would really appreciate some answers
    THANK YOU

  2. #2
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    Hi mararies5...

    Since I'm a new CSS convert (still learning), I'm trying to pass along alternatives to Frame, Table, and Javascript menus whenever I see someone ask about them.

    Below is a sample (very alterable) of a "mouseover-like" menu that is compact and simple.

    The <style> below can be cut from the code and placed in a linked external CSS file (and referenced on every page - which is only 1 line of code), while the <div> can be unifromly positioned on every page in your site.

    Just put the CSS link and <div> on every page - along with each page's content - and you will be free from the madness of Frames, Tables, and Javascript generated menus.

    Even if you don't use this.... please don't use Frames! (the worst!).

    all about the <style>...
    k


    <html>
    <head>
    <style type="text/css">
    div#navMenu {
    width: 25%;
    background-color: #336699;
    color: #000000;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    border: none;
    }
    div#navMenu a {
    display: block;
    background-color: transparent;
    border: 1px solid #000000;
    color: #000000;
    font-family: tahoma, verdana, arial, sans-serif;
    font-size: 75%;
    text-decoration: none;
    text-align: left;
    padding: 4px 4px 4px 4px;
    }
    div#navMenu a:hover {
    border: 1px solid #000000;
    color: #ffffff;
    background-color: transparent;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <div id="navMenu">
    <a href="home.htm">Home</a>
    <a href="east.htm">East</a>
    <a href="west.htm">West</a>
    <a href="north.htm">North</a>
    <a href="south.htm">South</a>
    <a href="limbo.htm">Limbo</a>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    If you want to use tables you will be using nested tables probably with like
    Code:
    <table>
    <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    </tr>
    </table>
    and that will palce a table with three columns on your site andthen you can put more tables inside of each cell but DONT. I dont reccomend that because now everything is moving to css. I used to be big on tables myself but I dont think I will use them for layout anymore because they are a thing of the past and are not very professional.

  4. #4
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    hey peo....

    you feeling ok?

    k

  5. #5
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    Well all of you guys have been bombarding me with css-ism that I think I am starting to see how affective it can be,.I have not used it yet for layout ( I have not started any sites for a long time) but I would like to get some css practice for layout because I already use it for just about everything else. I mean I use it on links scroll bars borders etc.

  6. #6
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    so peo...

    check-out the menu and tell me what you think (i didn't write it... but i did modify/enhance it over the paste few weeks).

    do you know how to position <div> tags and refer to external CSS files yet?

    let me know.
    k

  7. #7
    Join Date
    Nov 2002
    Posts
    2,632
    "padding: 4px 4px 4px 4px;"

    Hey khaki, I was looking through you code and saw that line. You can just use "padding: 4px;" and the 4px padding will be used on all sides. I also don't know why you used "background-color: transparent;" See if it makes a difference with it taken out in both of the places you have it. I haven't really used transparent yet, so I might not be the best to point it out either.

  8. #8
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by spufi
    I also don't know why you used "background-color: transparent;"
    Probably bec CSS validator gives warning msg if you specify a color but not a background (or vice verca).

    margin-left: 1%;
    margin-right: 1%;

    can be replaced by
    margin: 0 1%

    #336699 may be replaced by #369

    Also, you shud use a proper doctype.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    In case you dont want to have your contents flow below your navigation float, you can specify margin-left: 27% for your body.

  9. #9
    Join Date
    Nov 2002
    Posts
    2,632
    Ah, I tend to ignore the warnings and just get rid of the errors. Granted I haven't needed to valid my CSS in awhile and it was probably before I even knew about using "transparent."

    color: #000000;
    color: #ffffff;

    Can be shortened to...

    color: #000;
    color: #fff;

  10. #10
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    I've got a few points so:

    1) Aaaaaaaarggggh, my entire site is made out of tables in tables in tables!!!

    2) What's wrong with tables.

    3) What the hell does it matter if you don't have <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> at the start of your page?
    Every fight is a food fight when you’re a cannibal.

  11. #11
    Join Date
    Nov 2002
    Posts
    2,632
    1. Ah, the sound of a person who uses nested tables.

    2. Tables are good for what they are intended for which is tabular data. Tables for layout is bad. Why? Because they lead to things like nested tables. Tables screw over browsers for people with disabilities. Tables were used before CSS came along and made life a whole lot easier. As an example, create a large website without using CSS for layout. Now, go and change around your website even a little bit, ie background colors, link colors, the position of your menu. Was that a pain? You bet it was. Now create the same site using CSS and then make the same changes. If done correctly, all you have to do is change your external CSS file and you are done. This is what is meant by seperating style from content, and it makes your web page code a whole lot easier to weed through.

    3. Adding the DOCTYPE tells the browser what version of HTML/XHTML you are using so it knows how to understand your code. What happens if you leave it out? Your browser then goes, "this person doesn't know what they are doing so I am going to assume certain things." This also means that it may try to read your code based on older versions of HTML than what you are using. Putting it another way. Let's say I code in a programming language like Java. I create some variables, but don't initialize them. Does this mean my program won't work? No, but there is a chance that something funky might happen, hence it's always good it initialize variables and it's always a good thing to add a DOCTYPE. Plus, you can't validate your page against W3C standards without one.

    4. I figure I'll handle the validation question before you ask it. Why do it? Because it is what the web is moving towards and not away from. It helps teach you proper coding. It also make a browser's life easier. Plus, it helps in creating fewer cross browser issues.

  12. #12
    Join Date
    Feb 2003
    Location
    Honolulu, Hawaii
    Posts
    200
    Originally posted by khaki
    Hi mararies5...

    Since I'm a new CSS convert (still learning), I'm trying to pass along alternatives to Frame, Table, and Javascript menus whenever I see someone ask about them.

    Below is a sample (very alterable) of a "mouseover-like" menu that is compact and simple.
    [/SIZE]
    Here's a better non-javascript menu that changes colors of both text link and cell background:

    <html>
    <head>
    <style type="text/css">
    <!--
    table{width:104px;}
    table,td{border:2px solid black;border-collapse:collapse;padding:0;}
    td{line-height:25px;vertical-align:50%;text-align:center;}
    a{color:blue;background-color:white;text-decoration:none;display:block;width:100px;height:25px;}
    a:hover{color:red;background-color:yellow;text-decoration:none;}
    -->
    </style>
    </head>

    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

    <table border="0">
    <tr>
    <th align="center" bgcolor="silver"><p>MENU</th>
    </tr>
    <tr>
    <td><p><a href="#" id="one">Link One</a></td>
    </tr>
    <tr>
    <td><p><a href="#" id="two">Link Two</a></td>
    </tr>
    <tr>
    <td><p><a href="#" id="thr">Link Three</a></td>
    </tr>
    <tr>
    <td><p><a href="#" id="fou">Link Four</a></td>
    </tr>
    <tr>
    <td><p><a href="#" id="fiv">Link Five</a></td>
    </tr>
    </table>
    </body>
    </html>

  13. #13
    Join Date
    Apr 2003
    Location
    ct
    Posts
    5
    but i really want to know is HOW TO GET THE LINKS ON THE LEFT SIDE OF THE MENU TO WORK...TO LOAD ON THE RIGHT SIDE OF THE PAGE?? HOW CAN I DO THAT..THESE ARE JUST MENUS AND CELLS .STYLES AND STUFF I WANT TO KNOW HOW TO MAKE THE LINKS IN THE MENU WORK...SO THEY CAN LOAD ON THE RIGHT SIDE ..OR THE MAIN PAGE?? HOW DO i DO THAT?

  14. #14
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    I WANT TO KNOW HOW TO MAKE THE LINKS IN THE MENU WORK...SO THEY CAN LOAD ON THE RIGHT SIDE ..OR THE MAIN PAGE?
    The reply was already posted
    Dave Clark
    Strictly speaking... You cannot have true navigation that loads in a table cell. Only objects that have a location object can be the recipient of navigation results. On the other hand, via JavaScript, you can usually simulate navigation that would output into a table cell. However, if you do that, your page will not work at all in browsers that either do not support JavaScript or the visitor has purposely disabled JavaScript execution for one reason or another.

    One possible non-JavaScript solution is to have an IFRAME in a table cell to receive the navigation results.

    Dave
    Other people's replies give you a way to have navigation links on the same page as you contents. Of course you will have to make changes to all pages on your website to include this.

    For example, if you had a webpage (mypage.html)
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
    </html>

    and navigation page (body of which is
    <p><a href="...">Link 1</a></p>
    <p><a href="...">Link 2</a></p>
    <p><a href="...">Link 3</a></p>

    Your new "mypage.html" should read
    Code:
    <html>
    <head>
        ...
    </head>
    <body style="margin-left: 150px">
        ...
        <div style="position: absolute; top:0; left:0; width: 140px; padding: 5px;">
            <p><a href="...">Link 1</a></p>
            <p><a href="...">Link 2</a></p>
            <p><a href="...">Link 3</a></p>
        </div>
    </body>
    </html>
    (where ... represent contents of original "mypage.html"

  15. #15
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    starrwriter wrote: Here's a better non-javascript menu that changes colors of both text link and cell background
    actually... it's not better.... because it relies on tables for laying-out navigational links.

    The example I provided (with it's missing elements... i know... i know... it was stripped-down for space considerations. sorry. but thanks for clarifying all of the ommitted/messy stuff nkaisare and spufi!)...

    Anyway, that solution can have the background change as well.
    Just change:
    background-color: transparent;
    to
    background-color: green;

    Like I originally said... this is "very alterable".
    (and does not rely on tables!)

    As to mararies5's concern about how this doesn't change the right side of the page:

    If you don't use Frames pages (and you really shouldn't), then you have the options of using iframes or putting this very compact and small menu on every page (which will always mean that it will require the creation of at least one less page than if you had used Frames in the first place).

    Personally, I'd suggest placing the <style> in an external file, write specific <div> coordinates for the menu, and just place it on every page along with each page's unique content.
    OR...
    If you have ASP capabiltity, just stick it all in one include file and reference it with just one line on every page:
    <!-- #include file="entireMenu.inc" -->
    and any changes that need to be made to the menu and/or style (site-wide!) can be done from the single include file.

    That's one opinion (and how I have been writing (and re-writing) my pages to-date).

    okay... enough said on that ...
    k

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles