XP New Perspectives on Creating Web Pages with

XP New Perspectives on Creating Web Pages with HTML Tutorial 4: Designing a Web Page with Tables Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 1 Tutorial Objectives XP Create a text table Create a table using the

,

, and

tags Create table headers and captions Control the appearance of a table and table text Create table cells that span several rows or columns Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 2 Tutorial Objectives Continued XP Use nested tables to enhance page design Learn about Internet Explorer extensions for use

with tables Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 3 Tables on the World Wide Web XP 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 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 Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

4 A Text Table XP This figure shows a text table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 5 A Graphical Table XP

This figure shows a graphical table Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 6 XP Considerations for Text and Graphical Tables Graphical tables are more flexible and attractive, however there are some situations when a text table is needed. the text-based Lynx browser used on many UNIX systems, can display only text characters Working with tags for graphical tables can be complicated

and time-consuming. for these reasons, you might want to create two versions of a Web page: one that uses only text elements, and another that uses graphical elements Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 7 Using Fixed-Width Fonts XP 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. Use a fixed-width, or mono-space, font so that the columns align properly. Fixed-width fonts use the same amount of space for each character. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 8 XP Using Proportional Fonts 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 1, a proportional font assigns it more space Proportional fonts are more visually attractive, and typically easier to read, than fixed-width fonts. Proportional fonts in a text table can cause errors when the page is rendered in the users browser. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 9 XP Column Alignment Problems with Proportional Fonts This figure shows how a text table that uses a

proportional font loses alignment when the font size is increased or decreased. Columns look aligned Columns lose alignment Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 Columns lose alignment

10 Column Alignment with Fixed-Width Fonts This figure shows fixed-width fonts, which the columns remain aligned regardless of font size. XP Columns align regardless of font size

Different browsers and operating systems may use different font sizes to display your pages text, so you should always use a fixed width font to ensure that the columns in your text tables remain in alignment. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 11 Using the

 Tag 

XP The

 tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.  preformatted text is text formatted in ways that HTML would otherwise not recognize.   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.  Most of the time, the 

tag will be used to insert tables into a Web page. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

12 Text Table Created with the

 Tag  XP  This figure shows the complete preformatted text as it appears in the file. text will appear in the browser as it appears here  

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 13 Text Table as it Appears in the Browser XP This figure shows the page as it appears in the browser. table text appears in a

fixed width font Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 14 Defining a Table Structure XP The first step to creating a table is to specify the table structure: the number of rows and columns the location of column headings the placement of a table caption

Once the table structure is in place, you can start entering data into the table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 15 XP Using the

,

, and

tags to identify different parts of the table. The

and

sections must appear before any

sections in the table structure. These tags are most often used in a table that draws its data from an external data source, or tables that span several Web pages. The browser will repeat those sections across multiple pages. Not all browsers support this capability. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 27

XP Creating a Table Caption HTML allows you to specify a caption for a table. The syntax for creating a caption is:

alignment indicates the caption placement a value of bottom centers the caption below the table a value of top or center centers the caption above the table a value of left or right place the caption above the table to the left or right

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 28 XP Table Captions Only Internet Explorer supports all caption values. Netscape supports only the top and bottom values. The

Tags Graphical tables are enclosed within a two-sided

tag that identifies the start and ending of the table structure. Each row of the table is indicated using a twosided

(for table row).

Within each table row, a two-sided

,

, and

tags.

is used for the table heading

is used for the table body

is used for the table footer

These tags do not format the table, but they do contain collections of rows called row groups. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 25 The Table Heading, Body, and Footer Syntax XP The table heading, body, and footer syntax is:

(for table data) tag indicates the presence of individual table cells. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 16 The Graphical Table Syntax XP The general syntax of a graphical table is:

First Cell Second Cell
Third Cell Fourth Cell

This creates a table with two rows and two columns. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 17 A Simple Table XP This figure shows the

layout of a graphical table. two rows two columns Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 18 Columns within a Table XP HTML does not provide a tag for table columns.

In the original HTML specifications, the number of columns is determined by how many cells are inserted within each row. for example, if you have four

