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 <pre> 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

ReviewCreating a Table• The general syntax of a graphical table is:<table>

<tr><td> First Cell</td><td> Second Cell</td>

</tr> <tr>

<td> Third Cell</td><td> Four Cell</td>

<tr></table>

Review

• The two-sided <table> tag is used to mark a begin and end of a table structure

• The two-sided <tr> tag is used to create a table row.

• The two-sided <td> tag is used to create a cell within a row.

Review

Other Tags• The two-sided <th> tag is used to create a

table heading. Table headings are like table cells except that content marked with the <th> tag is center within the cell and displayed in bold-face font. The heading tag <th> needs be used within a <tr> tag. The <th> tag is most often used for column headings.

Review

• The two-sided <thead> tag is used to mark the header rows of a table.

• The two-sided <tfoot> tag is used to mark the footer rows of a table.

• The two-sided <tbody> tag is used to mark the rows of the table body.

• <thead>, <tfoot>, <tbody> tags are used to create row groups. You can manipulate a row group's appearance by using the style attribute.

Review

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

Review

<table> Tag Attributes: • The border attribute adds a border to the

table. – Syntax: <table border=”value”> … </table> where

value is the width of the border in pixels.• The bordercolor attribute changes the color of

the table border. – Syntax: <table bordercolor=”colorvalue”> …

</table>.

Review

More <table> Tag Attributes:• The cellspacing attribute controls the amount of

space between the table cells. – Syntax: <table cellspacing=”value”> … </table>

• The cellpadding attribute controls the space between the cell text and the cell border. – Syntax: <table cellpadding=”value”> … </table>

• The width attribute specifies the width of the table. – Syntax: <table width=”value”> … </table> where

value is the width in either pixels or as a percentage of the width of the containing element.

ReviewTable Cells' Attributes• These attributes can be applied to both <td> and <th> tags. • The width attribute can also be applied to individual cells

within the table to specify the cell width. – Syntax: <td width=”value”> … </td> or <th width=”value”> … </th>

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: <td height=”value”> … </td> or <th height=”value”> …

</th> 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: <td nowrap=”nowrap”> … </td> or <th nowrap=”nowrap”> … </th>

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 <td> or a <th> tag.

More on Tables

• The syntax for these attributes is:<td rowspan=”value” colspan=”value”> … </td>

or <th rowspan=”value” colspan=”value”> … </th>

– 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:

<td colspan=”2”> … </td>

More on Tables

• For a cell that spans two rows, the tag is:<td rowspan=”2”> … </td>

• And to span two rows and three columns at the same time, the tag is:<td rowspan=”2” colspan=”3”> … </td>

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 <td> 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:<td align=”position”> … </td> or <th align=”position”> … </th> – 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:<td valign=”position”> … </td>

– 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:

<table style=”background-color: rgb(23,24,25)”> … </table>or

<tr style=”background-color: rgb(23,24,25)”> … </tr>or

<td style=”background-color: rgb(23,24,25)”> … </td>or

<th style=”background-color: rgb(23,24,25)”> … </th>

Formatting Table Content

More on Setting the Background Color<thead style=”background-color: rgb(23,24,25)”> …

</thead>or

<tfoot style=”background-color: rgb(23,24,25)”> … </tfoot>

or<tbody style=”background-color: rgb(23,24,25)”> … </tbody>

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:<table style=”background-image: url(background.jpg)”> … </table>

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:

<table style=”float: position”> … </table>

– 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, tdAnd the following attributes:– colspan, rowspan– cellspacing, cellpadding, border– style: with the following properties:

• background-color• color• font-family• font-size