SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: How to put tables side by side?
-
Oct 21, 2009, 11:12 #1
- 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>
-
Oct 21, 2009, 12:17 #2
- 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 }
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.
-
Oct 21, 2009, 12:20 #3
- 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
-
Oct 21, 2009, 12:34 #4
- 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.
-
Oct 21, 2009, 12:35 #5
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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="^$">
-
Oct 21, 2009, 12:40 #6
- 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
-
Oct 21, 2009, 13:24 #7
- 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.
-
Oct 21, 2009, 14:06 #8
- 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="^$">
-
Oct 22, 2009, 07:50 #9
- Join Date
- Apr 2009
- Location
- South Carolina
- Posts
- 458
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.aspEach day is a learning experience.
Bookmarks