Embed Size (px)
Citation preview
1
Tables and Lists
2
Are Tables still needed?
• Tables were once used to help structure and style our pages
• CSS now replaces most of the old uses for tables• We can still use tables but should use CSS to structure
and format our content• When using tables, use CSS to add style and formatting
3
How Tables are being used
• One way tables are being used is with sliced graphics, which are placed within a table to maintain their layout and seamless appearance
• Another way tables are still being used are with forms to keep forms and their fields neatly organized
• Probably the most common use for tables is to display data in a tabular form
4
Tables being used with XHTML
• Displaying data in a tabular form is now one of the most common uses for tables
• Displaying data within a table mimics the appearance of spreadsheets
• Tables are made up of columns (vertical) and rows (horizontal) for displaying data in a useful and presentable way
• Many websites have to use tables in order to display their database data
5
Tables with XHTML
• A table consists of opening and closing elements<table></table>
• A table can contain rows (table rows) and cells (table data) within each row
<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
• The above example contains two rows, with each each row containing two cells
6
Tables with XHTML
• A table consists of opening and closing elements
<table></table>
• The cells in the first row in the table are often referred to as the table header cells, using the header tags (instead of <td>) will make any text inside these rows appear bold
<tr> <th></th> </tr>
• Within the table tags you have table rows and within each row you have table cells, also known as table data or columns, you can have multiple table cells as well as multiple rows in your table
<tr> <td></td> </tr>
7
Tables with XHTML
• Table example:
<table><tr><th></th><th></th></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
• Above Table has four rows, first row uses a header and each row has only two cells (two <td> elements or columns)
8
Table example with sample data
<table>
<tr><th>Artists</th><th>Songs</th></tr>
<tr><td>Joe Smith</td><td>Singin</td></tr>
<tr><td>Mary Time</td><td>Raps</td></tr>
<tr><td>Tim Jazz</td><td>Happy</td></tr>
</table>
9
Table example with sample data
10
<table summary=“”>
• Adding a table summary is optional and doesn’t appear in the webpage but helps with accessibility by screen readers
<table summary=“table description would go here, this simply provides details of what is contained in our table, again most useful for those using screen readers”>
11
<caption></caption>
• Adding a table caption is optional but will display in the browser, usually above the table
• Caption goes inside the <table> elements
<table><caption>You can add the caption after the openingtable tag, the caption will appear above thetable</caption><tr><th>Artists</th><th>Songs</th></tr><tr><td>Joe Smith</td><td>Singin</td></tr><tr><td>Mary Time</td><td>Raps</td></tr><tr><td>Tim Jazz</td><td>Happy</td></tr></table>
12
Styling tables, add style to CSS
table {margin-left: 20px;margin-right: 20 px;border: thin solid black;caption-side: bottom;
}
td, th {border: thin dotted gray;padding: 5px;
}
caption {font-style: italic;padding-top: 8px;
}
13
Styling the table using CSS, what is styled?
• Table is displayed with a thin black border
• Table cells have a thin dotted gray style border
• There is a margin on both sides of the table
• There is padding in each table cell
• Caption is also styled
• caption-side property displays caption at bottom of table
14
Table cells and their appearance
Table cells can have padding, border, and border spacing
td { border: 1px dotted red;padding: 5px;border-spacing: 5px;
}
15
Table cells appearance
Content
Padding Content
Border-spacing
Border
16
border-spacing: property
• The space in between the cells is known as border-spacing
• Table cells don’t have margins, they instead have spacing around their borders
• Defined over the entire table
• You can’t set the “margin” of an individual cell
• You can set a common spacing around all cells
td { border-spacing: 5px;}
17
border-spacing: property
• There is a way to define different border spacing on the vertical than the horizontal
td{
border-spacing: 10px 30px;
}
18
border-spacing: property problems
Limitations and problems with border spacing
• Border spacing not supported on Internet Explorer version 6
19
Border-collapse property
• An alternative to border-spacing is the border-collapse property
• Collapses the borders so that there is no border spacing at all
• Browser will ignore any border spacing you have set on the table
• Combines two borders that are right next to each other into one border
• Border-collapse property
table{ border-collapse: collapse;}
20
Background-color property
Adding color to a table can improve readability of the content
The following adds a background color only to the table header cells
th{
background-color: #cc6600;
}
21
Background-color property
Adding alternating colors to each row in your table
• Enables viewers to more easily read one row when multiple rows of content are being displayed
• Define a new class and call “rowcolor”
.rowcolor {
background-color: #fcba7a;
}
22
Background-color property
Add the class attribute to each alternating row you want colored
<table>
<tr><th>Artists</th><th>Songs</th></tr>
<tr><td>Joe Smith</td> <td>Singin</td></tr>
<tr class=“rowcolor” > <td>Mary Time</td><td>Raps</td></tr>
<tr><td>Tim Jazz </td></tr>
<tr><td>Happy</td></tr>
<tr class=“rowcolor” > <td>Don Loud</td><td>Scremin</td></tr>
</table>
23
rowspan attribute
• Using rowspan with tables enables a cell to span more than one row
• Useful for making table data appearance more readable and more presentable
• Use for visually showing data repeats of a span of rows without actually repeating data on each row
• A good example would be a class schedule where a class spans several hours
24
rowspan attribute
<table><tr><th>Monday</th><th>Tuesday</th></tr><tr> <td rowspan=“2” >GRC 275</td> <td>
open</td></tr><tr><td>GRC 175</td></tr><tr><td>GRC 103</td> <td rowspan=“2”>GRC
188</td> </tr><tr><td>GRC 101</td></tr><tr><td>GRC 156</td><td>GRC 182</td></tr></table>
25
rowspan attribute
• When using rowspan the cells which rowspan is being applied to do not have <td> elements listed in the row(s) below them that are being spanned onto
26
rowspan attribute
• For example, the second row shown below has GRC 275 spanning two rows, so, the third row which shows GRC 175 doesn’t display a <td> for the GRC 275 cell from the row above, instead it is displaying a <td> for the other cell “open” which isn’t being spanned two rows
<table>
<tr><th>Monday</th><th>Tuesday</th></tr>
<tr> <td rowspan=“2” >GRC 275</td> <td> “open”</td></tr>
<tr><td>GRC 175</td></tr>
27
colspan attribute
• Using colspan with tables enables a column to span more than one column
• Useful for making table data appearance more readible and more presentable where a particular value spans more than one column
28
colspan attribute
<table>
<tr><th>Monday</th><th>Tuesday</th></tr>
<tr> <td colspan =“2”>GRC 275</td> </tr>
<tr> <td>GRC 175</td> <td>open</td> </tr>
<tr> <td rowspan=“2”>GRC 188</td> </tr>
<tr><td>GRC 101</td></tr>
<tr><td>GRC 156</td><td>GRC 182</td></tr>
</table>
29
colspan attribute
• When using colspan, the cells which colspan is being applied to remove the original columns <td> following the cell it was applied to
30
colspan attribute
• For example, the second row shown below has GRC 275 spanning two columns, so, the second column <td> which normally would show below Tuesday doesn’t display and therefore the second row only has one table cell listed
<table>
<tr><th>Monday</th><th>Tuesday</th></tr>
<tr> <td colspan =“2”>GRC 275</td> </tr>
<tr> <td>GRC 175</td> <td>open</td> </tr>
31
Using both colspan and rowspan attributes
• You can use both colspan and rowspan in the same table
• Make sure all the <td> account for both the row and column spans
• For example, remove <td>’s from both row and column where applicable for spans to occur
32
Changing text alignment
You can change the alignment of the data in your table cells with the text-align and vertical-align CSS properties
table {
text-align: center;
vertical-align: middle;
}
33
XHTML allows table nesting You can nest a table within a table
<table><tr><th>Artists</th><th>Songs</th></tr><tr><td>Joe Smith</td><td>Singin</td></tr><tr><td>Mary Time</td><td> <table><tr><td>Raps</td></tr><tr><td>Poppin</td></tr><tr><td>Happy Trails</td></tr></table> </td></tr><tr><td>Tim Jazz</td><td>Happy</td></tr></table>
34
Overriding any inherited CSS Styles in our table
If our main table has CSS styles, the nested table will inherit these same styles
• Add a descendant selector to specify style to the nested table
table table tr {background-color: red;}
35
Overriding any inherited CSS Styles in our table
• There are several ways to style the nested table
• Alternatively we could have created a class
.nestedtable {background-color: red;}
• Must also add the class to nested <table> element<table class=“nestedtable”>
36
You can style the table within a table
<table><tr><th>Artists</th><th>Songs</th></tr><tr><td>Joe Smith</td><td>Singin</td></tr><tr><td>Mary Time</td><td> <table class=“nestedtable”><tr><td>Raps</td></tr><tr><td>Poppin</td></tr><tr><td>Happy Trails</td></tr></table> </td></tr><tr><td>Tim Jazz</td><td>Happy</td></tr></table>
37
List Items within XHTML
• A list can be styled using CSS• Lists display bullets next to each item• Only a few properties specific to lists• List-style-type property allows you to control the bullets
used in your list
<ul><li>Monday</li><li>Tuesday</li><li>Wednesday</li><li>Thursday</li><li>Friday</li></ul>
38
List-style-type property:
Default appearance round
li{
list-style-type: disc;
}
39
List-style-type property:
Appearance hollow circle
li{
list-style-type: circle;
}
40
List-style-type property:
Appearance square
li{
list-style-type: square;
}
41
List-style-type property:
Appearance none
li{
list-style-type: none;
}
42
List-style-type property:
Appearance custom image
li{
list-style-image: url(images/logo.gif);
}
-end
