To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Tables - Placement

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

Table placement[edit | edit source]

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.

  • 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.

Here is an example using our demonstration table and a width of 50% and our Lorem ipsum text:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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.

  • 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.

What if we want the table on the right side of the page?

Text wrapping - left side of table[edit | edit source]

float:right
  • 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:
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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.

  • NOTICE the table is on the right side of the page.
  • NOTICE the text wrapped around the left side of the table.

Here is the coding:

{| style="border:1px solid red; width:50%; float:right"
|-
! Fruits
! Vegetable
! Nuts
! Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
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[edit | edit source]

What if we want the text to wrap around on the right 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.


Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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.




  • 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 were right.

Here is our table with a 10 pixel margin on the right side:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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:


{| style="border:1px solid red; width:50%; float:left; margin-right:10px"
|-
! Fruits
! Vegetable
! Nuts
! Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
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.

Tables in the middle[edit | edit source]

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?

  • Use the margin:auto attribute:

Here's what that looks like:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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:

{| style="border:1px solid red; width:50%; margin:auto; "
  • NOTICE the text does not wrap around the table on this attribute and there is no space between the text and the bottom of the table.

No wrapping[edit | edit source]

clear:both

What if you want some but not all text to wrap around your table regardless where you place it?

  • Place the attribute "clear:both" in an opening paragraph or div tag, then follow it directly with the closing paragraph or div tag as follows:
<p style="clear:both"></p>
  • Place this code BEFORE the paragraph or text you DO NOT want to wrap around the table.

  • NOTICE There is nothing (no text) between the opening and closing tags containing this attribute.
  • NOTICE If you have two paragraphs, the first paragraph will wrap around the table when you use the float attribute within that table. When you insert this code between the first and second paragraph, the second paragraph will not wrap around the table.

Try these out[edit | edit source]

Tests.gif
Exercises
  • Place our demonstration table on the right side of the page.
  • Place our lorem ipsum paragraph under the table.
  • Place a 10 pixel space between the table and the text.


Quick Quiz
  • Text will always float up to the right side of a table when placing a table on the page.
A. True
B. False
  • Text will float when you place a table on the right side of a page.
A. True
B. False
  • You cannot place a table in the middle of the page.
A. True
B. False