1. 1 HTML Tables

2. 22 Objectives You will be able to Create tables in HTML.

3. HTML Tables HTML Tables are intended for display of tabular data. Also used to control page layout. Not a “legitmate” use of the table tag, but widely practiced by professional programmers. 3

4. 44 HTML Tables HTML tables permit you to have some control over layout while leaving some decisions to the browser.... Define rows inside a table... defines a row Define cells inside a row... defines a cell within a row... defines a “table heading” cell Put text or other HTML element into a cell Including another table

5. 5 Example: Eyeglass Prescription Let’s create this table as HTML in Visual Studio.

6. Create a New File in Visual Studio 6

7. HTML Page 7

8. 88 Visual Studio Sets Up Skeleton

9. 99 HTML Table Example: Eyeglass Prescription

10. Table Content To save some typing, let’s download the table content from the class web site: http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/004_HTML_Tables_and_Images/ 10 Click on Rx.txt to open in browser.

11. 11

12. 12 Eyeglass Prescription: Heading Eye Sphere Cyl Axis Prism Base PD

13. 13 Eyeglass Prescription: Rows 2 and 3 OD +1.25 -2.50 111 14.50 BI 28.00 OS +1.25 -7.00 121 14.50 BI 28.00

14. Copy table content into Visual Studio Copy table content in browser. Paste into element in Visual Studio. 14

15. 15

16. Save As... 16

17. Rx.html 17 Double click the file icon to view in your default browser.

18. Rx.html in Chrome 18

19. Add a Style Sheet 19 In Visual Studio: File > New File

20. The Style Sheet 20 Save on desktop as RxStyles.css

21. Link the Style Sheet 21 Save Rx.hml on the desktop

22. 22 The Table in Chrome

23. 23 Border s The “border” style in the tag only puts a border around the entire table. If we want borders around the cells we have to add style rules for and

24. 24 Borders for Cells

25. 25 Table with Borders on Cells

26. 26 Cell Spacing But I really want just one line between each pair of cells. The CSS property border-collapse controls this.

27. 27 Table with No Cell Border Spacing

28. 28 Cell Padding But the cells seem crowded now. To provide some margin inside each cell use the padding property on and

29. 29 Table with Cell Padding

30. 30 Alignment By default anything in a cell is aligned to the left and vertically centered. To specify horizontal alignment use text-align

31. 31 Table with Cell Text Alignment

32. 32 Alignment All data cells are now right aligned. The alphabetic cells should be centered. We can define a class for this.

33. 33 Alphabetic

34. 34 Alignment for Alphabetic

35. 35 Page in Chrome Alphabetic cells are now centered.

36. 36 How to Center the Table on the Page By default the table is in the upper left corner of the page. I would like to have it centered on the page. text-align:center doesn’t do this. It only applies to text within its container. margin:auto will make the margins on each side of the table equal. Center the table horizontally.

37. 37 RxStyles.css table { font-family: Arial, Sans-Serif; border:solid 1px; border-collapse: collapse; margin:auto; }

38. 38 Table in Chrome End of Section