Tables Feb. 14, 2012

Tables Great way to organize and display information Laid out in columns and rows Think of an excel spreadsheet Defined with tag Divided into rows first using Then into columns using data cells

Tables data cells can contain: – Text – Images – Lists – Paragraphs – Forms – Horizontal rules – Tables – Etc.

Tables: 3 Things

Tables At Work – Cell one –

Tables At Work – Row 1 Cell 1 Row 1 Cell 2 – Row 2 Cell 1 Row 2 Cell 2 –

Tables At Work – Row 1 Cell 1 and 2 – Row 2 Cell 1 Row 2 Cell 2 –

Tables At Work – Row 1 and 2 Cell 1 Row 1 Cell 2 – Row 2 Cell 2 –

Table Examples Example 1 Example 2 Example 3

Cascading Style Sheets Feb. 14, 2012

Benefits of CSS More control over appearance. Smaller, faster-loading pages. Easier to update pages, entire sites.

Two types of style sheets* Internal or embedded style sheet – Exists in of page. – Applies only to a single page.

Two types of style sheets* External style sheet – Separate file that contains no HTML content. – Can use it for multiple pages.

Two types of style sheets* In-line styling – One instance of styling – Can use it for rare/one time use components. – Typically frowned upon, but can be rather useful when working with templates

Syntax A CSS rule has a selector and a declaration. Selector: the name you will use to call the style throughout the document. Declaration: the formatting that will be applied. p{color:red; text-align:center;} Selector Declaration

Three style types Class ID Tag

Class You manually attach it to text. To put company name in bold, red: – –.company – {color:red; font-weight:bold} – – Call my company, Johns Widgets, for all your needs.

ID A single, unique element on a page. Center copyright info at the bottom of the page. – – #copyright – {text-align: center;} – – Copyright John's Widgets 2011

Tag Applies to every tag of one type on the page. Make all H1 headings on the page maroon. – – h1 – {color: #903;} – – Why you should use my company

Three style types Can tell types apart in head section. – Class: selector preceded by period.company – ID: selector preceded by pound sign #copyright – Tag: nothing precedes it h1

Three style types In body, type of style is an attribute, selector is a value. –

Examples of style sheets Simple, hand-coded page and style sheet (external)pagestyle sheet Written by Dreamweaver page and style sheet (external)pagestyle sheet See the section of Ch. 1 tutorial from McFarland for internal example

DIVs will be covered next Tues.