Tables: Basic Elements Header 1Header 2Header 3 Row 1, Column 1Row 1, Column 2Row 1, Column 3 Row 2, Column 1Row 2, Column 2Row 2, Column 3 Row 3, Column 1Row 3, Column 2Row 3, Column 3

Objectives 1. Identify table elements 2. Create a table by planning, designing, and coding 3. Design a table without a border 4. Design a table with a border

Simple vs. Complex 1. Simple 2. Complex

Tables and Web Pages Present information using columns and rows  Makes content clear and easy to read  Organize text, images, links, etc  Wrap text around images Web designers can use simple and/or complex tables

Table Elements Rows Columns Cells Borders Headers Caption

Table Elements: Rows  Row – a horizontal line of information

Table Elements: Columns  Column – vertical line of information

Table Elements: Cells  Cell – Intersection of a row and column 1. Heading cells – display text as bold and centered 2. Data cells – display normal text that is left-aligned

Table Elements: Borders Borders – lines that cover the edges of the table

Table Elements: Headers Headers – bold text that indicates the reason of the rows or columns Header 1Header 2Header 3Header 4

Table Elements: Caption Caption - text above or below the table that explains the purpose of the table OR a caption could be here to let a reader know more information of this table A caption could be here to let a reader know more information of this table

3 Step Process 1. Is the table needed? 2. Plan the table 3. Design/Code the table

Is the table needed? A table is appropriate when it makes the Web page easier to read  Therefore, not all Web pages need Tables

Table Planning Plan how much information is going to be needed Create a good design Sketch the end result of a table before coding

Table Coding Four major tags in coding TagPurpose Tells when a table begins/ends All other codes belong within these two tags Informs when a new row should begin/end Heading or data cell Indicates when a new column should begin/end Default heading cell Shows when a data cell should begin/end Default data cell

Guided Practice BlockClass 1 st Business Essentials 2 nd Fundamentals of Web Design 3 rd Advanced Web Design 4 th Planning BlockClass 1 st Business Essentials 2 nd Fundamentals of Web Design 3 rd Advanced Web Design 4 th Planning