1. TABLES

2. Session Checklist ► Learn the ways that tables can help you organize data on your Web site ► Learn how to prepare a spreadsheet-like table that you can use as a basis for complex tables ► Improve the look of your tables by adding borders, aligning data, and spanning cells across columns and rows ► Use some advanced page layout tricks to make more powerful tables

3. Tables in HTML ► Many Web sites use tables ► Most HTML tutorials begin teaching HTML tables ► Analogies with row and columns of a spreadsheet ► Tables could contain various kind of information

4. How Tables Help You Organize Data ► Present newsletter information in columns ► Display tabular information such as price lists and inventories ► Add borders around text and graphic images in a uniform manner ► Format your entire Web page layout, including the placement of graphics, text, banners, sidebars, headers and footers

5. Example of table

6. Preparing Columnar Data Tables ► Tables consist of rows and columns ► Evaluate with great attention the purpose of the table ► Tables can be nested ► Tables require several different kinds of table-related command tags

7. Creating tables ► All tables begin with the tag ► Specify rows with the tag ► Specify columns with the tag ► Top-to-Bottom & Left-to-Right

8. <TABLE> Title Title Quantity Quantity Price Price HTML Programming HTML Programming 24 24 € 19.95 € 19.95 Web sites Web sites 13 13 € 7.95 € 7.95 CSS for dummies CSS for dummies 52 52 € 22.95 € 22.95</TABLE>

10. Specifying the header cells <TABLE> Title Title Quantity Quantity Price Price HTML Programming 24 € 19.95 Web sites 13 € 7.95 CSS for dummies 52 € 22.95 </TABLE> … tag … tag

11. Specifying the rows <TABLE> Title Title Quantity Quantity Price Price HTML Programming HTML Programming 24 24 € 19.95 € 19.95 … …</TABLE> … tag … tag

12. Specifying the columns <TABLE> Title Title Quantity Quantity Price Price HTML Programming HTML Programming 24 24 € 19.95 € 19.95 … …</TABLE> … tag … tag

14. Adding borders

15. Aligning data Title Title

16. ALIGN attribute ► Defines HORIZONTAL alignment ► Works both with HEADER and DATA cells ► Values: LEFT, RIGHT, CENTER VALIGN attribute ► Defines VERTICAL alignment ► Values: TOP, MIDDLE, BOTTOM

17. CAPTION tag Book Store Book Store Book Store Book Store

18. COLSPAN and ROWSPAN attributes Book Store Book Store Book Store Book Store

19. COLSPAN and ROWSPAN attributes Books Book store

20. Adjusting Table Spacing

21. Table Space with Percentages

22. Exercise