Presentation is loading. Please wait.

Presentation is loading. Please wait.

CHAPTER 5 FORMATTING CONTENT WITH TABLES. LEARNING OBJECTIVES How to use the tag to create a table within a webpage How to use HTML tags to format content.

Similar presentations


Presentation on theme: "CHAPTER 5 FORMATTING CONTENT WITH TABLES. LEARNING OBJECTIVES How to use the tag to create a table within a webpage How to use HTML tags to format content."— Presentation transcript:

1 CHAPTER 5 FORMATTING CONTENT WITH TABLES

2 LEARNING OBJECTIVES How to use the tag to create a table within a webpage How to use HTML tags to format content within HTML table How to embed images within an HTML table How to nest one table within another How to center a table within a page How to align content within a table cell How to place a border around a table How to control rules around a table cell How to provide a table caption and column headers How to use the table header, body, and footer areas for formatting

3 LEARNING OBJECTIVES CONTINUED How to control cell spacing and padding How to control table row and column display How to control table and table cell sizes

4 COMMON TABLE COMPONENTS

5 CREATING A SIMPLE TABLE Column One Column Two

6 FOUR-COLUMN TABLE Column One Column Two Column Three Column Four

7 ROWS AND COLUMNS Food Calories Cheese burger 620 Pizza 600 Milk Shake 400 to 800 Pasta 350 to 600

8 FORMATTING TABLE CONTENT Food Calories Cheese burger 620 Pizza 600 Milk Shake 400 to 800 Pasta 350 to 600

9 LINKS WITHIN A TABLE Site Web Address Yahoo Yahoo Google Google Microsoft Microsoft Facebook Facebook

10 IMAGES WITHIN A TABLE Pet Photo Dog Cat Horse Mouse

11 CENTERING A TABLE Calendar Monday: Travel to New York Tuesday: Meeting with CNN Wednesday: Fly to Chicago Thursday: Bulls Game Friday: Fly to Phoenix

12 CENTERING CONTENT IN A CELL City Photo Phoenix San Francisco New York

13 ALIGNING CONTENT IN A CELL

14 ALIGNING CONTENT OF A SPECIFIC CELL Description Photo Bikes Parked Bike early in morning Bike rider in city

15 ALIGNING CONTENT VERTICALLY IN A CELL Tree Type Photo Apple Cherry Orange

16 ADDING OR DELETING TABLE BORDERS 1 2 3 4 1 2 3 4

17 CONTROLLING BORDER WIDTHS 1 2 3 4 1 2 3 4 1 2 3 4

18 SPECIFYING TABLE BORDERS

19 BORDER POSITIONS 1 2 3 4 1 2 3 4 1 2 3 4

20 SPECIFYING BORDER RULES

21 BORDER RULES 1 2 3 4 1 2 3 4 1 2 3 4

22 TABLE CELL SPACING No Spacing City Sales Phoenix 100 San Francisco 350 New York 252 Spacing City Sales Phoenix 100 San Francisco 350 New York 252

23 CELL PADDING No Padding City Sales Phoenix 100 San Francisco 350 New York 252 Padding City Sales Phoenix 100 San Francisco 350 New York 252

24 USING TABLE CAPTIONS January Sales City Sales Phoenix 100 San Francisco 350 New York 252 February Sales City Sales Phoenix 200 San Francisco 250 New York 275 March Sales City Sales Phoenix 150 San Francisco 250 New York 290

25 TABLE HEADING (CAPTION) City Newspapers City Paper Phoenix Arizona Republic San Francisco San Francisco Chronicle New York New York Times

26 TABLE HEADER AND FOOTER City Paper Phoenix Arizona Republic San Francisco San Francisco Chronicle New York New York Times Optional Table Footer

27 UNEQUAL NUMBER TABLE ROWS/COLUMNS Account Sales Manager Sales Rep Costco John Smith Mary Allen Costco John Smith Walmart John Smith Jean Smith

28 USING ROWSPAN Wine Favorites Pinot Grigio Cavit Ecco Domani Chardonnay Kendall Jackson Merlot Robert Mondavi

29 A NESTED TABLE Wine Favorites Pinot Grigio Cavit Ecco Domani Chardonnay Kendall Jackson Merlot Robert Mondavi

30 TREATING A COLUMN UNIQUELY WITH COLUMN GROUPS Wine Cigar Pizza

31 COLGROUP CONTINUED Apple Cherry Orange

32 CONTROLLING A TABLE’S WIDTH AND HEIGHT 100x100 1 2 3 4 200x200 1 2 3 4 400x400 1 2 3 4

33 SPECIFYING CELL SIZES 100x100 200x200 300x300 400x400

34 FORMATTING AN ENTIRE PAGE WITH A TABLE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a tellus vitae quam elementum interdum quis a massa. Etiam interdum bibendum leo, rhoncus convallis turpis sodales tempus. Sed eget orci ac felis mollis pretium. Aenean et elit vitae lorem blandit aliquam et viverra risus. In blandit, risus ac commodo pharetra, risus magna tincidunt ante, at posuere odio odio eu enim. Phasellus libero dui, eleifend a eleifend eget, tempor et libero. Curabitur porta posuere dictum. Morbi cursus nulla auctor neque semper euismod. Nullam odio tortor, venenatis at vehicula pulvinar, lobortis nec nisl. Nam consequat cursus nibh quis tincidunt. Vivamus sed libero quis mauris facilisis placerat. Integer et mauris massa. Praesent porttitor varius vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam ligula et risus imperdiet vestibulum. Nullam ut metus a tellus dignissim convallis in ac augue. Etiam fermentum felis quis leo suscipit a scelerisque ante imperdiet. Morbi vestibulum scelerisque viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at arcu mauris. Sed est arcu, placerat feugiat porttitor et, cursus eget nulla.

35 REAL WORLD: USING COLOR NAMES

36 SUMMARY Web sites make extensive use of tables to present text, images, products, and even to format the page content itself. To create a table within a web page, developers use the and tag pair. Within the table definition, the developers use the and tag pair to define a row. Each row consists of one or more cells which developers specify using the and tag pair. In this chapter, you made extensive use of tables to format a variety of data. Using style attributes, you can control whether or not a table has a border, the height and width of the table and its cells, as well as the alignment. You can also create a nested table, which is a table within a table.


Download ppt "CHAPTER 5 FORMATTING CONTENT WITH TABLES. LEARNING OBJECTIVES How to use the tag to create a table within a webpage How to use HTML tags to format content."

Similar presentations


Ads by Google