Chapter 4 NotesChapter 4 Notes

Creating Tables in a WebsiteCreating Tables in a Website

Project for Chapter 4 Project for Chapter 4

Statewide Realty Web SiteStatewide Realty Web Site

Chapter 4: Creating Tables in a Web Site 3

Chapter ObjectivesChapter Objectives

Define table elementsDefine table elementsDescribe the steps used to plan, design, Describe the steps used to plan, design, and code a tableand code a tableCreate a borderless table to position Create a borderless table to position imagesimagesCreate a horizontal menu bar with text Create a horizontal menu bar with text linkslinks

Chapter 4: Creating Tables in a Web Site 4

Chapter ObjectivesChapter Objectives

Copy and paste HTML code to a new fileCopy and paste HTML code to a new fileCreate a borderless table to organize textCreate a borderless table to organize textCreate a table with borders and insert textCreate a table with borders and insert textChange the horizontal alignment of textChange the horizontal alignment of text

Chapter 4: Creating Tables in a Web Site 5

Chapter ObjectivesChapter Objectives

Add background color to rows and cellsAdd background color to rows and cellsAlter the spacing between and within cells Alter the spacing between and within cells using the using the cellspacingcellspacing and and cellpaddingcellpaddingattributesattributesInsert a caption below a tableInsert a caption below a tableCreate headings that span rows and Create headings that span rows and columns using the columns using the rowspanrowspan and and colspancolspanattributesattributes

Project Guidelines (Review)Project Guidelines (Review)

Project Guidelines ReviewProject Guidelines Review1.1. Plan the Web SitePlan the Web Site2.2. Analyze the needAnalyze the need3.3. Choose the content for the Web pageChoose the content for the Web page4.4. Determine how the pages will link to one Determine how the pages will link to one

anotheranother5.5. Establish what other links are necessary Establish what other links are necessary 6.6. Create the Web page and linksCreate the Web page and links7.7. Test all Web pages within the Web SiteTest all Web pages within the Web Site

Creating Web Pages with TablesCreating Web Pages with Tables

Tables Tables –– allow you to organize information on a allow you to organize information on a Web Page using HTML tags. Web Page using HTML tags. Table ElementsTable Elements

Row Row –– Horizontal line of informationHorizontal line of informationColumn Column –– Vertical line of informationVertical line of informationCell Cell –– intersection of a row and a columnintersection of a row and a column

Two Types of CellsTwo Types of CellsHeading cell Heading cell –– displays text as bold and center displays text as bold and center ––alignedalignedData cell Data cell –– displays normal text that is left displays normal text that is left -- alignedaligned

Tables Borders, Headers, Captions, Tables Borders, Headers, Captions, and Rulesand Rules

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

Rules AttributeRules Attribute

Allows a web developer to select which internal Allows a web developer to select which internal borders to show in a table. borders to show in a table.

Rules=Rules=““nonenone”” –– creates a table with no internal creates a table with no internal rulesrulesRules=Rules=““colcol”” –– creates a table with vertical rules creates a table with vertical rules between each column in the tablebetween each column in the tableRules=Rules=““rowsrows”” –– creates a table with horizontal creates a table with horizontal rules between each row in the tablerules between each row in the table

Assignment Dec. 3Assignment Dec. 3rdrd 20122012

Create a new folder in your Persistent storage Create a new folder in your Persistent storage called called

Chapter 4 Chapter 4 Copy and paste all templates from student html files Copy and paste all templates from student html files from chapter 4; chapter files. from chapter 4; chapter files.

PagesPages157157159159--160160162162--165165Save as Save as statewide.htmlstatewide.htmlValidate Validate statewide.htmlstatewide.html on validator.w3.orgon validator.w3.org

Chapter 4 Lesson 2 Chapter 4 Lesson 2

Three parts to coding a TableThree parts to coding a TablePlanningPlanningDesigning Designing Coding TableCoding Table

www.ikewebdesign.weebly.com

How to Create TablesHow to Create Tables

http://www.youtube.com/v/a9d2kLBQXwMhttp://www.youtube.com/v/a9d2kLBQXwM

Determine NeedDetermine Need

Not all pages require TableNot all pages require TableTable should be used to organize info so Table should be used to organize info so that it is easier for user to readthat it is easier for user to readUseful for creating structure and Useful for creating structure and organization organization

Planning a TablePlanning a Table

PlanningPlanningDraw on paper first Draw on paper first Determine layout and Determine layout and what kind of tags you what kind of tags you will usewill use

Coding the TableCoding the TableTableTable is on page 154 in chapter 4is on page 154 in chapter 4

Table 4Table 4--11Four main tags that will be used in coding a table. Four main tags that will be used in coding a table.

<table></table><table></table>Indicates the start and end of a tableIndicates the start and end of a tableAll other table tags are inserted within these tagsAll other table tags are inserted within these tags

