Tables HTML and CSS with Tables CSCI 1710 Web Design and Development

What we now know about CSS

Ways to Define Styles Style sheet rule syntax Property/value pairs separated by semicolon selector {property: value; } Simple: h1 { color: red; } h2, h3 { color: rgb(0,0,200); } blockquote { font-style: italic; } More Complex: p {p { width: 500px; background-color: #FFFCD5; color: #241DFF; border: 1px solid black; margin: 0 auto; font-style: italic; font-family: Arial; }

Ways to Define Styles One 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 Sheets One 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 CSS External stylesheets allow for modifying style across multiple HTML documents from a single location

External Style Sheets Within every page that needs to use the external style sheet, we add the following tag to the head section of the document: 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) Basic web page rel = relationship href = hypertext reference – the path to the external sheet

Embedded Style Sheets Embedded style sheets are defined in the head section of the document selector { property:value; } selector { property:value; } Embedded style sheets are used to apply style to one individual web page

Embedded Style Sheets … h1{ color: red; font-size: 36px; } p{ color: green; font-family:arial; } Basic web page …

Inline Style Option three is declaring CSS inline. Inline allows us to add CSS to one specific tag within a document … Hello

Order of Operation Inline style=> ‘Winner takes all’ Embedded style External (Linked) Style Browser default

Commenting In 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; }

Commenting For all.css files created, you must have the following comment block: /* Name:Your Name Course:CSCI 1710 Assignment:Lab x Due Date:xx.xx.2016 Purpose:The purpose of this.css is to style my index.html page */

Colors When 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 colors i.e. BlanchedAlmond, ForestGreen, HoneyDew, LightGoldenRodYellow, WhiteSmoke

Colors R G B Red255, #FF 0 0 Green 0255, #FF 0 Blue , #FF White255, #FF 255, #FF 255, #FF Black 0 0 0

Colors Another option would be to express the RGB values using hexadecimal values R G B color: #FF FF FF; color: #FF0000; /* This would be red */ color: #C9C9C9; /* This would be medium gray */

Colors RGB values Another 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 */

Colors So 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 Colors As 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 Colors Adobe Kuler or Color Wheel CC

Choosing Colors Paletton

Choosing Colors One of the tasks in Phase 3 of the semester project is submitting the color palette you intend to use for your web site PalettonAdobe

Choosing Colors For 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 PalettonAdobe

IDs, Classes, and Divs

ID Attribute ids 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 Usage id=“_dynamicText”<- Syntax … <- Usage class=“content” <- Syntax … <- Usage * ids used more with Javascript, now, but still work in CSS

The div Element Allows 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 Header Nav … Content Footer Heading Paragraph E XAMPLE L AYOUT

…more CSS: The Box Model It’s kind of a big thing…

The Box Model A very important concept in CSS Applies to block level elements Each is regarded as a nested box with four parts: Content Padding Border Margin

The Box Model Content: 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 Model By 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 Dimensions width, 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 Model So 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 Model Padding, border, and margin can be set one of four ways: Specifying top, right, bottom, and left values Specifing top/bottom and right/left values Specifying 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 Model Padding, border, and margin can be set one of four ways: Specifying all four on one line margin: 10px 15px 5px 25px;

Tables

Historically, 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 Cells merged together Column Row

Table Tags.. beginning and end of a table.. beginning and end of a row.. beginning and end of a cell Tables are laid out row by row, top to bottom, left to right ham eggs milk juice

item quantity milk 2 cups Table headings.. beginning and end of a table heading. By default, all major browsers display as bold and center

Tables, programmatically (an algorithm) 1.Write table opening tag 2.If there is a heading row 1.Write heading row opening tag 2.Write current header cell opening tag 3.Write current header cell data 4.Write current header cell closing tag 5.Write heading row closing tag 3.While there are still rows 1.Write current row opening tag 2.While there are still cells for the current row 1.Write current cell opening tag 2.Enter table data 3.Write current cell closing tag 3.Write current row closing tag 4.Write table end tag If there’s another…

Spanning Cells 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

Spanning Cells When 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 tags around each row and tags above each column

Spanning Cells

Spanning Cells

Spanning Cells So, 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 Width We can fix the width of tables’ columns by using standalone tags inside the table element in the HTML with inline CSS

Table Examples HTML and CSS with Tables

Sources “HTML Reference”, W3Schools, Retrieved from “HTML Tables”, W3Schools, Retrieved from “CSS Reference”, W3Schools, Retrieved from “HTML Tables – when and how to use tables in HTML”, Ben Hunt’s Web Design from Scratch, Retrieved from

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.