Help:Wiki University HTML-- Tables - Placement

TABLE PLACEMENT float: right

So far we have talked about the creation of tables and how to make them pleasant to look at. However, we need to look at how they are placed on a page and how they affect other items on the page. Here is an example using our demonstration table and a width of 50% and our Lorem ipsum text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. What if we want the table on the right side of the page? TABLES TO THE RIGHT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is the coding:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. TEXT WRAPPING - RIGHT SIDE OF TABLE What if we want the text to wrap around on the right side of the table? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is our table with a 10 pixel margin on the right side: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * When the table is placed it usually shows up on the left side of the page under the last item added.
 * If other items are added, after the table, they will appear below it.
 * NOTICE the table's default position is on the left side of the page and any text appears below.
 * NOTICE even though there is room on the right side of the table the text does not wrap around the table.
 * Here's a new attribute: float: right .  This will move the table to the right side of the page.  Now pay attention to what happens to the text:
 * NOTICE the table is on the right side of the page.
 * NOTICE the text wrapped around the left side of the table.
 * We then use float: left .  Even though the table is defaulted to the left, this float:left will cause the text to wrap around on the right side of the table.
 * NOTICE now you can see there is no space between the text and the right side of the table.  If you thought you could fix that by installing margin-right:  10px in the beginning table tag, you are right.

Here is the coding: 

NO WRAPPING clear: both What if you don't want the text to wrap around your table regardless where you place it?
 * Enclose the text in either a paragraph or div tag.
 * Then install this attribute in the opening paragraph or div tag:
 * 

TABLES IN THE MIDDLE margin: auto

What if you want the table to be in the middle of the page or the spacing on either side of the table the same? Here's what that looks like: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. The coding in the opening table tag is: 
 * Use the margin: auto attribute: