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 tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file. The tag displays text using a fixed-width font By using the 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: content

Tables Graphical Table Marking a Table, Table Row and Table Cell Table Tables are marked with a two-sided tag that identifies the start and end of the table structure. Row Each row in the table is marked using the two- sided tag, (tr = table row)

Tables Cell Within each table row, the two-sided 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.

Tables Putting Together The general syntax of a graphical table is: First Cell Second Cell Third Cell Four Cell

Tables Creating Table Headings Table headings are marked with the tag. 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. To create a single row of headings, here is the syntax Column 1 Column 2

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: table rows – where table rows are defined using the tag. – A table can contain only one set of table header rows.

Tables To mark the footer rows of a table, use the syntax: table rows – A table can contain only one set of table footer rows. And finally, to mark the rows of the table body, use the syntax: table rows – 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: content The tag must appear directly after the opening tag.

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

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 tag. The syntax for doing so is: … – 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: … 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: …

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

Tables Setting the Table Width The syntax is: … – 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: … or … – 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: … or … – 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.