tables feb. 14, 2012. tables great way to organize and display information laid out in columns and...
TRANSCRIPT
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 <table> tag• Divided into rows first using <tr>• Then into columns using <td> data cells
Tables
• <td> data cells can contain:– Text– Images– Lists– Paragraphs– Forms– Horizontal rules – Tables– Etc.
Tables: 3 Things
• <table></table>• <tr></tr>• <td></td>
Tables At Work
• <table>– <tr>• <td>Cell one</td>
– </tr>
• </table>
Tables At Work
• <table>– <tr>
• <td>Row 1 Cell 1</td>• <td>Row 1 Cell 2</td>
– </tr>– <tr>
• <td>Row 2 Cell 1</td>• <td>Row 2 Cell 2</td>
– </tr>• </table>
Tables At Work
• <table>– <tr>• <td colspan="2">Row 1 Cell 1 and 2</td>
– </tr>– <tr>• <td>Row 2 Cell 1</td>• <td>Row 2 Cell 2</td>
– </tr>
• </table>
Tables At Work
• <table>– <tr>• <td rowspan="2">Row 1 and 2 Cell 1</td>• <td>Row 1 Cell 2</td>
– </tr>– <tr>• <td>Row 2 Cell 2</td>
– </tr>
• </table>
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 <head> 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:– <style type="text/css">– .company– {color:red; font-weight:bold}– </style>
– <p>Call my company, <span class=“company”>John’s Widgets</span>, for all your needs.</p>
ID
• A single, unique element on a page. • Center copyright info at the bottom of the page. – <style type="text/css">– #copyright – {text-align: center;} – </style>
– <p id="copyright">Copyright John's Widgets 2011</p>
Tag
• Applies to every tag of one type on the page. • Make all H1 headings on the page maroon. – <style type="text/css">– h1 – {color: #903;}– </style>
– <h1>Why you should use my company</h1>
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. –<span class=“company”>–<p id=“copyright”>
Examples of style sheets
• Simple, hand-coded page and style sheet (external)
• Written by Dreamweaver page and style sheet (external)
• See the <head> section of Ch. 1 tutorial from McFarland for internal example
DIVs will be covered next Tues.