1. Introducing Web 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.  Each table in a Web page follows a basic structure consisting of the table element and a collection of table rows nested in the table element  What are the questions we need to ask ourselves?  What is the tag for creating table element?...  What else?  A Table must have rows and each of the rows must be divided into cells How to create HTML Tables?

5.  How to add rows? table cells table cells... How to create HTML Tables?

6. Table Cells  Table headings, the cells that identify the header contents  marked using a tag  Data cells  marked with the tag and are used for any content that is not considered a heading

7.  That’s it! Let’s build a simple table then…  With 2 rows and 2 cells in each row How to create HTML Tables?

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

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

10. 10 How about headings in a tables? row 1, cell 1 row 2, cell 2row 2, cell 1 row 1, cell 2 Heading 1Heading 2 Heading 1 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

11. 11  Spanning rows and columns  A spanning cell is a single cell that occupies more than one row or one column in the table  Attributes  COLSPAN: allows a cell span two columns  ROWSPAN: allows a cell span two rows More design of tables fruits appleorange Contact Phone Fax

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

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

14. Practice Exercise  Write html code for this table 14

15. Creating a Table caption  Caption is a part of Table describing the content of the table in a line 15

16. Creating a Table Caption  To create a table caption, add the caption element directly below the opening tag with the syntax content where content is the content of the table caption 16

17. Positioning a Table Caption  By default, table captions are placed at the top  Change the placement using “align” attribute content where position can be top / bottom / left / right 17

18. Formatting the appearance of HTML Tables… 18

19. Formatting Table appearance  Cell padding  space between the cell contents and the cell border 19

20. Cellpadding  To define the padding within table cells, add the attribute... to the table element, where value is the size of the padding space in pixels 20

21. Formatting Table appearance (contd.)  Cell spacing  The amount of space between table cells is known as the cell spacing 21

22. Cellspacing  To define the space between table cells, add the attribute... to the table element, where value is the space between table cells in pixels 22

23. Width and Height of Table  To set the width of the table to a specific value, add the width attribute...  Many browsers also support the height attribute... 23

24. Formatting Table Borders with HTML Attributes  A table frame specifies which sides of the table (or which sides of the table cells) will have borders... 24

25. Formatting Table Borders (contd.) 25

26. Formatting internal gridlines  A table rule specifies how the internal gridlines are drawn within the table... 26

27. Practice Exercise #2  Rest of the table 27

28. Formatting Tables with HTML Attributes  By default, browsers horizontally center the contents of table header cells and left-align the contents of table data cells  To control the horizontal alignment align="position“  To control the vertical alignment valign="position“  position = top / middle / bottom 28