1. Adapted from  2012 Prentice Hall, Inc. All rights reserved. 5 th ed: 2.10-2.13 4 th ed: 4.10-4.15 SY306 Web and Databases for Cyber Operations Set 2: HTML5 Tables

2. Adapted from  2012 Prentice Hall, Inc. All rights reserved. Table Basics - used to organize data with a logical relationship in 2D grids –Attributes: border –Caption –Sections: – –Actual contents:

3. Adapted from  2012 Prentice Hall, Inc. All rights reserved. A simple HTML5 table tag opens a table --> tag summarizes the table's --> Table of Fruits (1 st column) and Their Prices (2 nd column) table1.html (1 of 2) Table Example #1

4. Adapted from  2012 Prentice Hall, Inc. All rights reserved. section appears first in the table --> inserts a table row --> Fruit Price section appears last in the table --> Total $3.75 --> Apple $0.25 Orange $0.50... table1.html (2 of 2)

5. Adapted from  2012 Prentice Hall, Inc. All rights reserved. Table Example #2

6. Adapted from  2012 Prentice Hall, Inc. All rights reserved. A more complex sample table <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> Camelid comparison Approximate as of 6/2011 # of Humps Indigenous region Spits? Produces wool? table2.html (1 of 2)

7. Adapted from  2012 Prentice Hall, Inc. All rights reserved. Camels (bactrian) 2 Africa/Asia Yes Llamas 1 Andes Mountains Yes table2.html (2 of 2)

8. Adapted from  2012 Prentice Hall, Inc. All rights reserved. Exercise #1: Write HTML5 to generate this table:

9. Adapted from  2012 Prentice Hall, Inc. All rights reserved. Exercise #2: Write HTML5 to generate this table:

10. Adapted from  2012 Prentice Hall, Inc. All rights reserved. Exercise #3: Write HTML5 to generate this table: