User:Comptonforbes/sandbox/tables

From FamilySearch Wiki
Jump to: navigation, search

Tables:

Links to {{{state}}}- related articles
Topics African Americans · [1] American Indians · Archives and Libraries · Bible Records · Biography
Counties Adair · Andrew · Atchison · Audrain · Barry · Barton



Apples Cucumbers Peanuts Wheat
Pears Carrots Walnuts Oats
Pineapples Corn Cashews Barley
Oranges Tomatoes Almonds Buckwheat
Apples Cucumbers Peanuts Wheat
Pears Carrots Walnuts Oats
Pineapples Corn Cashews Barley
Oranges Tomatoes Almonds Buckwheat
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Chapter 3 Captions table

Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Chapter 4 Column Heading

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

CHapter 5--Table cells

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

Chapter 6 --Tables Rows

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


Chapter 7 Advanced

Table placement

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 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:
   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:

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 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:


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.


no wrap 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: 

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:

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

Chapter 8 Advanced

Table sorting

Sorting.jpg

Here is what the table will look like with the sorting class in the beginning heading tags:

Last Name First Name State
Wales Jonah Washington
Burns Forest Colorado
Still Stan Utah
Case Justin South Carolina
Nut Hazel New Hampshire
  • NOTICE small arrows pointing up and down have appeared alongside the headings. These arrows appear on the first row regardless of the kind of row it is.
  • When you click the arrows the first time you will see the columns arrange themselves in alphabetical order and only one arrow remains.
  • If you click the remaining arrow, the columns arrange themselves in reverse alphabetical order.
Exercises
  • Take our Healthy Foods table and add another row.
  • Now make the table sortable.

Chapter 9 Advanced

Exercises
  • Take our demonstration table and make it 900 pixels wide and tall.
  • Then make the table scrollable both horizontally and vertically with a finish width and height of 400 pixels.



Chapter 10 Advanced

Tables with col only


Exercises
  • Take this list of counties and make a five column list using just one ROW tag |- in a table.

Adair Andrew Atchison Audrain Barry Barton Bates Benton Bollinger Boone Buchanan Butler Caldwell Callaway Camden Cape Girardeau Carroll Carter Cass Cedar

  • Make all the columns of equal width
  • Alternate the colors of the columns with lightblue and lightgray.
  • Use padding of 5px.
  • Place a black line between the columns.




Chapter 11 Advanced Tables with col only


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



Chapter 12 Advanced

Spanning rows in tables

Here is an example:

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


Chrome

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. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.

Firefox

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. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.



Chapter 13 Templates



Links to {{{state}}}- related articles
Topics African Americans · [1] American Indians · Archives and Libraries · Bible Records · Biography
Counties Adair · Andrew · Atchison · Audrain · Barry · Barton



News and Events
News and Events
Topics
  • Topic one
  • Topic two
Did You Know?
{{{items of interest}}}