Positioning tables using CSS
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
display: inline-block;
or
float: left;
The h3 tags are getting in the way if you do this:
table {display: inline-block;}
You have an option putting the h3 and table sets in divs and then align the divs, or replace h3s with captions.
just wrap a with the 'float' style set to left on each table:
something like this...
<div style="float:left><table></table></div>
You may float elements in order to display them inline. For example, if you want to display your h3 and table elements in one row you could use this:
<html>
<head>
<style type="text/css">
div {
float: left;
width: 20em;
margin: 1em;
background-color: green;
}
table {
width: 100%;
}
</style>
</head>
<body>
<div>
<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>
</div>
...
</body>
</html>
A code only with tables and css
<html>
<head>
<style type="text/css">
table
{
float:left;
display:inline;
}
</style>
</head>
<body>
<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>
<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>
<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>
A code only with HTML:
<html>
<body>
<table>
<tr>
<td>
<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>
</td>
<td>
<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>
</td>
<td>
<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>
</td>
</tr>
</body>
</html>
加载中,请稍侯......
精彩评论