Web Design and Development

theLonelyWolf

10-DataTables.pptx

Home >Information Systems homework help >Web Design and Development

Data Tables

Some content from:

Build Your Own Website The Right Way Using HTML & CSS

(Ian Lloyd)

Principles of Web Design (Joel Sklar)

Learning Outcomes

apply HTML, CSS and JavaScript to develop interactive websites

understand the intended use for HTML tables:

for data, not page layout

be able to create and style tables with HTML and CSS

HTML Structure and Syntax of a Table Tag

The first row TR could be the header elements

In which case TD replaced with TH

Tables are for data

tables are designed to present tabular data, such as:

a calendar of events

a bank statement

a contacts list

… anything that you might use a spreadsheet for

but not for laying out a page

which most designers used to do

Using Table Elements

the HTML table elements allow the arrangement of data into rows and columns of cells

the table element <table> contains the table information, which consists of:

header element <th>

row element <tr>

data cell <td>

HTML Table Code

<th>Name</th><th>Contact(Home)</th> <th>Contact(Work)</th><th>Location</th>

</tr> <tr> <td>Jane Bradley</td><td>02380 123123</td> <td>02380 577566</td><td>Southampton</td>

</tr> <tr> <td>Fred Bradley</td><td>01273 177166</td>…

</tr>

…

</table>

Table attributes

the <table> element used to have many attributes like

border, align, cellspacing, cellpadding, bgcolor, width

these are not supported in HTML5. Why?

these are all for presentation, which should be done with CSS

http://www.w3schools.com/tags/tag_table.asp

Collapsing Table Borders

tables are more legible with the table borders collapsed

use the border-collapse property

table {border-collapse: collapse;}

borders collapsed

"traditional" borders with cellspacing

Spanning Rows

the rowspan attribute lets you create cells that span multiple rows

Best-Selling Albums Worldwide</td>

this is a logical/structural thing, not a presentation characteristic

this is not a good example – just a title in a cell (not data)

Using Table Headers and Footers

rows can be grouped into head, body, and footer sections using the <thead>, <tbody>, and <tfoot> elements

you can style these table sections with CSS

thead {

font-family: arial;

background-color: #ccddee;

}

tfoot {

background-color: #ddccee;

font-family: times, serif;

font-size: .9em;

font-style: italic;

}

Grouping Columns

the <colgroup> and <col> elements allow you to apply style characteristics to groups of columns or individual columns

the <colgroup> element has a span attribute that lets you set the number of columns specified in the group

the <col> element lets you specify style characteristics for individual columns

Styling the Caption

you can position the caption on the top or bottom of the table using the caption-side property

you can also apply other style properties to enhance the caption text:

caption {

text-align: left;

font-style: italic;

padding-bottom: 10px;}

Styling Table Borders

by default, table borders are turned off

you can add borders using CSS

borders can be applied to the whole table, to individual rows, and to individual cells

to create a table with an outside border only:

table {

border: solid 1px black;

border-collapse: collapse;}

Styling Table Borders

to specify borders for each cell, use a separate style rule:

table {

border: solid 1px black;

border-collapse: collapse;}

th, td {

border: solid 1px black;}

Styling Table Borders

you can also style individual rows or cells and apply cell borders

th {

border-bottom: solid thick blue;

background-color: #ccddee;}

Using Padding

you can enhance the legibility of your table data with padding

this style rule adds five pixels of padding to all sides for both types of table data elements

th, td {padding: 5px;}

Using Margins and Floats

tables can be floated

use margins to add white space around floating tables

table.best {

font-family: verdana;

border: solid 1px black;

border-collapse: collapse;

float: left;

margin-right: 20px;

margin-bottom: 10px;

}

Styling Table Background Colors

you can apply background colors to:

entire table

single rows or cells

column groups of individual columns

you can alternate colors for different rows

add hover interactions (careful…)

Creating Alternate Color Rows

table data can sometimes be easier to read when alternate rows have different background colors

write a style rule for the odd or even row using a class selector

tr.odd td {background-color: #eaead5;}

<td>Back in Black</td> …

</tr>

… or use CSS's neat pseudoclasses

tr:nth-child(even) {background: #CCFFCC}

tr:nth-child(odd) {background: #FFFFCC}

tr:nth-child(1) {background: white}

http://www.w3.org/Style/Examples/007/evenodd.en.html

Creating Background Hover Effects

you can add interactivity to your table with hover effects

when the user hovers the pointer over a cell or row, the formatting can change

td:hover {

color: white;

background-color: #722750;}

Does this create false expectations? Why?

Summary

use tables for presentation of data, not for layout

use the grouping elements to apply styles to groups of rows or columns or to the header, body, and footer

use CSS to add presentation style to tables

use padding to add space within your cells to make your data more legible

you can float tables and add margins with the box model properties