User:Stais/Sandbox/Tables,Borders,Widths,Captions,Col Labels

TABLES: Borders, Widths, Captions, Col Labels

Wiki Text Intermediate - Lesson 1 Borders

Border

Cell Borders


 * 1) The width of the table is determined by the text in the cells
 * 2) Each cell has the border attribute placed in it. It is a lot of work, but this is the only way it works in the Wiki
 * 3) The |- row tag acts like a separator between the attribute in the opening table tag and the next cell.
 * 4) A pipe separates the attribute from the text in the cell. The pipe must be there.

Exercises:

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.

Wiki Text Intermediate - Lesson 2 Table Width

The width of a table or cell can be set with either percentages or a fixed amount in pixels. Whenever possible use percentages instead of fixed amounts. That way the table will look proportional to the page if it widens.

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.

Wiki Text Intermediate - Lesson 3 Table Captions


 * Just as a reminder if you want to add space between the caption and the table use the margin-bottom attribute.
 * The order of attributes does not matter. They can be any order.

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

Wiki Text Intermediate - Lesson 4 Table Column Headings


 * To label the columns we use exclamation marks: !
 * Unlike the caption, we have to have a row tag before the exclamation marks:


 * NOTICE the width attribute was moved into the heading tags so we know where they are. They could have stayed where they were or with any other cells in the columns.


 * You can change the font, font size, color, etc. in these heading tags as you can in regular cells.

Exercises:

With our above table place a yellow border, "dashed" style and 10 pixels thick. Make the table 500 pixels wide. Next place a blue border around the headings. change our Healthy Foods caption with any font; Change the background color for the headings.