ITE 115 Designing a Web Page with TablesObjectivesSlide 3Slide 4Tables on the World Wide WebA Text TableA Graphical TableConsiderations for Text and Graphical TablesText Tables Using Fixed-Width FontsUsing Proportional FontsColumn Alignment Problems with Proportional FontsColumn Alignment with Fixed-Width FontsUsing Preformatted TextText Table Created with the <pre> TagText Table as it Appears in the BrowserGraphical Tables Defining a Table StructureUsing the <table>, <tr>, and <td> TagsThe Graphical Table SyntaxA Simple TableHTML Structure of a TableCreating Headings with the <th> TagAdding Table Headings to the TableResult of Table Headings as Displayed in the BrowserIdentifying the Table Heading, Body, and FooterThe Table Heading, Body, and Footer SyntaxTable Heading, Body, and FooterCreating a Table CaptionTable CaptionsInserting a Table CaptionResult of a Table CaptionModifying the Appearance of a TableWorking with the Table BorderTables with Different Borders ValuesAdding a 5-Pixel Border to a TableTable Frames and RulesValues of the Frame AttributeEffect of Different Frame ValuesCreating Frames and RulesEffect of Different Rules ValuesSizing a Table Cell SpacingTables with Different Cell Spacing ValuesSetting the Cell Spacing to 0 PixelsCell PaddingTables with Different Cell Padding ValuesSetting the Cell Padding to 4 PixelsWorking with Table and Cell SizeWorking with Table and Cell SizeDefining the Table SizeSetting the Width of the Table to 70% of the page widthSetting Cell and Column SizesSlide 51Spanning Rows and ColumnsSlide 53Example of Spanning CellsA Table Structure with a Row-Spanning CellAdding Spanning Cells to a TableResults of a Table with Spanning CellsAligning a Table and its ContentsAligning a Table on the Web PageAligning the Contents of a TableValues of the align and valign attributesSetting a Background ColorResults of a Table with a Colored BackgroundApplying a Background Image to a Table, Row, and CellWorking with Column GroupsThe <colgroup> TagUsing Tables for LayoutSlide 68Fixed-width and Fluid LayoutsCreating a Newspaper-Style LayoutUsing Nested TableThe Result of the Web Page using Nested TablesTutorial 4 New Perspectives on HTML and XHTML, Comprehensive1XPITE 115 Designing a Web Pagewith TablesTutorial 4Creating a News PageTutorial 4 New Perspectives on HTML and XHTML, Comprehensive2XPObjectives•Create a text table with preformatted text•Create the basic structure of a graphical table•Organize table rows into groups•Add captions to tables•Describe how to add summary information to a tableTutorial 4 New Perspectives on HTML and XHTML, Comprehensive3XPObjectives•Use table borders and gridlines•Specify width and height for different table elements•Format table cell contents•Apply a background image and color to a table•Align table and cell contentsTutorial 4 New Perspectives on HTML and XHTML, Comprehensive4XPObjectives•Describe different types of page layouts you can achieve with tables•Work with fixed-width and fluid layouts•Create newspaper-style layout using tablesTutorial 4 New Perspectives on HTML and XHTML, Comprehensive5XPA text table:•contains only text, evenly spaced on the Web page in rows and columns•uses only standard word processing charactersA 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•A table can be displayed on a Web page either in a text or graphical format.Tables on the World Wide WebTutorial 4 New Perspectives on HTML and XHTML, Comprehensive6XPA Text TableThis figure shows a text table.Tutorial 4 New Perspectives on HTML and XHTML, Comprehensive7XPA Graphical TableThis figure shows a graphical tableTutorial 4 New Perspectives on HTML and XHTML, Comprehensive8XPConsiderations for Text and Graphical Tables•Graphical tables are more flexible and attractive, however there are some situations when a text table is needed.•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 elementsTutorial 4 New Perspectives on HTML and XHTML, Comprehensive9XPText TablesUsing Fixed-Width 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.•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.Tutorial 4 New Perspectives on HTML and XHTML, Comprehensive10XPUsing 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 user’s browser.Tutorial 4 New Perspectives on HTML and XHTML, Comprehensive11XPColumn Alignment Problemswith Proportional FontsA text table that uses a proportional font loses alignment when the font size is increased or decreased.Columns look alignedColumns lose alignmentColumns lose alignmentTutorial 4 New Perspectives on HTML and XHTML, Comprehensive12XPColumn Alignmentwith Fixed-Width FontsFixed-width fonts allow the columns to remain aligned regardless of font size.Different browsers and operating systems may use different font sizes to display your page’s text, so you should always use a fixed width font to ensure that the columns in your text tables remain in alignment.Columns align regardless of font sizeTutorial 4 New Perspectives on HTML and XHTML, Comprehensive13XPUsing Preformatted Text•The <pre> 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 <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.•Most of the time, the