Post on 19-Jan-2018
description
TablesHTML and CSS with Tables
CSCI 1710 Web Design and Development
What we now know about CSS
Ways to Define StylesStyle sheet rule syntaxProperty/value pairs separated by semicolon
selector {property: value;property: value;
}
Simple:h1 {color: red;}h2, h3 {color: rgb(0,0,200);}blockquote {font-style: italic;}
More Complex:p {
width: 500px;background-color: #FFFCD5;color: #241DFF;border: 1px solid black;margin: 0 auto;font-style: italic;font-family: Arial;
}
Ways to Define StylesOne or more rules
contained in an external style sheet (linked)
contained in an internal style sheet (embedded)
applied directly to a tag (inline)
External Style SheetsOne way we can implement CSS is through external (linked) style sheets
With external style sheets we create a second document and name it with a .css extension
This second file contains only the CSS expressions
Preferred method for employing CSSExternal stylesheets allow for modifying style across multiple HTML documents from a single location
External Style SheetsWithin every page that needs to use the external style sheet, we add the following tag to the head section of the document:
<link rel=“stylesheet” href=“stylesheetname.css” />
The advantage to external style sheets is that we can create one css file and our entire website use the one file
External Style Sheet (index.html)<head>
<meta charset=“utf-8”><link rel=“stylesheet” href=“style.css” /><title>Basic web page</title>
</head>
rel = relationshiphref = hypertext reference – the path to the external sheet
Embedded Style SheetsEmbedded style sheets are defined in the head section of the document
<style>selector { property:value; }selector { property:value; }
</style>
Embedded style sheets are used to apply style to one individual web page
Embedded Style Sheets…
<head><meta charset=“utf-8”><style>
h1{ color: red; font-size: 36px; }p{ color: green; font-family:arial; }
</style><title>Basic web page</title>
</head>…
Inline StyleOption three is declaring CSS inline. Inline allows us to add CSS to one specific tag within a document
<tag style=“property:value; property:value”>…</tag>
<h1 style=“color:red; font-size:26px;”>Hello</h1><p style=“color:green;”>Hello</p><img style=“border:1px solid black” src=“image.jpg” alt=“Image” />
Order of OperationInline style => ‘Winner takes all’
Embedded style
External (Linked) Style
Browser default
CommentingIn CSS, we can apply comments to embedded and linked CSS.
To place a comment we use the /* COMMENT */ format
/* this is style.css */h1 {
color: red; font-size: 36px;
}
CommentingFor all .css files created, you must have the following comment block:/*
Name: Your NameCourse: CSCI 1710Assignment: Lab xDue Date: xx.xx.2016Purpose: The purpose of this .css is to style
my index.html page*/
ColorsWhen working with colors, we have a few different options to express the value of the color
One option is to use the named colors There are 17 standard colors
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow
There are 123 additional colorsi.e. BlanchedAlmond, ForestGreen, HoneyDew, LightGoldenRodYellow, WhiteSmoke
Colors R G B
Red 255, #FF 0 0Green 0 255, #FF 0Blue 0 0 255, #FFWhite 255, #FF 255, #FF 255, #FFBlack 0 0 0
ColorsAnother option would be to express the RGB values using hexadecimal values
R G Bcolor: #FF FF FF;
color: #FF0000; /* This would be red */color: #C9C9C9; /* This would be medium gray */
Colors RGB valuesAnother option is expressing the red, green, and blue values in decimal format.
rgb(RED, GREEN, BLUE);
color: rgb(255, 0, 0); /* red */color: rgb(125, 125, 125); /* gray */
Colors RGBA Very similar to option three, however this allows us to identify the opacity of the object by setting the Alpha parameter. This ranges from 0.0 (fully transparent) to 1.0 (fully opaque)
color: rgba(RED, GREEN, BLUE, ALPHA);
color: rgba(255, 0, 0, 0.3); /* red with transparency */
ColorsSo to change the font color of a paragraph to white we could do any one of the following:
p { color: white; }p { color: #FFFFFF; }p { color: rgb(255,255,255); }p { color: rgba(255,255,255,1.0); }
Choosing ColorsAs we learned from our first homework assignment, poor choice of display colors can ruin an otherwise good web site, and potentially a visitor’s eyesight
All joking aside, a badly executed color scheme will encourage users to find other sites
Several online tools are available that can help a developer select an effective set of colors for a web site
Choosing ColorsAdobe Kuler or Color Wheel CC
https://color.adobe.com/create/color-wheel/
Choosing ColorsOne of the tasks in Phase 3 of the semester project is submitting the color palette you intend to use for your web site
Paletton Adobe
Choosing ColorsFor this phase, DO NOT say, ‘I intend to use shades of blue and gray,’ or something like that. Pick a color palette, take a screen shot, and include it in your submission
Paletton Adobe
IDs, Classes, and Divs
ID Attributeids and classes can be written to apply a group of rules selectively to elements on a web page
An id can only be used once on a given web page
A class can be used multiple times on a web page
id and class names should start with a letter or an underscore (_), not a number or any other character
Syntax and Usageid=“_dynamicText” <- Syntax<p id=“_dynamicText”>…</p> <- Usage
class=“content” <- Syntax<p class=“quote”>…</p> <- Usage
* ids used more with Javascript, now, but still work in CSS
The div ElementAllows you to group a set of elements together in one block level box (container)
Typically used to define a web page’s structure, or layout
Page layout is the part of graphic design that deals in the arrangement of visual elements on a page
It generally involves organizational principles of composition to achieve specific communication objectives (More on that later)
Body <body>Header <div>
Nav <div> <a> <a> <a> <a>…
Content <div>
Footer <div>
Heading <h1>
Paragraph <p>
Paragraph <p>
EXAM
PLE
LAYO
UT
…more CSS: The Box ModelIt’s kind of a big thing…
The Box ModelA very important concept in CSS
Applies to block level elements
Each is regarded as a nested box with four parts:ContentPaddingBorderMargin
The Box ModelContent: The space where the page’s content is displayed
Padding: Space between a box’s border and content. Adding padding can improve readability of the content. Default = 0
Border: Wraps around the padding and content. Doesn’t include the margin . Default = 0
Margin: Area outside of the border. Can create a gap between adjacent boxes . Default = 0
The Box ModelBy default, the content box is rendered just big enough to hold what it contains
By default, padding, border, and margin are 0
We can modify any or all of the three to modify the presentation of our content using CSS
Box Dimensionswidth, height
By default, a box is sized by a browser to be just big enough to hold its content
You can explicitly set the width and height in CSS
Height doesn’t always work very well
MARGIN
PADDING
CONTENT
BORDER
The Box Model
MARGIN
PADDING
CONTENT
BORDER
The Box Model
MARGIN
PADDING
CONTENT
BORDER
CSS Box Model Examples
The Box ModelSo the box can be modified to visually separate one block of content from another, improving its presentation
Web design is about more than just writing code
Arranging content based on established best practices to make it attractive for visitors and thus likely to engage them in the future
The Box ModelPadding, border, and margin can be set one of four ways:
Specifying top, right, bottom, and left valuesSpecifing top/bottom and right/left valuesSpecifying a single value that applies to top, right, bottom, and left
padding-top: 5px; padding-right: 10px;padding-bottom: 15px;padding-left: 5px;
margin: 10px 15px;
border-size: 10px;
*Note: border-style and border-color also have to be set for border to display
The Box ModelPadding, border, and margin can be set one of four ways:
Specifying all fouron one line
margin: 10px 15px 5px 25px;
Tables
TablesHistorically, tables often used in HTML for page layout and text alignment. CSS techniques now used for this
HTML tables should only be used for rendering data that belongs naturally in a grid, in other words where the data describe a number of objects that have the same properties
Tables should never be used for layout
Taxonomy of tables
Cell
Cell
Cell
Cell
Cells merged together
Column
Row
Table Tags
<table>.. </table> beginning and end of a table<tr>..</tr> beginning and end of a row<td>..</td> beginning and end of a cell
Tables are laid out row by row, top to bottom, left to right
<table><tr> <td>ham</td><td>eggs</td></tr><tr> <td>milk</td><td>juice</td></tr>
</table>
<table><tr> <th>item</th><th>quantity</th></tr><tr> <td>milk</td><td>2 cups</td></tr>
</table>
Table headings
<th>.. </th> beginning and end of a table heading.By default, all major browsers display <th> as bold and center
Tabl
es, p
rogr
amm
atica
lly
(an
algo
rithm
)
1. Write table opening tag <table>2. If there is a heading row
1. Write heading row opening tag <tr>2. Write current header cell opening tag <th>3. Write current header cell data4. Write current header cell closing tag </th>5. Write heading row closing tag </tr>
3. While there are still rows1. Write current row opening tag <tr>2. While there are still cells for the current row
1. Write current cell opening tag <td>2. Enter table data3. Write current cell closing tag
</td>3. Write current row closing tag </tr>
4. Write table end tag </table>
If th
ere’
san
othe
r…
If th
ere’
san
othe
r…
Spanning Cells<table>
<tr> <td>1</td><td colspan="2">2</td></tr><tr> <td>3</td><td>4</td><td rowspan="2">5</td></tr><tr> <td>6</td><td>7</td></tr>
</table>
Cells can be joined using rowspan (for vertical joining) and colspan (for horizontal joining) attribute on td tag
rowspan=“n” or colspan=“n”n represents number of rows or columns to span across
<td> <td colspan=“2”>
<td> <td>
<td rowspan=“2”>
<td> <td>
Spanning CellsWhen writing code for a table that includes merged cells, pencil and paper can make the job easier
Remember, HTML draws tables row by row
Draw out the proposed table by hand
It may help to put <tr> tags around each row and <td> tags above each column
Spanning Cells
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</tr>
<td> <td> <td> <td>
<td> <td colspan=“3”>
<td rowspan=“3”> <td> <td> <td>
<td rowspan=“2”> <td> <td>
<td colspan=“2”>
<table><tr> <td>1</td><td colspan=“3">2</td></tr><tr> <td rowspan=“3”>3</td><td>4</td> <td>5</td><td>6</td></tr><tr> <td rowspan=“2”>7</td><td>8</td><td>9</td></tr><tr> <td colspan=“2”>10</td></tr>
</table>
Spanning Cells
10
987
4 5 6
1 2
3
Spanning CellsSo, using our hand drawn diagram, the code for a complex table can easily be written
Remember, the number of cells in each row must be equal
Cells that span rows or columns have to be accounted for
Tables – Fixing Column WidthWe can fix the width of tables’ columns by using standalone tags inside the table element in the HTML with inline CSS
<table> <col style="width:15%;" /> <col style="width:55%;" /> <col style="width:30%;" /> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr>
</table>
Table ExamplesHTML and CSS with Tables
Sources• “HTML Reference”, W3Schools, Retrieved from http://www.w3schools.com/tags/default.asp
• “HTML Tables”, W3Schools, Retrieved from http://www.w3schools.com/html/html_tables.asp
• “CSS Reference”, W3Schools, Retrieved from http://www.w3schools.com/cssref/default.asp
• “HTML Tables – when and how to use tables in HTML”, Ben Hunt’s Web Design from Scratch, Retrieved from http://webdesignfromscratch.com/html-css/html-tables/
Copyrights
•Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. •IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.•Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.•Oracle is a registered trademark of Oracle Corporation. •HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.•Java is a registered trademark of Sun Microsystems, Inc.•JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. •SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. •Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.•ERPsim is a registered copyright of ERPsim Labs, HEC Montreal.•Other products mentioned in this presentation are trademarks of their respective owners.
Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of
Computing . (ramseyjw@etsu.edu)