1 / 106

Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Chapter 4: Creating Tables in a Web Site Using an External Style Sheet. Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@jepson.gonzaga.edu. Chapter Objectives. Define table elements

randi
Download Presentation

Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 4:Creating Tables in a Web Site Using an External Style Sheet Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@jepson.gonzaga.edu

  2. Chapter Objectives • Define table elements • Describe the steps used to plan, design, and code a table • Create a borderless table for a horizontal menu bar with text links • Create an external style sheet to define styles across a Web site • Utilize classes to give you more control over styles • Link an external style sheet to Web pages where you want its styles applied

  3. Chapter Objectives • Copy and paste HTML code to a new file • Create a table with borders and insert text • Alter the spacing between and within cells using the cellspacing and cellpadding attributes • Utilize inline styles to alter the style of individual elements on a Web page • Add background color to rows and cells • Insert a caption below a table • Create headings that span rows using the rowspanand colspan attributes

  4. Three Parts for Chapter 4 • Make sure you follow the two Parts for studying this chapter: • Part I: study and practice basic tables (not in the text) thoroughly. • Do not skip Parts I and II. • Part II: study and practice advanced (challenging) examples (not in the text) for creating attractive tables for your HWs, and, ultimately, enhance your Personal Web Page. • Part III: study and practice text examples then you are ready for working on the HW.

  5. Type the following URLs Click the following link and get some ideas about what we will learn and achieve in Chapter 4: http://barney.gonzaga.edu/~chenta/html04/exercise/sabatinas.html http://barney.gonzaga.edu/~chenta/html04/exercise/sabatinas.html select “Slide Show” for this slide Click this “Link” The result will be displayed on the browser Right click Windows and select “View Page Source” to show the HTML codes Use the same way for the rest of examples.

  6. Creating Table in the Web Site Topics to learn: Table creation with external css: 1. heading color <th> 2. background-color 3. caption (bottom) Table with borderless menu Table with 5-px border and header with background color and whit text cellpadding (5px) and cellspacing (10px) added to enhance style of table rowspan used twice to span three rows each Caption inserted beneath table to clarify information

  7. Part I … • Before you move to the text examples, make sure you study and practice the following examples on creating different (and good) tables.

  8. 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 Tables on the World Wide Web • A table can be displayed on a Web page either in a textor graphicalformat.

  9. Figure Extra 4.2 - A graphical table Text and Graphical Tables Figure Extra 4.1 - A text table.

  10. Considerations 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 elements

  11. 1. Text 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

  12. 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

  13. text will appear in the browser as it appears here Text Table Created with the <pre> Tag The complete preformatted text as it appears in the file.

  14. table text appears in a fixed width font Text Table as it Appearsin the Browser The page as it appears in the browser.

  15. <html><head> <!-- New Perspectives on HTML and XHTML Tutorial 4 Filename: race1.htm Race Results Page - Text Table--> <title>Local Woman Wins Marathon</title> </head> <body> <h1 style="text-align: center; font-family: Arial, Helvetica, sans-serif"> Local Woman Wins Marathon</h1> <p>Park City native, <b>Laura Blake</b>, won the 27<sup>th</sup> Front Range Marathon over an elite field of the best long distance runners in the country. Laura's time of 2 hr. 28 min. 21 sec. was only 2 minutes off the women's course record set last year by Sarah Rawlings. Kathy Lasker and Lisa Peterson finished second and third, respectively. Laura's victory came on the heels of her performance at the NCAA Track and Field Championships, in which she placed second running for Colorado State.</p> <pre> Group Runner Time Origin ===== ====== ==== ====== Men 1. Peter Teagan 2:12:34 San Antonio, Texas Men 2. Kyle Wills 2:13:05 Billings, Montana Men 3. Jason Wu 2:14:28 Cutler, Colorado Women 1. Laura Blake 2:28:21 Park City, Colorado Women 2. Kathy Lasker 2:30:11 Chicago, Illinois Women 3. Lisa Peterson 2:31:14 Seattle, Washington </pre> <p>In an exciting race, <b>Peter Teagan</b> of San Antonio, Texas, used a finishing kick to win the men's marathon for the second straight year, in a time of 2 hr. 12 min. 34 sec. Ahead for much of the race, Kyle Wills of Billings, Montana, finished second, when he could not match Teagan's finishing pace. Jason Wu of Cutler, Colorado, placed third in a very competitive field.</p> <p>This year's race through downtown Boulder boasted the largest field in the marathon's history, with over 9500 men and 6700 women competing. Race conditions were perfect with low humidity and temperatures that never exceeded 85&deg;.</p> <!-- the following is required for all assignments -><br/> <br /> <i> This document was last updated on: <script type="text/javascript"> document.write(document.lastModified); </script> </i> </body></html>

  16. Examples on Text Table Run the following two html files Example 1: race1_no_pre.html http://barney.gonzaga.edu/~chenta/html04/class_demo/race1_no_pre.html Example 2: race1.html http://barney.gonzaga.edu/~chenta/html04/class_demo/race1.html select “Slide Show” for this slide Click this “Link” The result will be displayed on the browser Right click Windows and select “View Page Source” to show the HTML codes Use the same way for the rest of examples.

  17. <html><head> <!-- New Perspectives on HTML and XHTML Tutorial 4 Filename: race1.html Race Results Page - Text Table--> <title>Local Woman Wins Marathon</title> </head> <body> <h1 style="text-align: center; font-family: Arial, Helvetica, sans-serif"> Local Woman Wins Marathon</h1> <p>Park City native, <b>Laura Blake</b>, won the 27<sup>th</sup> Front Range Marathon over an elite field of the best long distance runners in the country. Laura's time of 2 hr. 28 min. 21 sec. was only 2 minutes off the women's course record set last year by Sarah Rawlings. Kathy Lasker and Lisa Peterson finished second and third, respectively. Laura's victory came on the heels of her performance at the NCAA Track and Field Championships, in which she placed second running for Colorado State.</p> <pre> Group Runner Time Origin ===== ====== ==== ====== Men 1. Peter Teagan 2:12:34 San Antonio, Texas Men 2. Kyle Wills 2:13:05 Billings, Montana Men 3. Jason Wu 2:14:28 Cutler, Colorado Women 1. Laura Blake 2:28:21 Park City, Colorado Women 2. Kathy Lasker 2:30:11 Chicago, Illinois Women 3. Lisa Peterson 2:31:14 Seattle, Washington </pre>

  18. race1.html (continued) <p>In an exciting race, <b>Peter Teagan</b> of San Antonio, Texas, used a finishing kick to win the men's marathon for the second straight year, in a time of 2 hr. 12 min. 34 sec. Ahead for much of the race, Kyle Wills of Billings, Montana, finished second, when he could not match Teagan's finishing pace. Jason Wu of Cutler, Colorado, placed third in a very competitive field.</p> <p>This year's race through downtown Boulder boasted the largest field in the marathon's history, with over 9500 men and 6700 women competing. Race conditions were perfect with low humidity and temperatures that never exceeded 85&deg;.</p> <!-- the following is required for all assignments --> <br/> <br /> <i> This document was last updated on: <script type="text/javascript"> document.write(document.lastModified); </script> </i> </body></html> Required for all HTML assignments

  19. 2. Graphical TablesDefining 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

  20. 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

  21. HTML Structure and Syntax ofa Table The general syntax of a graphical table is: beginning of the table structure table cells You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell. first row of three in the table second row of three in the table third row of three in the table end of the table structure

  22. two rows first row of two in the table Second row of two in the table A Simple Table and HTML Structure of a Table:filename:demo_table_1.htmldemo_table_1 The layout of a graphical table two columns <table> <tr> </tr> <tr> </tr> </table> beginning of the table structure end of the table structure

  23. table cells two rows first row of two in the table Second row of two in the table A Simple Table and HTML Structure of a Table:filename:demo_table_1.htmldemo_table_1 The layout of a graphical table two columns <table> <tr> </tr> <tr> </tr> </table> beginning of the table structure <td>First Cell</td> <td>Second Cell</td> You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell. <td>Third Cell</td> <td>Fourth Cell</td> end of the table structure

  24. Creating Headings with the <th> Tag • HTML provides the <th> tag for tableheadings • Text formatted with the <th> tag is centered within the cell and displayed in a boldface font • The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text

  25. We will start with a simple table …

  26. Second row of threein the table Third row of three in the table caption heading three rows <table> . . . . . . <tr> </tr> <tr> </tr> </table> table data/ description (td) We will insert values in the first row for “heading’ in the next slide <caption>GROUP MEMBERS</caption> <td>G#1</td> <td>John DOE </td> <td>Terry Smith</td> <td>Warren King</td> <td>G#2</td> <td>Steve Pullman </td> <td>Mary Waterman</td> <td>Allison Power</td>

  27. Second row of threein the table “Heading” (First) row of threein the table Third row of three in the table heading <table> <tr> </tr> <tr> </tr> </table> <caption>GROUP MEMBERS</caption> <tr> </tr> • <td>GROUP #</td> • <td>MEMBER 1</td> • <td>MEMBER 2</td> • <td>MEMBER 3</td> • <td><b>GROUP # </b></td> • Not an efficient way • What is the right way? • How right way? <td>G#1</td> <td>John DOE </td> <td>Terry Smith</td> <td>Warren King</td> <td>G#2</td> <td>Steve Pullman </td> <td>Mary Waterman</td> <td>Allison Power</td>

  28. Second row of threein the table “Heading” (First) row of threein the table Third row of three in the table heading <table> <tr> </tr> <tr> </tr> </table> <tr> </tr> • <th>GROUP #</th> • <th>MEMBER 1</th> • <th>MEMBER 2</th> • <th>MEMBER 3</th> <caption>GROUP MEMBERS</caption> <td>G#1</td> <td>John DOE </td> <td>Terry Smith</td> <td>Warren King</td> <td>G#2</td> <td>Steve Pullman </td> <td>Mary Waterman</td> <td>Allison Power</td>

  29. <table style="border-color:brown" border="5" cellspacing="0" cellpadding="4"> <caption>GROUP MEMBERS</caption> <tr> <th>GROUP #</th> <th>MEMBER 1</th> <th>MEMBER 2</th> <th>MEMBER 3</th> </tr> <tr> <td>G#1</td> <td>John DOE</td> <td>Terry Smith</td> <td>Warren King</td> </tr> <tr> <td>G#2</td> <td>Steve Pullman</td> <td>Mary Waterman</td> <td>Allison Power</td> </tr> </table> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>A SAMPLE TABLE</title> <style type="text/css"> </style> </head> <body> demo_table_1.html demo_table_1.html … … </body> </html>

  30. The following good/attractive examples are not available in the text. Make sure you study and practice thoroughly.

  31. Row of table headings table headings appear bold and centered over their columns Adding Table Headings to the Table Text in cells formatted with the <th> tag is bold and centered above each table column race2a.html race2a.html

  32. table caption caption text caption will be centered above the table Inserting a Table Caption Placing the caption text within a pair of <b> tags causes the caption to display as bold race2b.html race2b.html • - a value of “top” or “center” centers the caption above the table • - a value of “bottom” centers the caption below the table • - a value of “left” or “right” place the caption above the table to the left or right

  33. Identifying the Table Heading,Body, and Footer • HTML allows you to identify the different parts of your table using the <thead>, <tbody>, and <tfoot> tags • <thead> is used for the table heading • <tbody> is used for the table body • <tfoot> is used for the table footer • These tags do not format the table(and therefore, they are optional), but they do contain collections of rows called row groups

  34. table caption <table> <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead> <tbody> <tr> <td>Men</td> <td>1. Peter Teagan</td> <td>2:12:34</td> <td>San Antonio, Texas</td> </tr> <tr> <td>Men</td> <td>2. Kyle Wills</td> <td>2:13:05</td> <td>Billings, Montana</td> </tr> <tr> <td>Men</td> <td>3. Jason Wu</td> <td>2:14:28</td> <td>Cutler, Colorado</td> </tr> race2b.html race2b.html <! – continued for Women Row --> <tr> <td>Women</td> <td>1. Laura Blake</td> <td>2:28:21</td> <td>Park City, Colorado</td> </tr> <tr> <td>Women</td> <td>2. Kathy Lasker</td> <td>2:30:11</td> <td>Chicago, Illinois</td> </tr> <tr> <td>Women</td> <td>3. Lisa Peterson</td> <td>2:31:14</td> <td>Seattle, Washington</td> </tr> </tbody> </table> How many rows are needed in this table?

  35. Modifying the Appearance of a Table • You can modify the appearance of a table by adding: • gridlines • borders • background color • A table border can be added using the border attribute to the <table> tag • The syntax for creating a table border is: <table border=“value”> … </table> • value is the width of the border in pixel • By default, browsers display tables without table borders

  36. 1. Border 2. Cellspacing: amount of the space inserted between table cells 3. Cellpadding: amount of the space between the table text and the cell boarders Appearance of a Table

  37. Tables with Different Borders Values The effect on a table’s border when the border size is varied

  38. Only the outside border is affected by the border attribute; the internal gridlines are not affected Adding a 5-Pixel Border to a Table <table style="border-color: brown" border="5"> <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead> <tr> … race2c.html race2c.html

  39. Sizing a Table Cell Spacing • The cell spacing attribute controls the amount of space inserted between table cells • The syntax for specifying the cell space is: <table cellspacing=“value”> … </table> • 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

  40. Tables with Different Cell Spacing Values Different cell spacing values and a table’s appearance

  41. 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. race2d.html race2d.html

  42. Compare with Two Tables Setting the cellspacing to 0 reduces the width of the borders between individual table cells. This will not remove the border between the cells. race2d.html race2d.html Only set <table style=“…” border="5“> No cellspacing is set. race2c.html race2c.html

  43. Cell Padding • To control the space between the table text and the cell borders, add the cell padding attribute to the table tag • The syntax for this attribute is: <table cellpadding=“value”> … </table> • 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

  44. Tables with Different Cell Padding Values The effect of changing the cell padding value for a table

  45. Setting the Cell Padding to 4 Pixels table style= "bordercolor: brown" border="5" cellspacing="0“ cellpadding="4" width="70%“> <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead> race2e.html race2e.html A table with an increased amount of cell padding. By increasing the cell padding, you added needed space to the table.

  46. Working with Table and Cell Size • 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 • The syntax for specifying the table size is: <table width=“size” height=“size”> • sizeis the width and height of the table as measured in pixels or as a percentage of the display area

  47. Setting the Width of theTable to 70% of the page width table style= "bordercolor: brown" border="5" cellspacing="0“ cellpadding="4" width="70%“> <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead> race2e.html race2e.html

  48. Part IICreate Attractive Tables • Next, we will learn how to create more “advanced” and “attractive” tables for your Personal Web Page and your career in the future.

  49. 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 <td> or <th> tag. • The syntax for these attributes is: <tdrowspan=“value” colspan=“value”> … </td> • value is the number of rows or columns that the cell spans in the table

More Related