Web Development & Design Foundations with HTML5 8th Edition

Сентябрь 7, 2022

Главная
Алгебра
Web Development & Design Foundations with HTML5 8th Edition

Содержание

2. Learning Outcomes In this chapter, you will learn how to ... Create a basic table with
3. HTML Table Tables are used on web pages to organize tabular information Composed of rows and
4. HTML Table Elements Contains the table Contains a table row Contains a table cell Configures a
5. HTML Table Example Bird Sightings Name Date Bobolink 5/25/10 Upland Sandpiper 6/03/10
6. HTML Table Example 2 Name Birthday James 11/08 Karen 4/17 Sparky 11/28 Using the Element
7. HTML Table Attributes align (obsolete) bgcolor (obsolete) border cellpadding (obsolete) cellspacing (obsolete) summary (obsolete but may
8. HTML Common Table Cell Attributes align (obsolete) bgcolor (obsolete) colspan rowspan valign (obsolete) height (deprecated) width
9. HTML colspan Attribute Birthday List James 11/08 Karen 4/17
10. HTML rowspan Attribute This spans two rows Row 1 Column 2 Row 2 Column 2
11. Accessibility and Tables Use table header elements ( tags) to indicate column or row headings. Use
12. Bird Sightings Name Date Bobolink 5/25/10 Upland Sandpiper 6/03/10
13. Checkpoint Describe the purpose of using a table on a web page. How is the text
14. Using CSS to Style a Table
15. CSS Structural Pseudo-classes Zebra Stripe a Table tr:nth-of-type(even) { background-color: #eaeaea; }
16. Table Row Groups table head rows table body rows table footer rows Time Sheet Day Hours
17. Checkpoint 1. Describe a reason to configure a table with CSS properties instead of HTML attributes.
19. Скачать презентацию

Слайд 2

Learning Outcomes
In this chapter, you will learn how to ...
Create a

basic table with the table, table row, table header, and table cell elements
Configure table sections with the thead, tbody, and tfoot elements
Increase the accessibility of a table
Style an HTML table with CSS
Describe the purpose of CSS structural pseudo-classes

Слайд 3

HTML Table
Tables are used on web pages to organize tabular information
Composed

of rows and columns – similar to a spreadsheet.
Each individual table cell is at the intersection of a specific row and column.
Configured with table, tr, and td elements

Слайд 4

HTML Table Elements
Contains the table
Contains a table row
table head rows
table body rows
table footer rows
Contains a table
cell
Configures a description of the table
Слайд 5
HTML Table Example

Bird Sightings
Name Date

Bobolink 5/25/10

Upland Sandpiper 6/03/10

Слайд 6
HTML Table Example 2

Name Birthday

James 11/08

Karen 4/17

Sparky 11/28

Using the
Element
Слайд 7
HTML Table Attributes
align (obsolete)
bgcolor (obsolete)
border
cellpadding (obsolete)
cellspacing (obsolete)
summary (obsolete but may
be reinstated)
width (obsolete)
Use CSS to configure table characteristics instead of HTML attributes
Слайд 8
HTML Common Table Cell Attributes
align (obsolete)
bgcolor (obsolete)
colspan
rowspan
valign (obsolete)
height (deprecated)
width (deprecated)
Use CSS
to configure most table cell characteristics instead of HTML attributes
Слайд 9
HTML colspan Attribute

Birthday List

James 11/08

Karen 4/17

Слайд 10
HTML rowspan Attribute

This spans two rows Row
1 Column 2

Row 2 Column 2

Слайд 11
Accessibility and Tables
Use table header elements (
tags) to indicate column
or row headings.
Use the caption element to provide a text title or caption for the table.
Complex tables: Associate table cell values with their corresponding headers
tag id attribute
tag headers attribute
Слайд 12

headers="name">Bobolink

Bird Sightings
Name Date

5/25/10

Upland Sandpiper 6/03/10

Слайд 13
Checkpoint
Describe the purpose of using a table on a web page.
How
is the text contained in a th element displayed by the browser?
Describe one coding technique that increases the accessibility of an HTML table.
Слайд 14
Using CSS to Style a Table
Слайд 15
CSS Structural Pseudo-classes
Zebra Stripe a Table tr:nth-of-type(even) { background-color: #eaeaea; }
Слайд 16
Table Row Groups

…

Time Sheet

Day Hours

Monday 4

Friday 3

Total 18

Time Sheet
Day	Hours
Monday	4
Friday	3
Total	18

Слайд 17

Checkpoint
1. Describe a reason to configure a table with CSS properties

instead of HTML attributes.
2. List three elements that are used to group table rows.

Web Development &amp; Design Foundations with HTML5 8th Edition

Содержание

Learning OutcomesIn this chapter, you will learn how to ...Create a

HTML TableTables are used on web pages to organize tabular informationComposed

HTML Table Example Bird Sightings Name Date Bobolink 5/25/10 Upland Sandpiper 6/03/10

HTML Table Example 2 Name Birthday James 11/08 Karen 4/17 Sparky 11/28 Using the

HTML Table Attributesalign (obsolete)bgcolor (obsolete)border cellpadding (obsolete)cellspacing (obsolete)summary (obsolete but may

HTML Common Table Cell Attributesalign (obsolete)bgcolor (obsolete)colspanrowspanvalign (obsolete)height (deprecated)width (deprecated)Use CSS

HTML colspan Attribute Birthday List James 11/08 Karen 4/17

HTML rowspan Attribute This spans two rows Row1 Column 2 Row 2 Column 2

Accessibility and TablesUse table header elements (

headers="name">Bobolink Bird Sightings Name Date 5/25/10 Upland Sandpiper 6/03/10

CheckpointDescribe the purpose of using a table on a web page.How

Using CSS to Style a Table

CSS Structural Pseudo-classesZebra Stripe a Table tr:nth-of-type(even) { background-color: #eaeaea; }

Table Row Groups

Checkpoint1. Describe a reason to configure a table with CSS properties

Похожие презентации

Web Development & Design Foundations with HTML5 8th Edition

Learning Outcomes
In this chapter, you will learn how to ...
Create a

HTML Table
Tables are used on web pages to organize tabular information
Composed

HTML Table Example

Bird Sightings
Name Date

Bobolink 5/25/10

Upland Sandpiper 6/03/10

HTML Table Example 2

Name Birthday

James 11/08

Karen 4/17

Sparky 11/28

Using the

HTML Table Attributes
align (obsolete)
bgcolor (obsolete)
border
cellpadding (obsolete)
cellspacing (obsolete)
summary (obsolete but may

HTML Common Table Cell Attributes
align (obsolete)
bgcolor (obsolete)
colspan
rowspan
valign (obsolete)
height (deprecated)
width (deprecated)
Use CSS

HTML colspan Attribute

Birthday List

James 11/08

Karen 4/17

HTML rowspan Attribute

This spans two rows Row
1 Column 2

Row 2 Column 2

Accessibility and Tables
Use table header elements (

headers="name">Bobolink

Bird Sightings
Name Date

5/25/10

Upland Sandpiper 6/03/10

Checkpoint
Describe the purpose of using a table on a web page.
How

CSS Structural Pseudo-classes
Zebra Stripe a Table tr:nth-of-type(even) { background-color: #eaeaea; }

Checkpoint
1. Describe a reason to configure a table with CSS properties