tags in each table row, that table has four columns Later versions of HTML provide increased support for controlling the appearance of table columns. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 19 HTML Structure of a Table XP

beginning of the table structure table cells You do not need to indent the

tags or place them on separate lines, but you may find it easier to interpret your code if you do so. first row of six in the table After the table

structure is in place, youre ready to add the text for each cell. end of the table structure Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 20 Completed HTML Table Tags XP This figure shows the completed text for the body of the table.

With the text for the body of the table entered, the next step is to add the column headings. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 21 XP Creating Headings with the

Tag HTML provides the

tag for table headings. Text formatted with the

tag is centered within the cell and displayed in a boldface font.

The

tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 22 XP Adding Table Headings to the Table Text in cells formatted with the

tag is bold and centered above each table column.

table headings Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 23 Result of Table Headings as Displayed in the Browser XP table headings appear bold and centered over their

columns Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 24 XP Identifying the Table Heading, Body, and Footer HTML allows you to identify the different parts of your table using the

heading information . . .

footer information . . . first group of table rows . . . second group of table rows . . .

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 26 XP

Table Heading, Body, and Footer A single table can contain several

caption text tag works only with tables, the tag must be placed within the table structure. Captions are shown as normal text without special formatting. Captions can be formatted by embedding the caption text within other HTML tags. for example, place the caption text within a pair of and

tags causes the caption to display as bold and italic Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 29 Inserting a Table Caption Placing the caption text within a pair of tags causes the caption to display as bold. XP caption text

caption will be centered above the table Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 30 Result of a Table Caption This figure shows a table with a caption. XP table caption

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 31 XP Modifying the Appearance of a Table You can modify the appearance of a table by adding: gridlines borders background color HTML also provides tags and attributes to control the placement and size of a table.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 32 XP Adding a Table Border By default, browsers display tables without table borders. A table border can be added using the border attribute to the

tag. The syntax for creating a table border is:

value is the width of the border in pixels The size attribute is optional; if you dont specify a size, the browser creates a table border 1 pixel wide.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 33 XP Tables with Different Borders Values This figure shows the effect on a tables border when the border size is varied. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 34 XP

Adding a 5-Pixel Border to a Table Only the outside border is affected by the border attribute; the internal gridlines are not affected. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 35 Controlling Cell Spacing XP

The cellspacing attribute controls the amount of space inserted between table cells. The syntax for specifying the cell space is:

value is the width of the interior borders in pixels the default cell spacing is 2 pixels Cell spacing refers to the space between the cells. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 36 Tables with Different Cell Spacing Values

XP This figure shows how different cell spacing values affect a tables appearance. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 37 XP Setting the Cell Spacing to 0 Pixels Setting the cellspacing to 0 reduces the width of the borders between individual table cells. This will not remove

the border between the cells. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 38 XP Defining Cell Padding To control the space between the table text and the cell borders, add the cellpadding attribute to the table tag. The syntax for this attribute is:

value is the distance from the table text to the cell

border, as measured in pixels the default cell padding value is 1 pixel Cell padding refers to the space within the cells. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 39 XP Tables with Different Cell Padding Values This figure shows the effect of changing the cell padding value for a table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

40 XP Setting the Cell Padding to 4 Pixels This figure shows the table with the increased amount of cell padding. By increasing the cell padding, you added needed space to the table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

41 XP Table Frames and Rules Two additional table attributes introduced in HTML 4.0 are the frames and rules attributes. With the frame and rule attributes you can control how borders and gridlines are applied to the table. The frames attribute allows you to determine which sides of the table will have borders. The frame attribute syntax is:

type is either box (the default), above, below, hsides, vsides, lhs, rhs, or void Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

42 Values of the Frame Attribute XP This figure describes each of the values of the frame attribute. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 43 XP Effect of Different Frame Values

This figure shows the effect of each of the frame values on the table grid. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 44 The Frames Attribute XP The frames attribute is: supported by Internet Explorer version 4.0 and above supported by Netscape version 6.2, but not by earlier versions of Netscape Creating Web Pages with HTML, 3e

