creates a floating table

float: ***;

Browser
Internet Explorer Firefox Opera

The float property creates a floating box.

The floating table can be created by applying this property to the TABLE element.

#example {
float: left;
}

Property Value Explanation
float left the table floats to the left
(the text wraps to the right of the table)
right the table floats to the right
(the text wraps to the left of the table)
none the table doesn't float (default)

Please see the "clears float" when you specified the left or right.

Example

The text wraps

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#exampleA {
width: 100%;
}

table, td, th {
border: 2px #2b2b2b solid;
}
table {
width: 200px;
}

#example1 {
float: left;
}
#example2 {
float: right;
}

</style>

</head>
<body>

<div id="exampleA">

<table id="example1">
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>

<p>
The text wraps to the right of the table.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: left;">--- Clears the left float ---</p>

<table id="example2">
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>

<p>
The text wraps to the left of the table.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: right;">--- Clears the right float ---</p>

</div>

</body>
</html>
Output
Heading A Heading B
Cell A Cell B
Cell C Cell D

The text wraps to the right of the table.
This is example text.
This is example text.

--- Clears the left float ---

Heading A Heading B
Cell A Cell B
Cell C Cell D

The text wraps to the left of the table.
This is example text.
This is example text.

--- Clears the right float ---

The table wraps

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#exampleB {
width: 450px;
}

table, td, th {
border: 2px #2b2b2b solid;
}

#exampleB table {
width: 200px;
margin-right: 20px;
float: left;
}

</style>

</head>
<body>

<div id="exampleB">

<table>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>

<table>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>

<p style="clear: left;">--- Clears the left float ---</p>

</div>

</body>
</html>
Output
Heading A Heading B
Cell A Cell B
Cell C Cell D
Heading A Heading B
Cell A Cell B
Cell C Cell D

--- Clears the left float ---