CSS/Table Styles/creates a floating table

float: ***;

Browser

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: 150px;
}

#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: 300px;
}

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

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

</style>

</head>
<body>

<div id="exampleB">

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

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

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

</div>

</body>
</html>

Output

Heading
Cell A
Cell B

Heading
Cell A
Cell B

--- Clears the left float ---

Example

Categories