Tables: Basic Elements

1. Tables: Basic Elements

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

3. Simple vs. Complex 1. Simple • 2. Complex

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

5. Table Elements • Rows • Columns • Cells • Borders • Headers • Caption

6. Table Elements: Rows • Row – a horizontal line of information

7. Table Elements: Columns • Column – vertical line of information

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

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

10. Table Elements: Headers • Headers – bold text that indicates the reason of the rows or columns

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

12. 3 Step Process • Is the table needed? • Plan the table • Design/Code the table

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

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

15. Table Coding • Four major tags in coding

16. Guided Practice