Chapter 4 Notes. Creating Tables in a Website

Transcription

1 Chapter 4 Notes Creating Tables in a Website

2 Project for Chapter 4 Statewide Realty Web Site

3 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 4: Creating Tables in a Web Site 3

4 Chapter Objectives Copy and paste HTML code to a new file Create a borderless table to organize text Create a table with borders and insert text Change the horizontal alignment of text Chapter 4: Creating Tables in a Web Site 4

5 Chapter Objectives Add background color to rows and cells Alter the spacing between and within cells using the cellspacing and cellpadding attributes Insert a caption below a table Create headings that span rows and columns using the rowspan and colspan attributes Chapter 4: Creating Tables in a Web Site 5

6 Project Guidelines (Review) Project Guidelines Review 1. Plan the Web Site 2. Analyze the need 3. Choose the content for the Web page 4. Determine how the pages will link to one another 5. Establish what other links are necessary 6. Create the Web page and links 7. Test all Web pages within the Web Site

7 Creating Web Pages with Tables Tables allow you to organize information on a Web Page using HTML tags. Table Elements Row Horizontal line of information Column Vertical line of information Cell intersection of a row and a column Two Types of Cells Heading cell displays text as bold and center aligned Data cell displays normal text that is left - aligned

8 Tables Borders, Headers, Captions, and Rules Table border is the line that encloses the perimeter of the table. Table header is the same as a heading cell (it is any cell with bold text that indicates the purpose of the row or column) Table Caption is descriptive text located above or below the table that further describes the purpose of the table

9 Rules Attribute Allows a web developer to select which internal borders to show in a table. Rules= none none creates a table with no internal rules Rules= col col creates a table with vertical rules between each column in the table Rules= rows rows creates a table with horizontal rules between each row in the table

10 Assignment Dec. 3 rd 2012 Create a new folder in your Persistent storage called Chapter 4 Copy and paste all templates from student html files from chapter 4; chapter files. Pages Save as statewide.html Validate statewide.html on validator.w3.org

11 Chapter 4 Lesson 2 Three parts to coding a Table Planning Designing Coding Table

12 How to Create Tables

13 Determine Need Not all pages require Table Table should be used to organize info so that it is easier for user to read Useful for creating structure and organization

14 Planning a Table Planning Draw on paper first Determine layout and what kind of tags you will use

15 Coding the Table Table is on page 154 in chapter 4 Table 4-14 Four main tags that will be used in coding a table. <table></table> Indicates the start and end of a table All other table tags are inserted within these tags <tr></ ></tr> Indicates the start and end of a table row Row consist of heading or data cells <th></ ></th> Indicates the start and end of a data cell in a table heading (also called a heading cell) Table headings default to bold text and center alignment <td></td> Indicates the start and end of a data cell in a table Data cells default to normal text and left - alignment

16 Table 4-14

17 <table></table> Align Bgcolor Border Cellspacing Cellpadding Cols width Table Tag Attributes Table is on page 156 Table 4-24

18 <tr></ ></tr> Align Bgcolor Valign Table Tag Attributes (cont) <th></ ></th> Table is on page 156 Align and bgcolor <td></td> Colspan Rowspan valign Table 4-24

19 Table 4-24

20 Assignment Dec 6, 2012 Write Table on pages 154 and 156 Statewide Realty Project Pages Save as complex.html in you chapter 4 folder Validate validator.w3.org

21 Cellspacing Cellpadding Captions Chapter 4 Lesson 3 Assignment page Working in vacancy.html Spanning Rows and Columns Using colspan attribute and rowspan attribute Assignment pages Working in bedroom.html

22 Cellspacing, Cellpadding & Captions Cellspacing defines the number of pixels of space between cells in a table Cellpadding defines the number of pixels of space between a cell's contents and its border Captions are added to tables using <captions></captions>

23 Using cellspacing and cellpadding

24 Spanning Rows and Columns Colspan attribute of the <th< th> > and <td> tag sets a number of columns spanned by a cell. Rowspan attribute of the <th< th> > or <td> tag sets a number of rows spanned by a cell.

25 Using Spanning Rows and Columns

26 Assignment for December 10 th, 2012 Part 1 Vacancy.html Page Assignment page Working in vacancy.html Part 2 Bedroom.html Page Assignment pages Working in bedroom.html

27 Notes for Quizzes You can determine the height and width of an image using a paint or image editing program. Each Web page in a multipage Web site should have a link back to the home page To validate a Web site you visit the Web site validator.w3.org. Click the Print icon on the Command bar to print the Web page You use HTML tags to define the Web page structure. To bring attention to the text in the header, you can add a background color to the table data cell. When you set the table border, the number represents the number of pixels you want the border to be. Cellspacing defines the number of pixels of space between cells in a table. Cellpadding defines the number of pixels of space between the cell s contents and its border. A Caption can be used to further explain the main purpose of the table.

28 Notes for Quizzes CONT. Tables allow you to organize information on a Web page using HTML tags. A row is a horizontal line of information. A heading cell displays text as bold and center aligned. A table is the line that encloses the perimeter of the table. The rules attribute allows a Web developer to select which internal nal borders to show in a table. Creating a table for a Web page is a three-step process that does NOT include: creating a separate folder for table elements. Before writing any HTML code, sketch the table on paper. The <tr< tr> > tag indicates the start and end of a table row. The cols attribute of the <table> tag defines the number of columns. When you do not specifically identify the border size, the table will be borderless.

29 Notes for Quizzes CONT. The colspan attribute of the <th< th> > or <td> tag sets a number of columns spanned by a cell. You should not use different color backgrounds for the same level l or type of information to maintain reader interest. If you use size=+1 in the <font> tag the font size will be slightly larger than normal. A simple way to create additional column spans is to copy the code you already created. The font of #ffffff# does not specify a black font color. Text contained within <th< th> > tags default to bold and center aligned. You can save a Web page on a variety of storage media including a USB flash drive or a DVD. A data cell displays normal text that is left-aligned. Headers can be used by non-visual browsers to identify table content. Using rules= cols cols creates a table with vertical rules between each column in the table.