CIS234A- Lecture 7

Instructor Greg D’Andrea

Tables

• A table can be displayed on a Web page either in a text or graphical format.

• A text table:– contains only text, evenly spaced on the Web

page in rows and columns– uses only standard word processing characters

Tables

• Let’s see a Text Table Example…

Tables

• A 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

Tables

• Let’s see a Graphical Table Example…

Tables

Text Table• Fixed-Width Fonts vs Proportional Fonts– When you create a text table, the font you use

is important. A text table relies on space and the characters that fill those spaces to create its column boundaries. Using a fixed-width, or mono-space font will help the columns to be aligned properly. Fixed-width fonts use the same amount of space for each character.

Tables

Text Table– Proportional fonts assign a different amount of

space for each character depending on the width of that character. For example, since the character “m” is wider than the character “l”, a proportional font assigns it more space. Proportional fonts are more visually attractive, and typically easier to read, than fixed-width fonts. But proportional fonts in a text table can cause column alignment problem when the page is rendered in the user’s browser.

Tables

Using Preformatted Text• The <pre> tag creates preformatted text and retains

any spaces or line breaks indicated in the HTML file.• The <pre> tag displays text using a fixed-width font• By using the <pre> tag, a text table can be displayed

by all browsers, and the columns will retain their alignment no matter what font the browser is using

• Preformatted text is created using the following syntax:<pre> content</pre>

Tables

Graphical Table• Marking a Table, Table Row and Table Cell

Table• Tables are marked with a two-sided <table> tag

that identifies the start and end of the table structure.

Row• Each row in the table is marked using the two-

sided <tr> tag, (tr = table row)

Tables

Cell• Within each table row, the two-sided <td> tag

marks the content of individual tables cells, (td = table data.)

• There is no tag for table columns because the number of columns is determined by the number of cells within a row.

TablesPutting Together• 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>

TablesCreating Table Headings• Table headings are marked with the <th> tag. 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.

• To create a single row of headings, here is the syntax<tr>

<th> Column 1</th><th>Column 2</th>

</tr>

Tables

Creating Row Groups• You can classify a table's rows into row groups

that indicate their purpose in the table • HTML supports three types of row groups:

table header, table body and table footer.• Because order is important in a HTML file, the

table header must be listed before the table footer and both the table header and footer must appear before the table body.

Tables

• To mark the header rows of a table, use the syntax:

<thead>table rows

</thead>– where table rows are defined using the <tr> tag.– A table can contain only one set of table header

rows.

Tables• To mark the footer rows of a table, use the syntax:<tfoot>

table rows</tfoot>

– A table can contain only one set of table footer rows. • And finally, to mark the rows of the table body, use the

syntax:<tbody>

table rows</tbody>

– A table can contain multiple table body sections.

Tables

• Creating row groups does not affect a table's appearance. You can apply different styles to table groups in order to make them appear differently. We'll explore this in later lecture.

Tables

Creating a Table Caption• You can add a caption to a table in order to

provide descriptive information about the table's contents.

• The syntax is:<caption> content </caption>• The <caption> tag must appear directly after

the opening <table> tag.

Tables

• By default the caption appears centered above a table. We can change the placement of a caption using the align attribute:

<caption align=”position”> content <caption>

Tables

• where position has the following values:• “bottom” to place the caption centered below

the table• “top” to place the caption centered above the

table• “left” to place the caption above the table

aligned with the left table margin• “right” to place the caption above the table

aligned with the right table margin

Tables

• Captions are rendered as normal text without special formatting, but you can format and align captions using the styles discussed in previous lectures.

Tables

Adding a Table Border• By default, browser displays the tables

without table borders. You can create a table border by adding the border attribute to the <table> tag. The syntax for doing so is:

<table border=”value”> … </table>– where value is the width of the border in pixels

Tables

Setting Table Border Color• By default, table borders are displayed in two

shades of gray that create a 3-D effect. You can change these colors by using the bordercolor attribute as follows:

<table bordercolor=”value”> … </table>

• The bordercolor is supported differently by different browsers.

Tables

Setting Cell Spacing• Cell spacing refers to the amount of space

between the table cells. • By default, the browser sets the cell spacing to

2 pixels. To set a different cell spacing value, the cellspacing attribute is used:

• <table cellspacing=”value”> … </table>

Tables

Setting Cell Padding• The cell padding is the space between the cell

text and the cell border.• By default, the cell padding value is 1 pixel.• To change it, the cellpadding attribute is used

as follows:<table cellpadding=”value”> … </table>

Tables

Setting the Table Width• The syntax is:<table width=”value”> … </table>– where value is the width in either pixels or as a

percentage of the width of the containing element.

Tables

Setting Column Width and Row Height• The width attribute can also applied to individual

cells within the table, using the form:<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

Tables

• You can also set the width of a column by setting the width of the first cell in the column; the remaining cells in the column will adopt that width. If the content of one of the other cells exceeds that width, however the browser expands the size of all the cells in the column to match the width required to display that content. If you apply different widths for two cells in the same column, a browser applies the larger value to the column.

Tables

The height attribute is used to set the height of a cell:

<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

Practice

Lab• Create a text table and a graphical table.