1 / 37

Chapter 4

Chapter 4. Creating Tables in a Web Site. Chapter Objectives. Define table elements Describe the steps used to plan , design , and code a table Create a borderless table to position images Create a horizontal menu bar with text links. Chapter Objectives.

tacy
Download Presentation

Chapter 4

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

  2. Chapter Objectives • Definetable elements • Describe the steps used to plan, design, and code a table • Create a borderlesstable to positionimages • Create a horizontalmenubar with textlinks Chapter 4: Creating Tables in a Web Site

  3. Chapter Objectives • Copy and pasteHTMLcode to a new file • Create a borderlesstable to organize text • Create a table with borders and insert text • Change the horizontalalignment of text Chapter 4: Creating Tables in a Web Site

  4. Chapter Objectives • Addbackgroundcolor to rows and cells • Alter the spacingbetween and withincells using the cellspacing and cellpadding attributes • Insert a captionbelow a table • Createheadings that spanrows and columns using the rowspan and colspan attributes Chapter 4: Creating Tables in a Web Site

  5. Introduction • Project uses tables • learn about elements used in table • plan, design, and code a table • create tables to organize text and images • table column to create menu bar with text links • enhance tables using attributes and formats • borders, colors, spacing, blank cells, and adding a caption Project 4: Creating Tables in a Web Site

  6. Page 1 – Statewide Realty imagepositioned In borderlesstable Project 4: Creating Tables in a Web Site

  7. By Complex – Statewide Realty menu bar table withbackground colorin header row Project 4: Creating Tables in a Web Site

  8. By Vacancy– Statewide Realty cellspacing andcellpaddingattributes used tospace text in table tablecaption Project 4: Creating Tables in a Web Site

  9. By Bedrooms – Statewide Realty colspanattributeused forheadingspanning four columns colspanattributeused forheadingseach spanning three columns rowspanattributeused forheadingseachspanningthree rows Project 4: Creating Tables in a Web Site

  10. Table Elements • Tables consist of rows, columns, and cells, much like a spreadsheet • row – horizontal line of information • column – vertical line of information • cell – intersection of row and column • heading cell – displays text as bold and center-aligned • data cell – displays normal text that is left aligned Project 4: Creating Tables in a Web Site

  11. Table Borders, Headers, Captions, and Rules More on Web • table border is the line that encloses the perimeter of a table • table header – is the same as a heading cell, any cell with bold text that indicates purpose of the row or column • table caption – descriptive text located above or below the table describing the purpose of the table • rules attribute – allows developer to select which internal borders to show in a table • rules=“none” no internal rules • rules=“cols” creates table with vertical rules between each column • rules=“rows” creates table with horizontal rules between each row Project 4: Creating Tables in a Web Site

  12. Planning, Designing, and Coding a Table • Creating tables for Web Page Three step Process • determining if a table is needed • planning the table • coding the table Project 4: Creating Tables in a Web Site

  13. Determining If a Table Is Needed • table should be used: • organize information on a Web page making it easier to read • needs to display a structured, organized list of information • includes text and images that must be positioned in a very specific manner Project 4: Creating Tables in a Web Site

  14. Planning a Table More on Web • plan how information will appear in the table and then create a good design • sketch the table on paper before writing any HTML code • saves time when determining HTML tags • how many rows and columns to create • if table will include headings • include headings that span rows and columns • include a table caption Project 4: Creating Tables in a Web Site

  15. Coding a Table • table rows indicated in HTML code • <tr> and </tr> tags • table heading indicated in HTML code • <th> and </th> tags • appears bold and centered • table data indicated in HTML code • <td> and </td> tags • appears normal and left-aligned Project 4: Creating Tables in a Web Site

  16. Coding a Table Project 4: Creating Tables in a Web Site

  17. Table Tag Attributes Project 4: Creating Tables in a Web Site

  18. Entering the HTML Tags to Define the Web Page Structure Chapter 4: Creating Tables in a Web Site

  19. Creating a Horizontal Menu Bar with Text Links • menu bar placed at the top or left side of page prevents user from having to search the page for navigation links • cellspacing attribute set amount of space between cells • gives table additional white space, creates more polishedreadable look • width attribute – changes width of each column relative to entire table • percentage mode – preferred if window resized in browser • pixels mode – less flexible method Project 4: Creating Tables in a Web Site

  20. Creating a Horizontal Menu Bar with Text Links • If necessary, click line 18 • Enter the HTML code shown in Table 4-4, pressing ENTER after each line • Press the ENTER key once Chapter 4: Creating Tables in a Web Site

  21. Creating a Horizontal Menu Bar with Text Links More on Web pipe symbol usedas divider betweenlink text list of text linksin data cellscreates menu bar Project 4: Creating Tables in a Web Site

  22. Validating a Web Page • OpenInternet Explorer and navigate to the Websitevalidator.w3.org • Click the Validate by File Uploadtab • Click the Browse button • Locate the statewide.html file on your storagedevice and click the filename • Click the Open button in the Choose file dialog box and the file name will be inserted into the File box • Click the Checkbutton Chapter 4: Creating Tables in a Web Site

  23. Viewing a Web Page • In Internet Explorer, click the Address bar to select the URL on the Addressbar • TypeE:\HTML\ChapterFiles\Chapter04\ statewide.html on the Addressbar of your browser and pressENTER to display the Webpage Chapter 4: Creating Tables in a Web Site

  24. Viewing a Web Page imagepositioned In borderlesstable horizontalmenu bar Project 4: Creating Tables in a Web Site

  25. Creating a Table with Borders and Inserting Text <table> with border=“5” andwidth=75% header tagsand text datacells Project 4: Creating Tables in a Web Site

  26. Validating, Viewing, and Printing the Web Page Using the Browser • Click the Internet Explorer button on the taskbar • Use the W3C validator service to validate the complex.html Web page • Use the Back button or click the StatewideRealtyHomePagebutton on the taskbar to return to the Statewide Realty home page • Click the By Complex link to display the By Complex page • Click the Print button on the Commandbar to print the StatewideRealty - ByComplexWebpage Chapter 4: Creating Tables in a Web Site

  27. Validating, Viewing, and Printing the Web Page Using the Browser imagepositioned in borderless table horizontalmenu bar table withborder Project 4: Creating Tables in a Web Site

  28. Adding Cellspacing and Cellpadding and a Caption • cellspacing defines the number of pixels of space between cells in a table • cellpadding defines the number of pixels of space within a cell in a table • cellspacing=“2” cellpadding=“5” • caption describes the purpose of a table <caption align=“bottom”><em>Listing of movies by actor</em></caption> Project 4: Creating Tables in a Web Site

  29. Adding Cellspacing and Cellpadding and a Caption with cellpaddingand cellspacing tablecaption Project 4: Creating Tables in a Web Site

  30. Creating the Headings That Span Rows rowspanspanning3 rows colspanspanning3 columns Project 4: Creating Tables in a Web Site

  31. Spanning the Main Heading across All Columns More on Web first colspan Project 4: Creating Tables in a Web Site

  32. Viewing and Printing the Web Page colspanattributeused forheadingspanning four columns colspanattributeused forheadingseach spanning three columns rowspanattributeused forheadingseachspanningthree rows Project 4: Creating Tables in a Web Site

  33. Chapter Summary • Definetableelements • Describe the steps used to plan, design, and code a table • Create a borderlesstable to positionimages • Create a horizontalmenubar with textlinks Chapter 4: Creating Tables in a Web Site

  34. Chapter Summary • Copy and pasteHTMLcode to a new file • Create a borderlesstable to organize text • Create a table with borders and insert text • Change the horizontalalignment of text Chapter 4: Creating Tables in a Web Site

  35. Chapter Summary • Addbackgroundcolor to rows and cells • Alter the spacingbetween and withincells using the cellspacing and cellpadding attributes • Insert a captionbelow a table • Createheadings that spanrows and columns using the rowspan and colspan attributes Chapter 4: Creating Tables in a Web Site

  36. Homework # 7 • In the Lab 3 page HTML 198-199 • Creating Linked Schedules • SeeINF 186 Computer Assignment 7 Web page for details, hints, and requirements for the assignment Project 4: Creating Tables in a Web Site

  37. Project 4 Complete Creating Tables in a Web Site

More Related