The Lesson 8 source code is the Lesson 7 source code with added source code for the table tag. This added code appears immediately after the Lesson 7 source code.
The Lesson 8 content is the source code for the creation of a table. Being aware of the table data and the data layout will be helpful in understanding the table source code in the above frame and the explanations of same in this frame. Before continuing with this lesson, view the table (scroll to table at botton of web page -- the table page does not have a return link to this page -- use the "Back" button on your browser to return to this page).
The first line of added code is the heading (h2) containing the text "Table tag" (scroll this line of code into view in the above frame; scroll through the lesson 7 source code to get to this code). This code causes the text "Table tag" to appear on the web page in the heading size of "2".
The next line of added code is the opening table tag (scroll this line of code into view in the above frame). This tag contains attributes and attribute values (attributes and attribute values were presented in Lesson 3).
Reminders:
An attribute usually (not always) specifies a value.
When an attribute has a value, the name of the attribute is followed by an equal sign which is followed by a set of quotation marks with the attribute value typed within the quotation marks.
Most tags can utilize attributes (other attributes will be presented in this and subsequent lessons).
The first attribute in this table tag is the align attribute. The value for this attribute is "center" (this attribute value causes the table to be centered on the web page). The two other values for the align attribute are "left" (positions table at left margin) and "right" (positions table at right margin). When this attribute is not utilized, the table automatically (by default) appears at the left margin.
The next attribute is "border" and the specified value is "1". This value is expressed in pixels, which is the smallest unit of measurement on the computer screen. A borderless table is created by asigning the value of "0" to the border attribute. The default border value (when the border attrubute is not utilized) is zero (no border).
The next attribute is "width" and the specified value is "80%. This value expresses the width of the table as a percentage of the computer screen. This value can be expressed in pixels by omitting the percentage symbol. The use of a percentage of 100% or less minimizes the possibility of creating horizontal scrolling on the web page. Horizontal scrolling on the web page would occur when the pixel value exceeds the number of pixels on the computer screen (different mointors have different numbers of pixels). When the width attribute is not utilized, the default table width is the minimum size for displaying the table data.
The next attribute is "cellpadding" and the specified value in pixels is "10". Each column and row intersection in a table is referred to as a cell. The cellpadding value sets the distance between the data in the cell and the edges of the cell. When the cellpadding attribute is not utilized, the default value of cellpadding is zero.
The next attribute is "cellspacing" and the specified value in pixels is "5". This sets the amount of space between cells. When the cellspacing attribute is not utilized, the default value of cellpadding is zero.
The next line of new code is the "caption" tag which can be utilized to display a table caption and is optional (scroll this line of code into view in the above frame). The text typed within the caption tag pair (Professional Football Teams) appears above the table by default. The value "bottom" specified in a "valign" attribute within the caption tag causes the caption to appear below the table (do not confuse this "valign" tag with the "align" tag in the next paragraph).
By default, the caption is centered (either over or under the table depending on the valign value). Utilizing the align attribute within the caption tag and specifying a value of "left" or "right", causes the caption to be aligned at the left or right margin of the table.
The font tag pair is nested within the caption tag pair to change the size of the text that will appear in the caption. The size attribute is utilized in the opening font tag to set the size of the caption text to "5". The closing font tag, which appears immediately after the caption text, closes the size setting, returning text size to the defautl value. The font tag pair can be utilized to set the text to any size in a range of 1 throuh 7, with 1 being the smallest size and 7 being the largest size.
The next 5 lines of added code create the first row of cells in the table (scroll all 5 lines of code into view in the above frame).
The first line is the opening "tr" (table row) tag which specifies the beginning of the first table row.
The second line begins with the opening "th" (table heading) tag. The "th" tag is an optional tag that is utilized when the cell data will be a heading. In this table, all of the cells in the first row are a heading. When the "th" tag is utilized, the cell data is (by default) in bold and centered in the cell. This cell is created by the opening "th" tag, followed by the cell data (State), followed by the closing "/th" tag.
The third and fourth lines create the second and third cells for the first row. These cells are the two other heading cells in the first row which diplay the headings "City" and "Team".
The fifth line is the closing "/tr" tag which specifies the end of the first table row.
The next 5 lines of added code create the second row of cells in the table (scroll all 5 lines of code into view in the above frame).
The first line is the "tr" (table row) tag. The cells in this row will not be headings and will not be centered by default. The opening "tr" tag utilizes the align attribute with the value of "center" (this value causes the data in all of the cells in the row to be centered). The default align value (when the align attribute is not utilized) is "left".
The second line begins with the opening "td" (table data) tag. Cells that are not for headings (th) are for data (td). This cell is created by the opening "td" tag, followed by the cell data (Colorado), followed by the closing "td" tag.
The third and fourth lines create the second and third cells for the second row. These cells are the two other data cells in the second row which diplay the data "Denver" and "Broncos".
The fifth line is the closing "/tr" tag which specifies the end of the second table row.
Each of the next four table rows for the four other professional football teams are created with the same syntax. Scoll and view each of these four code segments in the above frame.
The last line of added code is the closing table tag (scroll this line of code into view in the above frame).
The remaining code is comprised of the closing body tag and the closing html tag.
LESSON Comments:
The width of each table column can be specified by utilizing the width attribute in the opening table heading (th) or table data (tr) tag which creates the first cell in the column. The width attribute value is specified as a percent, such as "25%" (this specification is a percent of the table width, not the screen width). The sum of the percentages for all of the table columns should be 100. When the width attribute is omitted (such as in this lesson), all cells will be the same width (if a table has 3 columns, each column width will be 1/3 of the table width).
Table headings can be down the first column instead of across the first row. In this instance, the first cell in each row would be created with the "th" (table heading) tag and the remaining cells in each row would be created with the "td" (table data) tag.
A table can have dual headings (across the first row and down the first column). In this instance, the first cell in the first row will not contain data (this cell is a dead spot in the table because of the dual headings). This dead cell can be created with either the "th" or "td" tag (this dead cell could be a "td" cell which displays an image; the code to display an image is presented in lesson 12). In the first row, all cells except the first cell (the dead cell) would be created with the "th" (table heading) tag. In the second and all subsequent rows, the first cell would be created with the "th" (table heading) tag, and all other cells in the row would be created with the "td" (table data) tag.
Utilizing the align attribute with a value of "left" in the opening table tag positions the table at the left margin and causes any text typed after the table code (after the closing table tag) to wrap around the table on the right side of the table. When the align attribute is omitted from the opening table tag, the table appears at the left margin by default; however, in this instance, any text typed after the table code (after the closing table tag) will not wrap around the table.
Utilizing the align attribute with a value of "right" in the opening table tag positions the table at the right margin and causes any text typed after the table code (after the closing table tag) to wrap around the table on the left side of the table.
Utilizing the align attribute with the value of "center" (as in this lesson) positions the table in the center of the computer screen. Text cannot be wrapped on either side of a table that is positioned in the center of the computer screen. As a matter of syntax logic, the formatting of a centered table with text on either or both sides can be achieved as follows; create a one row table with three cells, type text in first cell if desired, nest table in second cell, and type text in third cell if desired.
When a table is nested within a table cell, the cell will automatically adjust to the necessary height (number of lines) to display the nested table. A cell will automatically adjust to the necessary height to display the amount of text (number of lines) typed in a cell. When an image is displayed in a table cell (Lesson 12), the cell will automatically adjust to the necessary height to display the image. When a cell is adjusted to a greater height, all cells in the row are adjusted to the same height.
To prevent any text from wrapping around a left aligned table, do not utilize the align attribute in the opening table tag. To prevent any text from wrapping around a right aligned table, a break tag containing the clear attribute would be typed immediately after the closing table tag. To interrupt the text wrap around a left or right aligned table, a break tag containing the clear attribute would be typed in the source code at the point the wrap is to be interrupted.
The align attribute with an attribute value of "left", "center", or "right" can be utilized in the opening "th" or "td" tag for individual cells. The default align value for a "th" cell is "center" and the default value for a "td" cell is "left. The align value is not necessary when the defalut value is the desired value.
Tables can be utilized to format a web page. Any of the following tags can be utilized in a table cell; bold, italics, underline, break, paragraph, ordered list, unordered list, pre and table (a table can be nested in a table cell). Table cells may contain the tags from lessons 9-12 (colors, images. links, etc). Multiple tables can be utilized for more effective formatting; one or more tables with and/or without borders, different tables with different numbers of columns, different tables with different column widths, or different tables with different background colors (lesson 11). HTML syntax is a logic which means that many alternatives are available (opportunities to be creative).
Table layouts must be logical. Placing an image in a cell when the width of the image is larger than the width of the cell may cause horizontal scrolling (web pages are usually limited to vertical scrolling; a table cell will automatically adjust in width for an image in the same way it adjusts in height when necessary). Abilities to utilize tables effectively for web page formatting and/or layouts can be achieved by trial and error activities.
End of Lesson 8.