Slide 1

Notes Ch. 12Creating Tables Web Page Design

Slide 2

Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets. They are useful for organizing information on a Web page, and are often used instead of columns or tabs.

Slide 3

Understanding Tables A table consists of rows (go across) and columns (go up and down). Rows and columns intersect to form cells. Three tags are used to create an HTML table. Tells the browser where the table begins, also includes specifications such as table size and border width. Defines a row of cells. Indicates table data, and is used to specify a table cell. You do not need to specify the number of columns, just the number of cells in each row.

Slide 4

Creating Tables Specify where the table begins and ends and Define the table row and (within the table tags) Define the table cell and enter cell data and Key cell data between tags. You must use the and tags for each cell in the row. You must use the and tags for each row in the table.

Slide 5

Changing Table Borders Table borders are specified using the BORDER=# attribute. The number is the width of the border. The attribute is placed inside the tag:

Slide 6

Changing the Table Size You can change the width (left to right) and height (top to bottom) of your table. You need to decide what percentage of the windows width you want the table to occupy. For example, a table width of 50% would take up 50% (half) of the width of the document window. 100% would go across the whole window. Changing the table size is similar to changing the border size. The height is changed with numbers instead of percentages. Default border is none (0). Each number increases the size of the border.

Slide 7

Formatting Table Cells You can align data in the table cell horizontally, vertically, or both. To align the text horizontally, use the ALIGN=XXX inside the tag. XXX can be left, center, or right. Default is left. To align the text vertically, use the VALIGN=XXX inside the tag. XXX can be top, middle, or bottom. The default is middle. The ALIGN AND VALIGN attributes must be inside the tag, just as BORDER, WIDTH, AND HEIGHT attributes are inside the tag.

Slide 8

Cell Width To give a cell a different width than the cell above it, you need to use the COLSPAN=# attribute. You can span cells across rows by using the ROWSPAN=# attribute..

Slide 9

The End!