Download presentation
Presentation is loading. Please wait.
1
HTML Tables & CSS Styles
CSC 102 Lecture
2
Information arranged in rows and columns
What is a Table? Information arranged in rows and columns
3
Table Tags & Organization
Table is nested boxes <table> on outside Rows & caption within <tr> <caption> Data & header cells innermost <td> <th> Optional groupings <thead>, <tbody>, <tfoot> Same # columns each row
4
Table Tags & Organization
<table> <tr><th></th><th></th><th></th></tr> <tr><td></td><td></td><td></td></tr> <caption></caption> </table>
5
Combining Cells Cells may span multiple rows or columns May do both
<th rowspan="2"> <td colspan="2"> May do both Only describe first item in merged group First & third rows in example would list just two cells each colspan="2" rowspan="2"
6
Combining Cells Cell deleted here <table> <tr><th></th> <th colspan="2"></th></tr> <tr><td rowspan="2"> </td><td></td><td></td> </tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td></tr> <caption></caption> </table> colspan="2" rowspan="2" Cell deleted here
7
Full list of table properties
Styles for Table Cells You can set the background color <td style="background-color: red;"> You can set the height and width <td style="height:4in; width:2in;"> You can adjust the borders <table style="border-collapse: collapse; padding:0"> <td style="border:1px solid black"> You can set the alignment within the cell <td style="text-align: center; valign: top;"> A Full list of table properties
8
Quick Check Draw the table that would be created below: <table>
<tr> <td rowspan="2" style="background-color:red;">A</td> <td colspan="2" style="background-color:blue;">B</td> </tr> <td style="background-color:yellow;">C</td> <td style="background-color:green;">D</td> </table>
9
Styles: A Tale of Two Web Sites
Ling’s Cars Bright/vibrant colors Blinking & animation Overlapping content “Razzle-dazzle & bling” Lease Trader Muted/pale colors Page elements all static Neat columns “Just the facts”
10
Styles Appearance of page components called style.
Style specified via rules, of 3 kinds: Inline style attribute: <li style="list-style-type:square"> Rules given within a <style> tag Rules from an external cascading style sheet (CSS) Latter two apply to many tags at once!
11
Inline Style Examples <ol style="list-style-type: square;">
Uses square bullets for items <ul style="list-style-type: upper-alpha;"> Uses uppercase letters for item numbering <body style="background-color: black;"> Changes background of entire page to black <p style="padding: 0px; margin: 0px;"> Removes space around paragraph
12
Details: Inline Styles
Applied to any tag style="property:value; property2:value2;" colon separates property from value semicolon separates series of styles Web has lists of valid properties/values Organized into groups Dimension = number & unit: in, cm, mm, px, pt, pc, ex, em, % Colors: use name, or #ABCDEF code Inline style drawback: repetitive!
13
Can You Do It? Identify the property/value pair:
To set a background image for a page To make text appear crossed out To put a dotted red box around a word To put a heading in Small Caps To put a half inch of blank space around an image To indent the first line of a paragraph To make an element fixed (non-scrolling)
14
Q. Can you figure out what each part means?
Style Rules Can we specify style for many tags at once? Yes! The basic style rule has a pretty simple form: Here’s an example of an actual working rule: Notice that this doesn’t look like HTML – no tags! Style rules: distinct from both content and markup selector { property: value; } The selector identifies a set of page elements whose properties should have the specified values. body { background-color: cyan; } Q. Can you figure out what each part means?
15
Selectors Most basic selector is just a tag name:
p { font-family: Arial, Helvetica, sans-serif; } ID selectors pick out individual elements: #logo { border: 2px solid blue; Pseudoclass selectors for mouseover styles: a:hover { color: cyan; In HTML file: <img src="logo.png" alt="My logo" id="logo">
16
<link rel="stylesheet" type="text/css" href="mystyle.css" />
Style Files Where do style rules go? Usually, all files in a web site share a style Repetitive to list same rules in each Solution: all refer to a shared file of style rules <link rel="stylesheet" type="text/css" href="mystyle.css" /> (Demo: Place link tag like above inside <head> & create style file)
17
The <style> Tag CSS rules can also go inside HTML
The <style> tag creates a special zone inside an HTML document, where only style rules appear <style> td { background-color: gray; border: 2px dashed blue; } </style> Usually placed inside the <head> of document Rules apply just for this page Put as many rules as you want in this zone
18
Review: Where to Put Style Rules
Best location is single CSS file for entire site Refer to it by including <link> tag inside page <head>: <link rel="stylesheet" type="text/css" href="demo.css" /> Rules can go inside <style> tag in page: <style type="text/css"> body { color: #330033; } </style> Inline styles go inside a single tag: <span style="color: red;">Red text</span> color: #CCAA99; #hand { }
19
Style Lab Try out styles for yourself in the lab activity
Challenge: Set up the relationship between files CSS file has style rules HTML files link to it If you have time, also try the lab on HTML tables
Similar presentations
