cis234a- lecture 7 instructor greg d’andrea. tables a table can be displayed on a web page either...
TRANSCRIPT
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.