How to put tables side by side?

[ChrisjChrisj]

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.

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

[Raffles]

Get rid of the <br> and do this in the 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.

[ChrisjChrisj]

Thanks for your reply.
Can I get help not using CSS?
Thanks

[CSU-Bill]

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.

[felgall]

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.

[ChrisjChrisj]

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

[Raffles]

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.

[felgall]

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.

[CSU-Bill]

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