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

  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.

  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 07:08 PM.

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