User:LeeA/sandbox change4

tables 7-9

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

What if we want the table on the right side of the page?
 * 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.

Text wrapping - left side of table
float: 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'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:

'* Remember if space between the paragraph and the table is needed add your Attribute Margin:10px'' to the coding. ''' 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.
 * NOTICE the table is on the right side of the page.
 * NOTICE the text wrapped around the left side of the table.

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

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.

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:
 *  Lorem ipsum...

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.
 * Use the margin: auto attribute:

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.

Try these out


 Exercises Check your answers
 * 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

Check your answers

Table sorting
Sometimes tables can get really long and finding what you are looking for can be hard particularly if they are not in any kind of order such as alphabetical. To help with this we can use a "class" called sorting. This will allow us to sort alphabetically any particular column.  {| class="sortable" style="border:1px solid red: width:100% ...
 * It is placed in the beginning table tag like so:
 * You place the "class" before the inline style code.
 * The class has to have a space to separate it from inline style codes.

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

(here is the code for the above box adding a second color)


 * 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.
 *  NOTICE when using a dark color in your table the text will not show so you have to add another color, like white, if using a lighter color no second color needs to be added.


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

Here is another example of a sorting table using a lighter background color

(Here is the coding for this table (put coding in box)---show the using the row tag for the coding)

Rows stay together
This is important. If you have a table of names and addresses, you will want the addresses to stay with the names if they were sorted alphabetically. This sorting attribute allows you to add items without having to worry about the order.
 * PLEASE NOTICE CAREFULLY the items in the rows stay with the item in the column that you have alphabetically rearranged. It does not matter which column you click.

Try these out


 Exercises Check your answers
 * Take our Healthy Foods table and add another row.
 * Now make the table sortable.

 Quick Quiz
 * When you click the sorting icon, the sorting is permanent.
 * A. True
 * B. False


 * When you add items to a table, you need to insert the item in the table in alphabetical order even with the sorting class applied.
 * A. True
 * B. False


 * Sorting will revert back to the original order if you leave the page the table is on.
 * A. True
 * B. False

Check your answers

chapter 9

Table scrolling
Look at the extreme right edge of this page. Do you see a vertical scroll bar? The vertical scroll bar enables you to scroll the content this page up or down. Occasionally you may want to insert a very large table that may be too long or too wide or both to see all of it on a page. To make these large tables useful you can create scroll bars which behave just like the one you see on this page.

Scrolling bars
Let's pretend that our demonstration table is 2000 pixels wide. Here's what it looks like:


 * NOTICE the table expanse is way beyond the right edge of the page.

Horizontal scroll bars
   {| style="border:1px solid red"  |- | Apples | Peas. . . . |}     <div style=" overflow:  scroll ">
 * First step is to encase the table between opening and closing div tags:
 * Next we add the overflow: scroll" attribute to the beginning div tag.
 * However since the table is so wide, we need to limit the table to the size we want it. Here we add a width attribute, in addition:

Let's add the scrolling and width attribute to the beginning div tag. We will limit the width of the table to 50%: Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> <div style=" overflow:  scroll ; width:  50%"> {| style="border:1px solid red" (where is the width and height . . .  %  with px
 * NOTICE the scroll bar on the bottom and a place for a vertical scroll bar.

Vertical scroll bar
To add a vertical scroll bar for very tall tables, just add the height attribute to the beginning div tag: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> <div style=" overflow: scroll ; width:  50% ; height:  100px "> {| style="border:1px solid red; " (where is the width and height) . . . Here is the table with both horizontal and vertical scroll bars:
 * NOTICE we now have active scroll bars horizontally and vertically.
 * Our table is small so the example is not a good one, but you get the idea. On a large table, the scroll bars are a great help.

Try these out


(need a code box to copy and paste)

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises <div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers
 * 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.

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * When creating the horizontal scroll bar, you do not have to set the width.
 * A. True
 * B. False


 * Vertical scroll bars are only useful for very tall tables.
 * A. True
 * B. False


 * You cannot have horizontal and vertical scroll bars at the same time.
 * A. True
 * B. False

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers