htmlDemo4 - Demo 4 XP Tables on the World Wide Web XP A...

Info iconThis preview shows pages 1–3. Sign up to view the full content.

View Full Document Right Arrow Icon
1 Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 1 XP Designing a Web Page with Tables Demo 4 Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 2 XP 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 A table can be displayed on a Web page either in a text or graphical format. Tables on the World Wide Web Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 3 XP A Text Table This figure shows a text table. Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 4 XP A Graphical Table This figure shows a graphical table Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 5 XP Using 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 <table> tag will be used to insert tables into a Web page. Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 6 XP Graphical Tables Defining a Table Structure • 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.
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
2 Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 7 XP Using the <table> , <tr> , and <td> Tags • Graphical tables are enclosed within a two- sided <table> tag that identifies the start and ending of the table structure. • Each row of the table is indicated using a two- sided <tr> (for table row). • Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells. Demo 4 Adapted From New Perspectives on HTML and XHTML, Comprehensive Patrick Carey, Course Technology 8 XP The Graphical Table Syntax • 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> Fourth Cell </td> </tr> </table> – This creates a table with two rows and two columns. Demo 4
Background image of page 2
Image of page 3
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 05/29/2010 for the course CS 22 taught by Professor Weddffd during the Spring '08 term at Colorado State.

Page1 / 8

htmlDemo4 - Demo 4 XP Tables on the World Wide Web XP A...

This preview shows document pages 1 - 3. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online