SlideShare a Scribd company logo
1 of 42
Download to read offline
Web Design Principles
5th
Edition
Chapter Ten
Working with Data Tables
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.
Using Table Elements
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.
5Web Design Principles 5th
Ed.
6Web Design Principles 5th
Ed.
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.
8Web Design Principles 5th
Ed.
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.
10Web Design Principles 5th
Ed.
Using Table Headers and Footers
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.
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.
14Web Design Principles 5th
Ed.
Grouping Columns
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.
17Web Design Principles 5th
Ed.
18Web Design Principles 5th
Ed.
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.
20Web Design Principles 5th
Ed.
Styling Table Borders
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.
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.
24Web Design Principles 5th
Ed.
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.
26Web Design Principles 5th
Ed.
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.
28Web Design Principles 5th
Ed.
Applying Padding, Margins, and
Floats to Tables
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.
31Web Design Principles 5th
Ed.
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.
33Web Design Principles 5th
Ed.
Styling Table Background Colors
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.
36Web Design Principles 5th
Ed.
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.
38Web Design Principles 5th
Ed.
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.
40Web Design Principles 5th
Ed.
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.
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.

More Related Content

What's hot

Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheetssmithaps4
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?Michael Posso
 
Chapter 23: Web Images
Chapter 23: Web ImagesChapter 23: Web Images
Chapter 23: Web ImagesSteve Guinan
 
Spsbe using js-linkanddisplaytemplates
Spsbe   using js-linkanddisplaytemplatesSpsbe   using js-linkanddisplaytemplates
Spsbe using js-linkanddisplaytemplatesPaul Hunt
 
Implementing SharePoint: Site Customization and Branding
Implementing SharePoint: Site Customization and BrandingImplementing SharePoint: Site Customization and Branding
Implementing SharePoint: Site Customization and Brandingdrudolph11
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRicha Goel
 
Krishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsessionKrishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsessionKrishan Mohan
 
CSS tutorial chapter 3
CSS tutorial chapter 3CSS tutorial chapter 3
CSS tutorial chapter 3jeweltutin
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry universityCIS363A
 

What's hot (19)

Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
Joomla! theming
Joomla! themingJoomla! theming
Joomla! theming
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
 
Chapter 7: Images
Chapter 7: ImagesChapter 7: Images
Chapter 7: Images
 
Chapter 23: Web Images
Chapter 23: Web ImagesChapter 23: Web Images
Chapter 23: Web Images
 
Theming in React
Theming in ReactTheming in React
Theming in React
 
Css
CssCss
Css
 
Ui devopler
Ui devoplerUi devopler
Ui devopler
 
Spsbe using js-linkanddisplaytemplates
Spsbe   using js-linkanddisplaytemplatesSpsbe   using js-linkanddisplaytemplates
Spsbe using js-linkanddisplaytemplates
 
Implementing SharePoint: Site Customization and Branding
Implementing SharePoint: Site Customization and BrandingImplementing SharePoint: Site Customization and Branding
Implementing SharePoint: Site Customization and Branding
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Krishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsessionKrishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsession
 
CSS tutorial chapter 3
CSS tutorial chapter 3CSS tutorial chapter 3
CSS tutorial chapter 3
 
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
 

Similar to Ppt ch10

9781111528705_PPT_ch10.ppt
9781111528705_PPT_ch10.ppt9781111528705_PPT_ch10.ppt
9781111528705_PPT_ch10.pptSimonChirambira
 
Tables in databases - Relationships and diagrams
Tables in  databases - Relationships and diagramsTables in  databases - Relationships and diagrams
Tables in databases - Relationships and diagramsclement swarnappa
 
Chapter 6 Working with Tables and Columns
Chapter 6 Working with Tables and ColumnsChapter 6 Working with Tables and Columns
Chapter 6 Working with Tables and ColumnsDr. Ahmed Al Zaidy
 
MIS 226: Chapter 4
MIS 226: Chapter 4MIS 226: Chapter 4
MIS 226: Chapter 4macrob14
 
