Assume I have three simple tables. How do I make the tables be inline horizontally (instead of vertical) while only using css? I can do it using a table, however I am trying to learn css better and I would like to do it using css if possible. I realize that may involve adding a div tag or something and that is ok, I just do not want to use a table (for learning purposes).
Just to be sure I am clear what I want…. currently the tables display like this:
table
table
table
but I want the tables to display like this:
table table table
Here is some html with three tables and a JSfiddle to get us started.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<h3>table one</h3>
<table border=1>
<tr><th>field1</th><th>field2</th></tr>
<tr><td>data</th><th>bla</td></tr>
<tr><td>whooo</th><th>foo</td></tr>
</table>
<h3>table two</h3>
<table border=1>
<tr><th>field1</th><th>field2</th></tr>
<tr><td>data</th><th>bla</td></tr>
<tr><td>whooo</th><th>foo</td></tr>
</table>
<h3>table three</h3>
<table border=1>
<tr><th>field1</th><th>field2</th></tr>
<tr><td>data</th><th>bla</td></tr>
<tr><td>whooo</th><th>foo</td></tr>
</table>
</body>
</html>
Thanks for the help everyone. float:left works. Now i’m trying to figure out how to do something like this:
table table
table table
Use
or