Prepared by: C. Hueckstaedt, Tutorial 4 45 XP Creating Frames and Rules Continued The rules attribute lets you control how the table gridlines are drawn. The syntax of the rules attribute is:

type is either all, rows, cols, or none Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 46

Effect of Different Rules Values XP This figure shows the effect of each of the rules attribute values on a table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 47 The Rules Attribute XP The rules attribute is:

supported by Internet Explorer version 4.0 and above it is not supported by any versions of Netscape Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 48 XP Working with Table and Cell Size The size of a table is determined by the text it contains in its cells. By default, HTML places text on a single line. As you add text in a cell, the width of the column and table expands to the edge of the page. once the page edge is reached, the browser reduces the size of the

remaining columns to keep the text to a single line You can insert a line break, paragraph or heading tag within a cell. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 49 Working with Table and Cell Size Continued XP When the browser can no longer increase or decrease the size of the column and table it wraps

the text to a second line. As more text is added, the height of the table expands to accommodate the additional text. It is important to manually define the size of the table cells and the table as a whole. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 50 An Example of Changing a Table and Cell Size XP This figure shows a table where you may want to change the

table and cell size to evenly lay the table out on a Web page. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 51 XP Defining the Table Size The syntax for specifying the table size is:

size is the width and height of the table as measured in pixels or as a percentage of the display area To create a table whose height is equal to the entire height of the display area, enter the attribute height=100%.

If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used. Remember that some monitors display Web pages at a resolution of 640 by 480 pixels. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 52 Setting the Width of the Table to 500 Pixels XP This figure shows the revised page with the

table width increased to 500 pixels. Once the width is set for the table, the width of individual cells and columns can be set. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 53 Defining Cell and Column Sizes XP To set the width of an individual cell, add the

width attribute to either the

or

tags. The syntax is: width=value value can be expressed either in pixels or as a percentage of the table width a width value of 30% displays a cell that is 30% of the total width of the table Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 54 XP Defining Cell and Column Sizes Continued A pixel value or a percentage entered depends on whether

a table will be a specific size or fill a relative space. Specifying a width for an individual cell does not guarantee that the cell will be that width when displayed in the browser. the reason for this is that the cell is part of a column containing other cells. Set the width of all the cells in the column to the same value to ensure that the cells do not change in size. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 55 XP Defining Cell and

Column Sizes Continued The height attribute can be used in the

or

tags to set the height of individual cells. The height attribute is expressed either in pixels or as a percentage of the height of the table. If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 56 XP Aligning a Table and its Contents

By default, a browser places a table on the left margin of a Web page, with surrounding text placed above and below the table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 57 XP Aligning a Table on the Web Page To align a table with the surrounding text, use the align attribute as follows: align=alignment alignment equals left, right, or center left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side

center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it The align attribute is similar to the align attribute used with the tag. The align attribute is available only with browsers that support HTML 3.2 or later. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 58 XP Results of a Right-Aligned Table This figure shows a rightaligned table.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 59 Aligning the Contents of a Table XP By default, cell text is placed in the middle of the cell, aligned with the cells left edge. By using the align and valign attributes, you can specify the texts horizontal and vertical placement. To align the text for a single column, you must apply the align attribute to every cell in that

column. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 60 Values of the Align and Valign Attributes XP This figure shows how the combination of the align and valign attributes can affect the position of the cell text in relation to the cell borders. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

61 Right-Aligning the Values in a Column XP right-aligned column Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 62 XP Spanning Rows and Columns To merge several cells into one, you need to create a

spanning cell. A spanning cell is a cell that occupies more than one row or column in a table. Spanning cells are created by inserting the rowspan and colspan attribute in a

or

tag. The syntax for these attributes is: rowspan=value colspan=value value is the number of rows or columns that the cell spans in the table Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 63 XP Spanning Rows and

Columns Continued When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row. When a cell spans several rows, the rows below the spanning cell must also be adjusted. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 64 Example of Spanning Cells XP This figure shows a table of opinion poll data in which some

