Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

Learning Outcomes 2 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

HTML Table 3 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

HTML Table Elements 4 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

The Table Element 5 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

HTML Table Example 6 Birthday List Copyright © 2016 Pearson Education, Inc., Hoboken NJ

HTML Table Example 2 7 Using the Element Copyright © 2016 Pearson Education, Inc., Hoboken NJ

8

HTML colspan Attribute 9 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

HTML rowspan Attribute 10 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

Accessibility and Tables Copyright © 2016 Pearson Education, Inc., Hoboken NJ

Accessibility: headers & id Attributes Word Schedule Day Hours Monday 4 Tuesday 3 Total 7 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

Using CSS to Style a Table HTML Attribute CSS Property alignAlign a table: table { width: 75%; margin: auto; } Align within a table cell: text-align bgcolorbackground-color cellpaddingpadding cellspacingborder-spacing or border-collapse height valignvertical-align width borderborder, border-style, or border-spacing ---background-image ---caption-side Copyright © 2016 Pearson Education, Inc., Hoboken NJ

Pseudo-classPurpose :first-of-typeApplies to the first element of the specified type. :first-childApplies to the first child of an element. (CSS2 selector) :last-of-typeApplies to the last element of the specified type. :last-childApplies to the last child of an element :nth-of-type(n)Applies to the “nth” element of the specified type. Values: a number, odd, or even 14 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

Table Row Groups Work Schedule Day Hours Monday 4 Tuesday 3 Total 7 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

Summary 16 Copyright © 2016 Pearson Education, Inc., Hoboken NJ