1. CHAPTER 11 Tables

2. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents and columns and add whitespace to a page Overall Page Structure  To divide a page into major sections  Have a left column for navigational items  Have a main column for content Holding Together a Multipart (sliced) Image

3. Basic Table Structure Cell Table Row Column

4. Basic Table Structure Tags   Identifies the table   Table Row   Table Data Cell

5. Basic Table Structure In NotePad cell cell cell

6. Basic Table Structure Table Content  Text  Graphic  Nested Tables

7. Let’s Try It Complete Exercise 11-1: Making A Simple Table Try writing the code for the table shown below. You can open NotePad or just write it down on paper. Cell 1Cell 2 Cell 3Cell 4 Cell 5Cell 6 Cell 7Cell 8 Cell 9Cell 10

8. Spanning Cells Spanning  The stretching of a cell to cover several rows or columns  Gives more flexibility when designing tables Column Spanning  Cell 1  colspan attribute within a tag  Stretches a cell to the right and replaces the cells next to it  Do not add more columns than what the table has

9. HTML Code Cell 1 Cell 3 Cell 4 Cell 1 Cell 3Cell 4 Spanning Cells

10. Let’s Try It Complete Exercise 11-2: Column Spans Try writing the code for the table shown below. You can open NotePad or write it down on paper. Cell 1 Cell 2Cell 3Cell 4 Cell 5Cell 6 Hints: The second row shows you the total number of columns When a cell is spanned over, its tag does not appear

11. Bell Ringer On a separate sheet of paper, write the following code for the table below: HTML Table Practice Cell 2Cell 3 Cell 4Cell 5 Cell 6

12. Bell Ringer Answer Key HTML Table Practice Cell 2 Cell 3 Cell 4 Cell 5 Cell 6

13. Row Spans Row Span  Causes the cell to stretch downward to span across several rows  The that was spanned over does not appear in the HTML code. Cell 1 Cell 2 Cell 4 Cell 1 Cell 2 Cell 4

14. Let’s Try It Complete Exercise 11-3: Row Spans Try writing the code for the table shown below. Use NotePad or write it on a sheet of paper. Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Hints: Rows always span down, so cell 2 is part of the first row. Cells that are spanned over do not appear in the table code.

15. Let’s Try It (Answer Key) Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6

16. Nesting Tables Nested Tables  Putting one table inside of another table cell cell Cell

17. Designing Tables 1. Sketch It!  Photoshop  Microsoft Word  Paper Pencil 2. Find the Grid  Draw a grid over the sketch making sure there is a line at each significant division of information  Reveals total number of rows and columns 3. Plan the Spans  Use paper and pencil 4. Start Building

18. Bell Ringer Write, on a separate sheet of paper or using NotePad, the code used to create the following tables: 1. 2. HomeResumeFamilyLikesDislikes Home Resume Family Likes Dislikes

19. Bell Ringer Answer Key 1. Home Resume Family Likes Dislikes 2. Home Resume Family Likes Dislikes

20. Let’s Try It Complete Exercise 11-4: Finding the Table Structure

21. HTML For Tables Formatting the whole table  Attributes within the tag allow for  Thickness of the border around the table  Dimensions of the table  Amount of space within and between table cells  Background color for the table

22. Formatting Tables Border thickness   Indicates, in pixels, the thickness of the border around the outside edge of the table.  0 will remove the border cell 1 cell 2 cell 3 cell 4 Cell 1Cell 2 Cell 3Cell 4

23. Formatting Tables Border thickness   Indicates, in pixels, the thickness of the border around the outside edge of the table.  0 will remove the border cell 1 cell 2 cell 3 cell 4 Cell 1Cell 2 Cell 3Cell 4

24. Formatting Tables Table Width and Height  Specify using pixels or percentage   Table width set to 100% will fill the entire available width of the page  Table will expand to be just wide enough to fit the contents within it by default

25. Formatting Tables Cell Padding  The amount of space held between the contents of the cell and the cell border  Cell Spacing  The amount of space held between cells  Background Color  Bgcolor attribute  Background Patterns  Use a tiled image as the background for a table  Background attribute 

26. Controlling Individual Cells Some of the more interesting table settings are controlled at the cell level  These include  Column and row spanning  Cell dimensions  Alignment of cell contents  Background color for the cell  Use these attributes in the tag 

27. Controlling Individual Cells Cell content alignment  align and valign attributes  Control the alignment of elements within cells  align - Use to position elements horizontally in a cell Left Right Center  Valign – positions elements vertically in the cell Top Center Bottom LeftCenteredRight Top Center Bottom

28. Controlling Individual Cells Cell background color   Specifies the background color to be used in the table cell  Cell color settings override any colors set at the table or row level Cell 1Cell 2 Cell 3Cell 4

29. Let’s Try It Complete Exercise 11-5: Building A Table

30. Using Tables for Alignment Used to control the display of the page  Centering in the Window  Create a one celled table  Set width and height to 100%  Set alignment to center and middle  Page Structure  Two column layout commonly used One column for links The other for content

31. Where Tables Go Wrong Expanding text in cells  Different browsers interpret font codes differently Collapsing Cells  Cells may disappear if they contain no content Shifting Columns Avoiding Extra Whitespace  Begin with the border, cellpadding, and cellspacing all set to 0 in the tag.

32. Test Yourself 1. What are the parts of an HTML table? What tags define them? 2. What attribute adds space between table cells? Where is it placed? 3. What attribute would you use to position text at the bottom of a cell? Where does that attribute go? 4. How do you change the background color of a cell? What happens if there is already a background color set for the table?

33. Test Yourself 5. Write the code for the table below. Be sure to consider how the text is aligned in each cell.  The table is 400 px wide  Each column is 50% of the width  Each row is 100 px tall  Cells are colored as labeled reddefault yellow

34. Test Production Links Table  Open your Links.html page from your About Me folder  Add a border, cell padding, and cell spacing to table.  Add alignments (other than default) to the cell contents  Change the color of the table.  Print the Notepad document and web page to hand in for grading.  Call Ms. Brown to web page on screen. Due at the end of the period. No Exceptions!!!!!!! STAY ON TASK!!!!!!!!