CIS234A Lecture 8 Instructor Greg D’Andrea

Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing characters Two-sided tag is used to create preformatted text and retains spaces and line breaks in the HTML file

Review Graphical Table is displayed using graphical elements can include design elements such as background colors, and colored borders with shading allows you to control the size of tables cells, rows, columns and alignment of text within the table

Review Creating a Table The general syntax of a graphical table is: First Cell Second Cell Third Cell Four Cell

Review The two-sided tag is used to mark a begin and end of a table structure The two-sided tag is used to create a table row. The two-sided tag is used to create a cell within a row.

Review Other Tags The two-sided tag is used to create a table heading. Table headings are like table cells except that content marked with the tag is center within the cell and displayed in bold-face font. The heading tag needs be used within a tag. The tag is most often used for column headings.

Review The two-sided tag is used to mark the header rows of a table. The two-sided tag is used to mark the footer rows of a table. The two-sided tag is used to mark the rows of the table body.,, tags are used to create row groups. You can manipulate a row group's appearance by using the style attribute.

Review The two-sided tag is used add a caption to a table in order to provide descriptive information about the table's contents. The tag must appear directly after the opening tag. The align attribute is used to change the placement of a caption.

Review Tag Attributes: The border attribute adds a border to the table. – Syntax: … where value is the width of the border in pixels. The bordercolor attribute changes the color of the table border. – Syntax: ….

Review More Tag Attributes: The cellspacing attribute controls the amount of space between the table cells. – Syntax: … The cellpadding attribute controls the space between the cell text and the cell border. – Syntax: … The width attribute specifies the width of the table. – Syntax: … where value is the width in either pixels or as a percentage of the width of the containing element.

Review Table Cells' Attributes These attributes can be applied to both and tags. The width attribute can also be applied to individual cells within the table to specify the cell width. – Syntax: … or … where value is the cell's width either in pixels or as a percentage of the width of the entire table The height attribute can also be applied to individual cells within the table to specify the cell height. – Syntax: … or … where value is the cell's height either in pixels or as a percentage of the height of the entire table. This attribute has been deprecated and might not be supported in some current browsers.

Review More Table Cells' Attributes The nowrap attribute is used to prevent line wrapping (keeping the text in one line) in a cell. Syntax: … or …

More on Tables Spanning Rows and Columns A spanning cell, created when merging several cells into one, is a cell that occupies more than one row or one column in a table.

More on Tables Spanning cells are created by inserting the rowspan attribute, the colspan attribute or both of rowspan and colspan the attribute in a or a tag.

More on Tables The syntax for these attributes is: … or … – where value is the number of rows or columns that the cell spans in the table.

More on Tables The direction of the spanning is downward and to the right of the cell containing the rowspan and colspan attributes. For example, to create a cell that spans two columns in the table, it is done this way: …

More on Tables For a cell that spans two rows, the tag is: … And to span two rows and three columns at the same time, the tag is: …

More on Tables It is important to remember that when a table includes a cell that spans multiple rows or columns, you must adjust the number of cell tags used in one or more table rows. For example, if a row contains five columns, but one of the cells in the row spans three columns, you need only three tags within the row.

More on Tables When a cell spans several rows, you need to adjust the number of cell tags in the row below the spanning cell. Ex: A table with two rows. If the top row has two cells and one of them has a rowspan=“2”, then the row below it would only have one cell.

Formatting Table Content Aligning the Contents of a Cell By default, cell text is placed in the middle of a cell, aligned with the cell's left edge. You can specify a different horizontal alignment for a td or th element by using the align attribute: … or … – where position is either left, center, right, justify or char.

Formatting Table Content To specify a different vertical alignment, of cell content, use the attribute: … – where position is top, bottom, or middle.

Formatting Table Content Formatting Table Text You can apply the same text and font styles that we learned earlier. The styles cascade down through the table structure from the table element through the row groups and table rows and down to the individual cells.

Formatting Table Content Setting the Background Color Table elements support the same background-color style that we used earlier, i.e. we can do this: … or … or … or …

Formatting Table Content More on Setting the Background Color … or … or …

Formatting Table Content Setting the Background Image Similarly, we can use the background-image style that we learnt earlier to set the background image for the table or a row or a group of rows or a cell. Example: …

Formatting Table Content Aligning a Table on a Web Page You can align the entire table using the same style to float an inline image on a page. To float the table, we do this: … – where position is either left or right.

Assignment 3 Design a webpage using a table and the following elements: – thead, tbody, tfoot – caption – tr, th, td And the following attributes: – colspan, rowspan – cellspacing, cellpadding, border – style: with the following properties: background-color color font-family font-size