www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Table Inline Help

Hybrid View

  1. #1
    Join Date
    Aug 2011
    Posts
    3

    resolved [RESOLVED] Table Inline Help

    Hello all, first time here.

    I am looking for help with my tables.

    I have 12 seperate tables, and they all currently display one after the other. What I am asking, is how to I make these inline, or so that they display one next to eachother horizontally, instead of vertically. Thanks!

    Code:

    <table display="inline" align="float: left" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>


    <table cellpadding="0" cellspacing="0" border="0" width="34%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>


    <table align="float: right" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>

    <table align="float: left" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>



    <table align="float: center" cellpadding="0" cellspacing="0" border="0" width="34%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>

    <table align="float: right" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>


    <table align="float: left" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>

    <table align = "float: center" cellpadding="0" cellspacing="0" border="0" width="34%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>




    <table align="float: right" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>

    <table align="float: left" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>


    <table align="float: center" cellpadding="0" cellspacing="0" border="0" width="34%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>

    <table align="float: right" cellpadding="0" cellspacing="0" border="0" width="33%">

    <tr>

    <td width="70%"><a href="ITEMTITLELINK" text-decoration: none><font color="FFF7F00" size="1"><strong>Title of Product</strong></font></a>

    <br>

    <a href="IMAGEPAGELINK"><img src="IMAGELOCATION" align = "left" border="0" height="90" width="90" ></a>

    <br>

    <font color="black" size="1">&nbsp;Info Text Line 1</font><br><br>
    <font color="black" size="1">&nbsp;Info Text Line 2</font>

    </td>

    <td align="right" width="30%">

    <p align="right"><font color="FFF7F00" size="1">ITEMCOST</font></p>

    <br><br><br>

    <p align="right"><font color="black" size="1">SHIPPINGCOST</font></p>

    </td>

    </tr>

    </table>

  2. #2
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    Hello Tristian,

    It is clear that you're a newbie, because the code that you're writing is hopelessly outdated - and invalid. I would be surprised if you would get a single table with content rendered and functioning the way you want it to. I would advise you to first learn how to write proper html and css before you start making a site, through e.g. http://w3schools.com and http://htmldog.com.

    There you will learn that what you want is very simple:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    table { 
        width: 100px;
        height: 100px;
        background: yellow;
        border: 1px solid black;
        float: left;
        margin-right: 10px;
    }
    </style>
    </head>
    <body>
    <table summary="">
        <tr>
            <td>1</td>
        </tr>
    </table>
    <table summary="">
        <tr>
            <td>2</td>
        </tr>
    </table>
    </body>
    </html>
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  3. #3
    Join Date
    Aug 2011
    Posts
    3

    Fixed the problem.

    Not sure what you mean by outdated, it still works fine, and looks fine for that matter.

    All I had to do was put 3 cell blocks into a table, and then align all the cell blocks left. Simple enough... apologies for wasting your time.

  4. #4
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    Not sure what you mean by outdated, it still works fine, and looks fine for that matter.
    Suite yourself.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  5. #5
    Join Date
    Aug 2011
    Posts
    3

    Help

    Well, if you could be at all any help to me. How would you do it.

    What are the downsides of using tables? How would you do it?

    I test to make sure everything looks and works fine in the following browsers:

    IE
    Chrome
    Chromium
    Firefox

    Is there a simpler way to get it to work, and also, how would I go about setting up a database so I can then implement a search bar? What would be the best way to go about that?

  6. #6
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    How would you do it?
    Like this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .itemDataTable { 
        float: left;
        width: 400px;
        height: 110px;
        border-collapse: collapse;
        font: normal .6em Arial;
        }
    td p { 
        margin-top: 1em; /* to prevent browser differences */
        }
    td.imageCell { 
        width: 95px;
        }
    .imageCell a { 
        color: red;
        text-decoration: none;
        }    
    .imageCell img { 
        width: 90px;
        height: 90px;
        border: 0;
        }         
    td.infoTextCell { 
        vertical-align: top;  
        } 
    p.infoText { 
        margin-top: 30px;
        }
    td.costsCell { 
        text-align: right;
        vertical-align: top;
        }
    p.itemCost { 
        color: red;
        } 
    p.shippingCost { 
        margin-top: 70px;
        }             
    div.clearingDiv { 
        clear: both;
        }              
    </style>
    </head>
    <body>
    
    <table class="itemDataTable" summary="item data table">
        <tr>
            <td class="imageCell">
                <a href="#" class="productTitle">Title Of Product</a><br />
                <a href="#"><img src="path-to-image.gif" alt="" /></a>   
            </td>
            <td class="infoTextCell">
                <p class="infoText">Info Text Line 1</p>
                <p class="infoText">Info Text Line 2</p>
            </td>
            <td class="costsCell">
                <p class="itemCost">ITEMCOST</p>
                <p class="shippingCost">SHIPPINGCOST</p>
            </td>
        </tr>
    </table>
    
    <!-- at the end of the table repeat, clear the float:left with this: -->
    <div class="clearingDiv"></div>
    </body>
    </html>
    Mind that only IE reserves space for images it cannot find. All other browsers need the actual image for a correct rendering of the layout.

    how would I go about setting up a database so I can then implement a search bar?
    Web databases are almost always (My)SQL nowadays. The computer language to manage the databases are generally PHP or ASP. They are similar, and the choice is a matter of what your server has running and whether you have Windows with a built-in server on your computer. If 'ASP' to the first question and 'yes' to the second, ASP might be better. But there are separate forums (on this site) for that. I am a front-end developer.
    Last edited by Frank62; 08-13-2011 at 06:08 PM.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.17967 seconds
  • Memory Usage 3,128KB
  • Queries Executed 13 (?)
More Information
Template Usage (31):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (2)bbcode_html
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (27):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./includes/functions_threadedmode.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates