User:LeeA/sandbox change2

Tables

Now that we have a table created, we need to add some borders so it will look more like a table.

Add border attribute in opening table tag
 {| style=" border:  1px solid red " Here is the table with the border added: Reminder, the types and border treatments are in lesson Help:Wiki University Wikitext--Borders in the beginning Wikitext's lessons.
 * To add a border to a table, add the border attribute to the opening table tag like so:
 * NOTICE the space between the pipe and the word "style".
 * NOTICE you can use either "px" or "em" for border thickness. (code using em: "border:0.2em solid red")

Cell borders

 * Cells are considered individual so we have to put our attributes in each cell.

You can also put borders around cells:

Each cell now has its own border.


 * NOTICE the width of the table is determined by the text in the cells.
 * NOTICE putting an attribute in each cell is a lot of work, but this is the only way it works in the Wiki.

Here is the coding: 


 * NOTICE the |- row tag acts like a separator between the attribute in the opening table tag and the next cell.
 * NOTICE that a pipe separates the attribute from the text in the cell. The pipe must be there.

Try these out


 Exercises Check your answers
 * With your table from the previous exercise, put a 15 pixel "ridge" border with a border color of "cornsilk."
 * Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.
 * Put a blue border around the cells in the first column 1 pixel thick.

 Quick Quiz
 * Attributes must be separated with a pipe from the contents of the cell
 * A. True
 * B. False


 * You can put borders around rows
 * A. True
 * B. False


 * You can put borders on columns
 * A. True
 * B. False

*Individual cells can have a border around it
 * True
 * False

Check your answers

---

Table width
This is our table from the last chapter:  {| style="border:1px solid red ; width: 100% " Here is our little table with the width attribute installed:
 * You will notice that the width is being controlled by the size and amount of text in the cells.
 * What if you want the table to be as wide as the page, here we use our width attribute.
 * Let's say we want it to cover the entire width or 100% of the page.
 * We only need to add the width attribute to our opening table tag:
 * PLEASE NOTICE the semi-colon that separates the border attribute from the width attribute. Remember we always use semi-colons to separate attributes.

Cell and column width

 * The width of the cells is controlled by the text in the cells. Applying the width attribute for the entire table does not make the cells equal in width, if one cell had a large amount of text in it, the other cells will adjust smaller in size to maintain the over all width of the table.
 * To add some control over the columns we can install the width attribute in the top cells of each column, as the top cells will influence the total column width and there is no need to enter the width to each cell.


 * Let's make our table so each of the cells is 25% of the entire width of the table in other words make all the columns the same width.

Here's the coding:


 * AGAIN NOTICE we are determining the width of the columns not just the width of the top row of cells.
 * NOTICE the width attribute is separated from the border attribute by a semi-colon.

WIDTH ATTRIBUTES FOR PADS AND SMART PHONES
''With the world using far more pads and smart phones to access the internet, we need to be careful how our pages look on these smaller view ports. In areas of the world, where there are few desktop computers, the FamilySearch Wiki is probably being seen on these devises more so than on computer monitors. This means we now should be careful about using the width attribute. It might be well to limit or even eliminate the placing of widths on tables. We suggest that you check your edits on these smaller view ports to make sure they fit so that there will be no need for a horizontal scrolling.''

Try these out


 Exercises
 * With our above table place a green border, "inset" style and 25 pixels wide.
 * Make the table 90% in width.
 * Next place a 1 pixel green border around the cells in the first row.
 * Make the first column 35 percent width, the second 15%, the third 25% and let the last column determine its own width.

Check your answers

 Quick Quiz
 * Putting the width in the first cell of a row controls the width of the first column in the table
 * A. True
 * B. False


 * The width of a table will be determined by the material in the cells, if you do not set a table width
 * A. True
 * B. False


 * You can set the width of a table in percentages only
 * A. True
 * B. False

*Individual cells can have a border around it
 * A. True
 * B. False

Check your answers

Table captions
So far we have learned how to determine the width of our table and the type of border it will have, but we don't know what the table is about. It needs a title or a wikitext caption.

Caption tag
|+ The tag is a pipe and a plus sign: |+
 * It does not need a |- before it.

Let's call our table "Healthy Foods"
 * We will use the table with a width of 100% and the columns set at 25%.
 * Here's how the table will look with a caption:

Here's the coding:
 * NOTICE the caption defaults to the center of the table.


 * NOTICE all that was added was the caption tag.

Font size
 To enlarge the caption, we use our font-size attribute. Let's increase the font to 24 pixels.
 * First notice that the caption is rather small print.

Here's the coding for the caption: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> |+ style=" font-size: 24px "|Healthy Foods

Change font of caption
<font-family:new times roman>
 * The font you see in the table caption is the default font. If you want to change it, we can use our font-family attribute.
 * Let's change the font to "new times roman" font.


 * Here is the complete code for all the changes we have made to the caption:

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New">
 * AGAIN NOTICE the attributes are separated by semi-colons.
 * NOTICE Just as a reminder if you want to add space between the caption and the table use the margin-bottom attribute.

Try these out


<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
 * With our above table place a orange border, "outset" style and 25 pixels thick.
 * Make the table 85% in width.
 * Next place a border around the cells in the first column.
 * Make all the columns the same width.
 * Install our Healthy Foods caption;
 * Font - Curtz MT
 * Font - 28pt
 * 20 pixel space between caption and top of table

<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

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * The order of attributes is critical.
 * A. True
 * B. False


 * The caption can only be on the left side of the page
 * A. True
 * B. False


 * Only margin-bottom of the caption will cause the separation between the caption and the table
 * 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