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)
1
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
2
3
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
4
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>
5
HTML Table Code
<table> <tr>
<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>
6
7
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
8
Collapsing Table Borders
tables are more legible with the table borders collapsed
use the border-collapse property
table {border-collapse: collapse;}
9
borders collapsed
"traditional" borders with cellspacing
Spanning Rows
the rowspan attribute lets you create cells that span multiple rows
<td class="title" rowspan="6”>
Best-Selling Albums Worldwide</td>
this is a logical/structural thing, not a presentation characteristic
10
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
11
thead {
font-family: arial;
background-color: #ccddee;
}
tfoot {
background-color: #ddccee;
font-family: times, serif;
font-size: .9em;
font-style: italic;
}
12
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
13
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;}
14
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
15
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;}
16
Styling Table Borders
you can also style individual rows or cells and apply cell borders
th {
border-bottom: solid thick blue;
background-color: #ccddee;}
17
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;}
18
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;
}
19
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…)
20
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;}
<tr class="odd">
<td>AC/DC</tr>
<td>Back in Black</td> …
</tr>
21
… 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
22
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;}
23
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
24