of the cells span several rows and/or columns. This cell spans two columns and two rows this cell spans three columns This cell spans three rows Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

65 A Table Structure with a Row-Spanning Cell XP This figure shows spanning cells. four table cells in the first row only three table cells are required for the second and third rows HTML code

resulting table Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 66 XP Adding Spanning Cells to a Table this cell spans two columns these cells span three rows

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 67 XP Results of a Table with Spanning Cells This figure shows a table with spanning cells. spanning cells Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 68

An Example of Spanning Cells XP This figure shows an example of spanning cells. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 69 An Example of Spanning Cells XP

This figure shows an example of spanning cells. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 70 Applying a Background Color XP Table elements support the bgcolor attribute. To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by adding the

bgcolor attribute to either the

,

,

, or

tags as follows:

color is either a color name or hexadecimal color value Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 71 XP Specifying Table, Row, and Cell Colors

You cannot set a background color for a column with a single attribute; to set the background color for an entire column, you must define the background color for each cell in that column. row background color table background color

cell background colors The color defined for a cell overrides the color defined for a row, and the color defined for a row overrides the color defined for a table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 72 Results of a Table

with a Colored Background XP This figure shows a table with a colored background. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 73 XP The bordercolor Attribute By default, table borders are displayed in two shades of gray that create a three-dimensional

effect. The syntax for the bordercolor attribute is:

color is an HTML color name or hexadecimal color value Internet Explorer and Netscape apply this attribute differently. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 74 XP Using the bordercolor Attribute This figure shows that Internet Explorer applies the same color to all parts of the border,

thus removing the 3-D effect; Netscape does not.

Internet Explorer Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 Netscape 75 The bordercolorlight and XP bordercolordark Attributes

The bordercolorlight and bordercolordark attributes allow you specify light and dark colors of a 3-D border. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 76 XP Using the bordercolorlight Attribute This figure shows an example of the use of the bordercolor and bordercolorlight attributes to create a 3-D colored border in Internet Explorer. Netscape does not support these attributes.

bordercolor=blue bordercolorlight=#b2b2ff> Internet Explorer Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 77 XP Applying a Table Background Add a background image to your tables using the background attribute. A background can be applied to the entire table, to a single row (Netscape 6.2 only), or to an individual cell.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 78 Applying a Background Image to a Table, Row, and Cell XP This figure shows examples of the background attribute applied to three sample tables. parch.jpg

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

value is the number of columns in the group The

tag supports the align, bgcolor, valign, and width attributes. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 80 Using the

Tag XP This figure shows an example of the

tag used to format the appearance of entire table columns.

HTML code resulting table Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 81 The

Tag XP Another way of grouping columns is by using the

tag. The syntax of the

tag is:

value is the number of columns in the group, and columns are definitions for individual columns within the group (defined using the

tag.) In the event of a conflict between the attributes in the

and

tags, the

tag attributes take precedence. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 82 Using the

Tag XP This figure shows an example of a column group used

to center the text of all columns in the table. HTML code resulting table Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 83 XP Designing a Page Layout with Tables HTML tables are most often used to define the layout of an entire Web page. If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, youll find tables an

essential and useful tool. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 84 Table Layout of a Web Page XP 620 pixels This figure shows a sample table layout of a Web page.

1) newspaper logo 120 pixels 2) list of links 500 pixels 3) articles 4) address and phone number Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 85 A Web Page with Tables XP

This figure shows a sample web page using tables. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 86 XP Comment Tags Comment tags can aid in viewing your HTML file by describing the different sections of the code. The syntax for creating a comment tag is:

comment text is the text that you want to insert into the comment Any text appearing within the comment tag is ignored by the browser and not displayed in the page. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 87 XP Using Nested Table Tables can be created within another table making the Web page easier to manage.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 88 A Sketch of a Web Page using Nested Tables XP This figure shows a sketch of a web page using nested tables. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4

89 The Result of the Web Page using Nested Tables XP This figure shows a sample web page using nested tables. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 90 An Example of the Contents

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 XP 91 XP An Example of the Gargoyle Notes Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 92

