Ppt ch10
-
Upload
niruttisai -
Category
Technology
-
view
72 -
download
1
description
Transcript of Ppt ch10
![Page 1: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/1.jpg)
Web Design Principles5th Edition
Chapter TenWorking with Data Tables
![Page 2: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/2.jpg)
Objectives
When you complete this chapter, you will be able to:
• Use table elements
• Use table headers and footers
• Group columns
• Style table borders
• Apply padding, margins, and floats to tables
• Style table background colors
• Apply table styles
2Web Design Principles 5th Ed.
![Page 3: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/3.jpg)
Using Table Elements
![Page 4: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/4.jpg)
4
Using Table Elements
• The HTML table elements allow the arrangement of data into rows of cells and columns
• The table element <table> contains the table information, which consists of:– Header element <th>– Row element <tr>– Data cell alignment <td>
Web Design Principles 5th Ed.
![Page 5: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/5.jpg)
5Web Design Principles 5th Ed.
![Page 6: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/6.jpg)
6Web Design Principles 5th Ed.
![Page 7: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/7.jpg)
Collapsing Table Borders
• Tables are more legible with the table borders collapsed
• Use the border-collapsed property
table {border-collapse: collapse;}
7Web Design Principles 5th Ed.
![Page 8: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/8.jpg)
8Web Design Principles 5th Ed.
![Page 9: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/9.jpg)
Spanning Rows
• The rowspan attribute lets you create cells that span multiple rows
<td class="title" rowspan="6">
Best-Selling Albums Worldwide</td>
9Web Design Principles 5th Ed.
![Page 10: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/10.jpg)
10Web Design Principles 5th Ed.
![Page 11: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/11.jpg)
Using Table Headers and Footers
![Page 12: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/12.jpg)
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
12Web Design Principles 5th Ed.
![Page 13: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/13.jpg)
Using Table Headers and Footers
thead {
font-family: arial;
background-color: #ccddee;
}
tfoot {
background-color: #ddccee;
font-family: times, serif;
font-size: .9em;
font-style: italic;
}
13Web Design Principles 5th Ed.
![Page 14: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/14.jpg)
14Web Design Principles 5th Ed.
![Page 15: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/15.jpg)
Grouping Columns
![Page 16: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/16.jpg)
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
16Web Design Principles 5th Ed.
![Page 17: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/17.jpg)
17Web Design Principles 5th Ed.
![Page 18: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/18.jpg)
18Web Design Principles 5th Ed.
![Page 19: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/19.jpg)
Styling the Caption
• You can position the caption on the top or bottom of the table using the caption-site property
• You can also apply other style properties to enhance the caption text:
caption {text-align: left;
font-style: italic;
padding-bottom: 10px;
}
19Web Design Principles 5th Ed.
![Page 20: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/20.jpg)
20Web Design Principles 5th Ed.
![Page 21: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/21.jpg)
Styling Table Borders
![Page 22: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/22.jpg)
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
22Web Design Principles 5th Ed.
![Page 23: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/23.jpg)
Styling Table Borders
• To create a table with an outside border only:
table {
border: solid 1px black;
border-collapse: collapse;
}
23Web Design Principles 5th Ed.
![Page 24: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/24.jpg)
24Web Design Principles 5th Ed.
![Page 25: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/25.jpg)
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;
}
25Web Design Principles 5th Ed.
![Page 26: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/26.jpg)
26Web Design Principles 5th Ed.
![Page 27: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/27.jpg)
Styling Table Borders
• You can also style individual rows or cells and apply cell borders
th {
border-bottom: solid thick blue;
background-color: #ccddee;
}
27Web Design Principles 5th Ed.
![Page 28: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/28.jpg)
28Web Design Principles 5th Ed.
![Page 29: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/29.jpg)
Applying Padding, Margins, and Floats to Tables
![Page 30: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/30.jpg)
Using Padding
• You can enhance the legibility of your table data with padding
• This style rule adds five pixels of padding to both types of table data elements
th, td {padding: 5px;}
30Web Design Principles 5th Ed.
![Page 31: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/31.jpg)
31Web Design Principles 5th Ed.
![Page 32: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/32.jpg)
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;
}
32Web Design Principles 5th Ed.
![Page 33: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/33.jpg)
33Web Design Principles 5th Ed.
![Page 34: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/34.jpg)
Styling Table Background Colors
![Page 35: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/35.jpg)
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
35Web Design Principles 5th Ed.
![Page 36: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/36.jpg)
36Web Design Principles 5th Ed.
![Page 37: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/37.jpg)
Creating Alternate Color Rows
• Table data is easier to read when alternate rows have a distinguishing background color
• Write a style rule for the odd or even row using a class selector
tr.odd td {background-color: #eaead5;}
37Web Design Principles 5th Ed.
![Page 38: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/38.jpg)
38Web Design Principles 5th Ed.
![Page 39: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/39.jpg)
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;
}
39Web Design Principles 5th Ed.
![Page 40: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/40.jpg)
40Web Design Principles 5th Ed.
![Page 41: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/41.jpg)
Summary
• Use tables for presentation of data, not for page layout
• Use the grouping elements to apply styles to groups of rows or columns or to the header, body, and footer of a table
• Apply borders to both the <table> and cell (<th> and <td>) elements to display a table border on the entire table
• Use the border-collapse property to make table data more legible
41Web Design Principles 5th Ed.
![Page 42: Ppt ch10](https://reader035.fdocuments.us/reader035/viewer/2022062617/54bb621e4a795985098b45a4/html5/thumbnails/42.jpg)
Summary
• Always 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
• Specify background colors or hovers to aid in the legibility of your data
42Web Design Principles 5th Ed.