<<trtr></></trtr>>Indicates the start and end of a table rowIndicates the start and end of a table rowRow consist of heading or data cellsRow consist of heading or data cells

<<thth></></thth>>Indicates the start and end of a data cell in a table heading (aIndicates the start and end of a data cell in a table heading (also lso called a heading cell)called a heading cell)Table headings default to bold text and center alignmentTable headings default to bold text and center alignment

<td></td><td></td>Indicates the start and end of a data cell in a tableIndicates the start and end of a data cell in a tableData cells default to normal text and left Data cells default to normal text and left -- alignmentalignment

Table 4Table 4--11

Table Tag AttributesTable Tag AttributesTable is on page 156Table is on page 156

Table 4Table 4--2 2 <table></table><table></table>

AlignAlignBgcolorBgcolorBorderBorderCellspacingCellspacingCellpaddingCellpaddingColsColswidthwidth

Table Tag Attributes (cont) Table Tag Attributes (cont) Table is on page 156 Table is on page 156

Table 4Table 4--2 2 <<trtr></></trtr>>

AlignAlignBgcolorBgcolorValignValign

<<thth></></thth>>Align and Align and bgcolorbgcolor

<td></td><td></td>ColspanColspanRowspanRowspanvalignvalign

Table 4Table 4--22

Assignment Dec 6, 2012Assignment Dec 6, 2012

Write Table on pages 154 and 156Write Table on pages 154 and 156

Statewide Realty ProjectStatewide Realty ProjectPages Pages

169169--170170172172--174174Save as Save as complex.htmlcomplex.html in you chapter 4 folder in you chapter 4 folder Validate Validate complex.htmlcomplex.html @ validator.w3.org@ validator.w3.org

Chapter 4 Lesson 3Chapter 4 Lesson 3

CellspacingCellspacingCellpaddingCellpaddingCaptionsCaptions

Assignment page 178Assignment page 178--181181Working in Working in vacancy.htmlvacancy.html

Spanning Rows and ColumnsSpanning Rows and ColumnsUsing Using colspancolspan attribute and attribute and rowspanrowspan attributeattributeAssignment pages 184Assignment pages 184--192192Working in Working in bedroom.htmlbedroom.html

CellspacingCellspacing, , CellpaddingCellpadding & Captions& Captions

CellspacingCellspacing defines the number of pixels defines the number of pixels of space between cells in a tableof space between cells in a tableCellpaddingCellpadding defines the number of pixels defines the number of pixels of space between a cell's contents and its of space between a cell's contents and its borderborderCaptions are added to tables usingCaptions are added to tables using

<captions></captions> <captions></captions>

Using Using cellspacingcellspacing and and cellpaddingcellpadding

http://www.youtube.com/v/6-7oMx2kn_U

Spanning Rows and ColumnsSpanning Rows and Columns

ColspanColspan attribute of the <attribute of the <thth> and <td> > and <td> tag sets a number of columns spanned by tag sets a number of columns spanned by a cell. a cell. RowspanRowspan attribute of the <attribute of the <thth> or <td> > or <td> tag sets a number of rows spanned by a tag sets a number of rows spanned by a cell. cell.

Using Spanning Rows and ColumnsUsing Spanning Rows and Columns

http://www.youtube.com/v/p0JGWAj0F24

Assignment for December 10Assignment for December 10thth, 2012, 2012

Part 1 Part 1 Vacancy.htmlVacancy.htmlPagePage

Assignment page 178Assignment page 178--181181Working in Working in vacancy.htmlvacancy.html

Part 2 Part 2 Bedroom.htmlBedroom.htmlPagePage

Assignment pages Assignment pages 184184--192192Working in Working in bedroom.htmlbedroom.html

Notes for QuizzesNotes for QuizzesYou can determine the height and width of an image using a paintYou can determine the height and width of an image using a paint or image or image editing program. editing program. Each Web page in a multipage Web site should have a link back toEach Web page in a multipage Web site should have a link back to the the home pagehome pageTo validate a Web site you visit the Web site validator.w3.org.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 pageClick the Print icon on the Command bar to print the Web pageYou use HTML tags to define the Web page structure. You use HTML tags to define the Web page structure. To bring attention to the text in the header, you can add a backTo bring attention to the text in the header, you can add a background ground color to the table data cell.color to the table data cell.When you set the table border, the number represents the number When you set the table border, the number represents the number of pixels of pixels you want the border to be.you want the border to be.CellspacingCellspacing defines the number of pixels of space between cells in a table.defines the number of pixels of space between cells in a table.CellpaddingCellpadding defines the number of pixels of space between the celldefines the number of pixels of space between the cell’’s s contents and its border. contents and its border. A Caption can be used to further explain the main purpose of theA Caption can be used to further explain the main purpose of the table. table.

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

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