Adapted from  2012 Prentice Hall, Inc. All rights reserved. 5 th ed: th ed: SY306 Web and Databases for Cyber Operations Set 2: HTML5 Tables

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:

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

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 $ > Apple $0.25 Orange $ table1.html (2 of 2)

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

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)

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)

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

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

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