Tables

A table contains rows; within each row are cells.
A table is created with the   <table>   </table>   container tags.
Within the table container, each row is created with the   <tr>   </tr>   container tags.
Within each row container, a cell container can be either:
<th>   </th> - a heading cell
<td>   </td> - a datum cell
The following table has 4 cells, and no borders.

Look at the samples, to see how the html tags are written.

You can specify a border style, for a border around a any block element. Sometimes you will want to put a border around a table.

There is no obvious simple way to center a table, image, or other block object.
However, there is a trick, which can be used to center a block object.
Give it left and right margins, that are specified with  auto  width. By default, these margins will be the same size and take up all the available space.
The width attribute must be specified for this technique to work.
This will center a block object. See the sample.

You can specify the width of a table and the cells in the table by using styles.

Height is not always easy to control. If the height is a fixed size in pixels, you can specify it with a style. On the other hand, if the height may vary, such as when it contains text, it is difficult to correctly adjust the height.
Fortunately, a table will automatically adjust the height of all cells in a row to the same height.

• Spacing is margin space OUTSIDE all cells
• Padding is space just INSIDE a cell

Cell spacing is outside every one of the cells in a table.
Cell spacing is provided by using the border-spacing property in the style for the table.
Because the whole table is controlled by the border-spacing property in the style for the table, the spacing is the same for all cells within the table.
The spacing property is called border-spacing because it is usually used to provide spacing outside the cells borders. However it works to put spacing around all the cells that do not have borders as well.

• spacing is margin space OUTSIDE each cell
• Padding is space just INSIDE each cell

You can use the  padding  property in the styles for the  td  and  th  elements.

Padding of 3px or more makes cells look better rather than allowing the text to run right up against the edge.

Because padding is applied to each cell, the cells could be specified with different padding, though they are often all specified with the same padding.

padding is usually used with the td and th elements, though it could be used with the table element.

• Margin is space OUTSIDE each element
• Padding is space just INSIDE each element

Padding can be used with any block element such as h1, div, or p. Block elements are elements that force a new line at the beginning and end of the element.

On the other hand padding may not work well in in-line elements such as span. In-line elements do not force a new line, but are within a line of text.

Margin space outside a block element is created by applying the margin property to the block element.

You can specify a caption for your table.
The caption container should be typed as the first thing inside the table container.
The text in the caption container will be put above or below your table.
Possible values for the caption-side style property are:   top bottom
The text of the caption can also be aligned with the left or right side of the table.
Possible values for the text-align style property are: left right

You can ask for the caption to be aligned at the top or bottom.
Do you always get the alignment you request?

NO. Captions do not always look the way you want them to look.

Why not?

We need to consider what the World Wide Web is designed to do. Your page can be transmitted throughout the world through a variety of servers. The page is displayed by the user, using whatever system they have. It is amazing that this works at all. It is not surprising that there are some differences in different environments.

What affects some of the differences seen in a web page:

• What html elements are used, and how are they used?
• What else is used in the page, besides html?
• What is the operating environment for our web server?
• What is the operation environment for the user's internet server?
• What browser is the user using?
• What release of that browser is the user using?
• What settings has the user made in the browser?
• What operating system is the user using?
• What release of that operating system is the user using?
• What settings has the user made in the operating system?

What can you do, to make sure your pages work well?
You can be sure to code pages that meet the HTML standards.
We see standard HTML throughout this course.

In addition to coding to standards, professional web page developers do a lot of testing in various environments. This makes sure that the web pages work in almost all environments. A business does not want a web page that does not work for 10% of the prospective customers. Perhaps 1% is acceptable, but not 10%.

Each cell is created by a <th> or <td> container.
The text within a cell can be aligned horizontally and vertically.
You can use style to align the text within a cell.

The text-align style property for a <th> or <td> element aligns the contents of the cell horizontally.
The values for the text-align style property are   text-align: left;   text-align: center;   text-align: right;
It is nice that text-align has center, rather than the auto margins that are used to align block element.

The vertical-align style property for a <th> or <td> element aligns the contents of the cell vertically.
The values for the vertical-align style property, when used for a <th> or <td> element are
vertical-align: top;   vertical-align: middle;   vertical-align: bottom;

You can make a cell extra tall, spanning several rows.
You can make a cell extra wide, spanning several columns.
Examples:

A good, easy way to provide a good page layout is to fill the entire page with a table. Without borders, the user does not see the table, but does see everything aligned neatly.

Now you are ready to build your lab 9 web page.
Follow the link on the left to read the lab 9 requirements and build your lab 9 web page.

You have built your lab 9 web page.
Upload your page to voyager, just as you did for lab 2.
Validate your lab 9 page.
Then, log in to Canvas and submit assignment 9. The submission should provide the following information:

• It should say that you have completed Lab 9.

Read information that your find relivant from the book you selected.