1 HTML tables

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

3 A snapshot of HTML Table

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 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 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  Let’s build a simple table with 1 row and 3 cells. Simple Exercise #1

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 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  COLSPAN: allows a cell span two columns  ROWSPAN: allows a cell span two rows More design of tables fruits appleorange ContactPhone Fax

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

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

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

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   More resources on HTML Table

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

Midterm Examination Discussion 17