c122sep2214.notebook September 22, 2014

Transcription

1 This is using the border attribute next we will look at doing the same thing with CSS. 1

2 Validating the page we just saw. 2

3 This is a warning that recommends I use CSS. 3

4 This caused a warning. 4

5 Now I am putting in CSS to deal with the border. 5

6 Note, I did not close style and so I got just the white screen. 6

7 The border is just around table not the cells because I did not specify the. The attribute border does both so when it see this the table that has the attribute is changed. 7

8 Now I have specified the border should be applied to both the table and the td area so we see a border around all the cells. 8

9 Now I am doing something different for the td and notice the border attribute in the second table has no impact. 9

10 Notice that border can contain width information, type of line and color of line all in the border tag. As we will see in later slides, you can also use border style etc. I have removed the border attribute. 10

11 text align aligns the text within the boxes or cells 11

12 Centers all tables. 12

13 Border: can contain all of the border information or it can be broken down into style, width and color. 13

14 14

15 15

16 Note the example below which lets you set each part of the border individually. 16

17 Caption goes below the table. 17

18 Note that the th is not styled so there is no border on the cells. 18

19 Padding can change where the text is within the cell. 19

20 20

21 10px is top, 20px is right, 30px is bottom and 50px is left. Note that both td and th have a border. 21

22 22

23 Just two means top and bottom are the same (10px) and left and right are the same (50px). 23

24 24

25 The border style is solid on top, dotted on left and right and dashed on the bottom. The padding also uses just three. 25

26 26

27 Note the comment above. This uses thead, tfoot (which must come before tbody) and tbody. 27

28 I put the style for the th embedded in the body. Could have done it with the rest of the styles. colspan = "6" means the top row has one cell going across all 6 columns. Note that because colspan seems to be more about structure it is written as part of the table. 28

29 The 11:00 already has 2 rowspans that include in in col 4 and col6. Therefore I have to only give information for four columns (1,2,3,5). The 12:30 has all of the twos taken care of with rowspan except the first column. 29

30 30

31 31

32 32

33 33

34 34

35 Looking at images. It is considered best to size the image externally in Paint etc rather than make the resizing happen when the page is being loaded. 35

36 Aligning text and image. 36

37 Float to the left moves the image over to the left and float to the right moves the image over to the write. The text is wrapped around. 37

38 38

39 39

40 40

41 An approach to centering. 41

42 Recommended way to center an image. 42

43 43

44 When I wrote this the default was to put a border around a link if you did not specify border: none; Now I am seeing no border around both. We ned to experiment. 44

45 This is using border and we found that with border size you also need the style of the border 45

46 46

47 In these last few slides we have been using an image instead of words to click on. 47

48 48

49 Quick look at classes in CSS we will build on this next week. 49

50 Background image gets repeated all over the background. 50

51 51

52 Other things can have background such as a division or a paragraph. 52

53 53

54 Back to this problem originally none was there instead of 1px. If I add the style here then it works. border: 1px solid; 54

55 We also found that solid works alone, not just with the 1px. 55

56 Less slides then I thought there were a lot of duplicates. 56