SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to put tables side by side?

    I have this table code, for two tables. It displays them one below the other. How can I change this so the two tables are side by side?

    Thanks.


    Code:
    <table width="100" border="1" cellspacing="0" cellpadding="12" bordercolor="#000000">
            <tr>
              <td bgcolor="#FFFFFF" width="50%">
                <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">Type</font></font></b></font></p>
                <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p>
              </td>
              <td width="60%">
                <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Number</font></b></font></p>
                <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p>
              </td>
            </tr>
            <tr>
              <td width="50%">
                <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">A</font></b></font></p>
                <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p>
              </td>
              <td bgcolor="#FFFFF" width="50%">
                <p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>1</b></font></font></p>
                <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
              </td>
            </tr>
    
          </table>
    
    
    <br>
    <table width="100" border="1" cellspacing="0" cellpadding="12" bordercolor="#000000">
            <tr>
              <td bgcolor="#FFFFFF" width="50%">
                <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">Type</font></font></b></font></p>
                <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p>
              </td>
              <td width="60%">
                <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Number</font></b></font></p>
                <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p>
              </td>
            </tr>
            <tr>
              <td width="50%">
                <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">A</font></b></font></p>
                <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p>
              </td>
              <td bgcolor="#FFFFF" width="50%">
                <p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>1</b></font></font></p>
                <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
              </td>
            </tr>
                    <tr>
    		          <td bgcolor="#FFFFFF" width="50%">
    		            <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">B</font></font></b></font></p>
    		            <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p>
    		          </td>
    		          <td width="50%">
    		            <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">2</font></b></font></p>
    		            <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p>
    		          </td>
    		        </tr>
    		        <tr>
    		          <td width="50%">
    		            <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">C</font></b></font></p>
    		            <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p>
    		          </td>
    		          <td bgcolor="#FFFFF" width="50%">
    		            <p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>3</b></font></font></p>
    		            <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
    		          </td>
            </tr>
          </table>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Get rid of the <br> and do this in the CSS:
    Code css:
    table {
      float:left
    }
    What's with all the empty P elements? And the use of FONT?? It's deprecated - use CSS!

    You could make that code a lot cleaner and legible by replacing many of the attributes with CSS, such as bgcolor, width, align, border, bordercolor and all the FONT stuff.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    Can I get help not using CSS?
    Thanks

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2009
    Location
    South Carolina
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles pointed to the probable solution with the first line of his message.

    Remove the <br> which is similar to hitting the enter key while typing a document. It moves everything down and to the left.
    Each day is a learning experience.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    Thanks for your reply.
    Can I get help not using CSS?
    Thanks
    Probably not since the HTML equivalents were removed from HTML when CSS was introduced. The old tags are only still supported by browsers for ancient web pages created way back in the 20th Century. There are too many disadvantages to using such antique code to consider using it in modern web pages.

    HTML is intended to define what your content is. CSs is how you define how it iis supposed to look.

    Also there is no way to get the page to look the same in different browsers without using CSS since many the defaults are different in different browsers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies.

    Well, I'd just like to create a two cell table matrix that I can duplicate, and position side by side, and change the color and border thickness.
    Can someone provide the html and css for that? please
    thanks

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why don't you just learn how to do it? It means we're not just doing your work for you, you will learn something you can use in the future and you will understand why what you currently have is so inadequate.

    Start off by finding out how to put CSS in a document. Hint: use the <link> element. Next, put the CSS I posted in your CSS document. Then start finding the CSS equivalents to <font> and its attributes and things like border and bordercolor using the sitepoint css reference. You'll find many of them have similar if not identical names.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    f you make an attempt yourself and can't quite get it to work then you can post what you have and someone will tell you where you have gone wrong.

    If you want someone to write it for you then you will probably need to first hunt around to get quotes on how much it will cost.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Evangelist
    Join Date
    Apr 2009
    Location
    South Carolina
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    Thanks for your replies.

    Well, I'd just like to create a two cell table matrix that I can duplicate, and position side by side, and change the color and border thickness.
    Can someone provide the html and css for that? please
    thanks
    You already have code for the tables, you just need to bring that code up-to-date with standards.

    CSS can be applied in different ways. You can link to an external css file. You can insert style between the <head> and </head> tags. You can insert style inline with specific tags in your code. Look here for some help with the specifics: http://www.w3schools.com/css/css_reference.asp
    Each day is a learning experience.


Bookmarks

Posting Permissions

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