1. 1 HTML tables http://jjcweb.jjay.cuny.edu/ssengupta/

2. 2 Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text

3. 3 A snapshot of HTML Table

4. 4  What are the questions we need to ask ourselves?  What is the tag for that? o …  What else?  A Table must have rows and each of the rows must be divided into cells  add a row o …  add a cell (column) o …  That’s it! Let’s build a simple table then…with 2 rows and 2 cells in each row How to create HTML Tables?

5. 5 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Code to create HTML Table row 1, cell 1 row 2, cell 2row 2, cell 1 row 1, cell 2 row 1, cell 1 row 2, cell 2row 2, cell 1 row 1, cell 2 Sometimes, this looks nice. But sometime, you may need the actual lines

6. 6 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Actual lines = border (attribute) row 1, cell 1 row 2, cell 2row 2, cell 1 row 1, cell 2 How can I add borders? Width of the borders

7. 7  Let’s build a simple table with 1 row and 3 cells. Simple Exercise #1

8. 8  Let’s build a simple table with 1 row and 3 cells. Simple Exercise #1: Solution row 1, cell 1 row 1, cell 2 row 1, cell 3

9. 9 How about headings in a tables? row 1, cell 1 row 2, cell 2row 2, cell 1 row 1, cell 2 HeadingHeading 2 Heading Heading 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tag for heading?? … cell content is made bold and centered

10. 10  COLSPAN: allows a cell span two columns  ROWSPAN: allows a cell span two rows More design of tables fruits appleorange ContactPhone Fax

11. 11  COLSPAN: allows a cell span two columns  example fruits apple orange Attributes for cell tags fruits appleorange fruits appleorange

12. 12  ROWSPAN: allows a cell span two rows  example contact phone fax Attributes for cell tags (contd.)

13. 13  …  example My contact info contact phone fax Table name: caption

14. 14  WIDTH, HEIGHT: set table size or content size o in pixels o percentage – percent of the display area  example fruits apple fruits apple Width and height of table

15. 15  http://www.w3schools.com/html/html_tables.asp http://www.w3schools.com/html/html_tables.asp  http://www.htmlcodetutorial.com/tables/ http://www.htmlcodetutorial.com/tables/ More resources on HTML Table

16. Reminder: First Project Update demo Oct 27 & Oct 28 16

17. Midterm Examination Discussion 17