www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Table Inline Help

  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
    Europe
    Posts
    266
    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>
    R.,
    Frank

    Please report back how suggestions worked out.

  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
    Europe
    Posts
    266
    Not sure what you mean by outdated, it still works fine, and looks fine for that matter.
    Suite yourself.
    R.,
    Frank

    Please report back how suggestions worked out.

  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
    Europe
    Posts
    266
    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.
    R.,
    Frank

    Please report back how suggestions worked out.

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



Recent Articles