Using Tables for Layout INP150 Session #8

Layout Map out your page Design with paper and pencil Determine number of rows and columns you need Determine how many rows or columns that will span more than one space Determine the number of pixels in column width (600 is full table width) Create a skeleton with only tables defined Put in content

Layout Specify width of whole table as well as individual cells

Defining A Simple Table 1. … The ending tag is not optional Table header tag merely centers text and makes it bold 2. allows you to caption a table and align="direction" (top, bottom, left or right) allows you to place the caption

Table Borders 1. creates a border; 2. 0 makes sure it doesn’t show Hint: Use a border when you are creating tables then remove it when you are done

Setting the Width of the Table In the or tag, type width="n", where n is the desired width of the cell or of the entire table, in pixels

Details of Setting the Width 1. Browsers automatically calculate table sizes based on elements  Setting it by hand eliminates miscalculations  Set it as width of columns, their elements, borders, and padding  The size of a cell or table can be a percentage of the table or browser  You can’t make a table too small for its contents, the browser won’t let you  Only done for first column unless cells span columns  There is also a height tag but it isn’t well supported

Spanning a Cell Across Columns Often used for headlines with pictures and multi-column text. colspan="n" is placed in the row which will span columns. This n is equal to the number of columns you wish to span, if it is not equal to the maximum number of columns, you must define additional cells to make up the difference.

Spanning a Cell Across Rows Analogous concept to spanning cells over more than one column, but done in the opposite direction. rowspan="n" is placed in the row which will span columns. This n is equal to the number of columns you wish to span, if it is not equal to the maximum number of columns, you must define additional cells to make up the difference.

Spanning a Cell Across Rows If you define a rowspan of 2, you will not need to define the corresponding cell in the next row. If you define a rowspan of 3, you will not need to define the corresponding cells in the next two rows.

Aligning a Cell’s Contents By default, a cell’s contents are aligned two ways: Horizontally to the left and vertically in the middle. The align= "direction " (left, center or right) and valign="direction" (top, middle, bottom or baseline) tags let you change this.

Aligning Cells These attributes can be placed in the following tags: tr td thead tfoot tbody colgroup col

Controlling Space in and Around Cells Cell spacing – adds space between cells, making the table bigger without changing the size of individual cells (default is 2 pixels) Cell padding – adds space between cell contents and its border pushing the borders of a cell outward (default is 1 pixel) Both types of padding should be eliminated when using cells for layout

Packing Cells To eliminate space between the contents of one cell and the next, use cellspacing="0" cellpadding="0". This is the most common value in a table used for layout. Set the border="0".

Nesting Tables 1.Create inner table 2.Create outer table Put a word like PLACEHOLDER in cell that will house inner table 3.Test both table separately 4.Replace the word PLACEHOLDER with the inner table

Nesting Considerations 1.Nesting tables slows a page considerably can be used to make sure a cell will display if it is empty 3.Change the background of the inner table to see how nesting is working 4.You will need two tags

Changing Cell Colors In tag, type bgcolor= and a named color or “#rrggbb bgcolor can be in individual cells or grouping tags

Background Images Treated differently in NETSCAPE and Internet Explorer