Lesson 5 cs5
Lesson 5   cs5Lesson 5   cs5
Lesson 5 cs5dtelepos
 
9781111528705_PPT_ch05.ppt
9781111528705_PPT_ch05.ppt9781111528705_PPT_ch05.ppt
9781111528705_PPT_ch05.pptSimonChirambira
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfelayelily
 
9781111528705_PPT_ch04.ppt
9781111528705_PPT_ch04.ppt9781111528705_PPT_ch04.ppt
9781111528705_PPT_ch04.pptSimonChirambira
 
9781111528705_PPT_ch09.ppt
9781111528705_PPT_ch09.ppt9781111528705_PPT_ch09.ppt
9781111528705_PPT_ch09.pptSimonChirambira
 
Geek Sync | The Universe of Oracle Indexing
Geek Sync | The Universe of Oracle IndexingGeek Sync | The Universe of Oracle Indexing
Geek Sync | The Universe of Oracle IndexingIDERA Software
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheetssmitha273566
 

Similar to Ppt ch10 (20)

9781111528705_PPT_ch10.ppt
9781111528705_PPT_ch10.ppt9781111528705_PPT_ch10.ppt
9781111528705_PPT_ch10.ppt
 
Tables in databases - Relationships and diagrams
Tables in  databases - Relationships and diagramsTables in  databases - Relationships and diagrams
Tables in databases - Relationships and diagrams
 
Ddpz2613 topic4 table
Ddpz2613 topic4 tableDdpz2613 topic4 table
Ddpz2613 topic4 table
 
Chapter 6 Working with Tables and Columns
Chapter 6 Working with Tables and ColumnsChapter 6 Working with Tables and Columns
Chapter 6 Working with Tables and Columns
 
MIS 226: Chapter 4
MIS 226: Chapter 4MIS 226: Chapter 4
MIS 226: Chapter 4
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
 
Lesson 5 cs5
Lesson 5   cs5Lesson 5   cs5
Lesson 5 cs5
 
9781111528705_PPT_ch05.ppt
9781111528705_PPT_ch05.ppt9781111528705_PPT_ch05.ppt
9781111528705_PPT_ch05.ppt
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdf
 
Ppt ch05
Ppt ch05Ppt ch05
Ppt ch05
 
9781111528705_PPT_ch04.ppt
9781111528705_PPT_ch04.ppt9781111528705_PPT_ch04.ppt
9781111528705_PPT_ch04.ppt
 
9781111528705_PPT_ch09.ppt
9781111528705_PPT_ch09.ppt9781111528705_PPT_ch09.ppt
9781111528705_PPT_ch09.ppt
 
Layouts
Layouts Layouts
Layouts
 
Ppt ch04
Ppt ch04Ppt ch04
Ppt ch04
 
Ppt ch09
Ppt ch09Ppt ch09
Ppt ch09
 
Excel Basics
Excel BasicsExcel Basics
Excel Basics
 
Geek Sync | The Universe of Oracle Indexing
Geek Sync | The Universe of Oracle IndexingGeek Sync | The Universe of Oracle Indexing
Geek Sync | The Universe of Oracle Indexing
 
Css
CssCss
Css
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
Week11 Lecture: CSS
Week11 Lecture: CSSWeek11 Lecture: CSS
Week11 Lecture: CSS
 

Recently uploaded

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 

Recently uploaded (20)

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 

Ppt ch10

  • 1. Web Design Principles 5th Edition Chapter Ten Working with Data Tables
  • 2. 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.
  • 4. 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.
  • 7. 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.
  • 9. 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.
  • 11. Using Table Headers and Footers
  • 12. 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.
  • 13. 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.
  • 16. 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.
  • 19. 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.
  • 22. 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.
  • 23. 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.
  • 25. 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.
  • 27. 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.
  • 29. Applying Padding, Margins, and Floats to Tables
  • 30. 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.
  • 32. 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.
  • 35. 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.
  • 37. 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.
  • 39. 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.
  • 41. 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.
  • 42. 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.