The Result of the Web Page using Nested Tables XP This figure shows a sample web page using nested tables. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 93 XP Changing the Size of the Table Text

In order to change the size of the table text, you need to insert a tag into each cell. The tag can not be applied to all of the text in a table. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 94 XP Changing the Font Size in a Table It is important to make sure that each tag is placed inside the

79 Working with Column Groups XP HTML 4.0 supports tags that allow you to manipulate the features of entire columns and groups of columns. this feature is currently only supported by Internet Explorer 4.0 or above, and not at all by Netscape. this feature shouldnt be used if your page is to be viewed by multiple browsers and browser versions

To define a column, add the following tag to the top of the table structure:

,

, or

tags and to include the closing tag within each cell. Another possible source of error is to neglect to include a closing double quotation mark around the attribute values. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 95

XP Summary Learned how to create and use tables. Created a simple text table using the

 tag to display unformatted text.  Created a graphical table using the 

,

,

and

tags. Worked with basic properties of tables. Learned how to control the placement of the table on a Web page. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 96 XP

Summary Learned how to specify the size and alignment of the various table elements. Worked with row-spanning and column-spanning cells. Discussed the principle uses of tables. Discussed extensions to the standard table tags that are supported by some browsers. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 97

Recently Viewed Presentations

  • Title Page - Texas Children's Hospital

    Title Page - Texas Children's Hospital

    Catheter removal. Removal of a tunneled cuffed CVC or implantable port is a medical act and must be done by a physician. The Vascular Access Team (VAT) or RN with competence determined by the specific unit may remove a non-tunneled...
  • Poetry - Textual Analysis

    Poetry - Textual Analysis

    One example of poetry with a strong message is that written during the First World War. Well known poets, such as Wilfred Owen and Siegfried Sassoon used their poetry to comment on the futility of the war, and to tell...
  • Using Your PSAT/NMSQT Scores to Increase College Readiness ...

    Using Your PSAT/NMSQT Scores to Increase College Readiness ...

    Test scores on PSAT/NMSQTrange from 8 to 38. By reviewing their test scores, students can discover if they performed better on the Reading Test or the Writing and Language Test, which together produce the Evidence-Based Reading and Writing section score.
  • To Kill a Mockingbird by Harper Lee - WordPress.com

    To Kill a Mockingbird by Harper Lee - WordPress.com

    To Kill a Mockingbird by Harper Lee Study Guides ECHS C. Edge Chapter 1 Vocabulary Context Clues. Consider the underlined word in each of the following sentences and choose the most appropriate meaning based on context clues.
  • Getting Your International Students to Berkeley

    Getting Your International Students to Berkeley

    Students must notify BIO prior to taking action. BIO will explain F-1/J-1 process of having their record ended and steps to request new visa documents after readmission. *NEW* BIO Withdrawal form for students to indicate they have officially notified BIO...
  • Vocabulary Workshop

    Vocabulary Workshop

    hypocrite (n.) a person who pretends to be what he or she is not or better than he or she really is; a two-faced person Synonyms: phony, charlatan, fraud The speaker who said one thing but did something else entirely...
  • MVT Deposits (Mississippi Valley Type Deposits) MVT Ores

    MVT Deposits (Mississippi Valley Type Deposits) MVT Ores

    MVT Deposits (Mississippi Valley Type Deposits) MVT Ores Sphalerite and Galena in brecciated, dolomitized limestone Sphalerite Galena Spalerite-galena-bearing breccia Distribution of MVT Deposits Zn-Pb Reserves and Production by Deposit Type Grade and Tonnage Data for MVT Deposits The MVT Districts...
  • Chapter 3: The Carbon Cycle - University of Toronto

    Chapter 3: The Carbon Cycle - University of Toronto

    University of Toronto Other titles: Arial Calibri Default Design Microsoft PowerPoint Slide Slides for GGR 314, Global Warming Chapter 3: The Carbon Cycle Course taught by Danny Harvey Department of Geography University of Toronto Exhibit 3-1: The pre-industrial carbon cycle...