2 Computer science grade 10 Tables_presentation1_ 1 variant
Оценка 5

2 Computer science grade 10 Tables_presentation1_ 1 variant

Оценка 5
pptx
09.05.2020
2 Computer science grade 10 Tables_presentation1_ 1 variant
2 Computer science grade 10 Tables_presentation1_ 1 variant.pptx

Tables

Tables

Tables

Learning objective 10.4.2.1 use

Learning objective 10.4.2.1 use

Learning objective

10.4.2.1 use HTML in web-development

Expected results Students know -

Expected results Students know -

Expected results

Students know

- Demonstrates the skill of creating, saving and opening your own web page.
- Demonstrates knowledge of web document structure
- Uses tags to create a table on your own webpage.

Describe the structure of the HTML webpage

Describe the structure of the HTML webpage

Describe the structure of the HTML webpage.

What tag is used to create the Lists?

What tags are used for formatting text?

HTML Tables An HTML table is defined with the tag

HTML Tables An HTML table is defined with the tag

HTML Tables

An HTML table is defined with the 

 tag.
Each table row is defined with the  tag. A table header is defined with the                                                                
 tag.
By default, table headings are bold and centered. A table data/cell is defined with the 
 tag.

  

FirstnameLastnameAge
JillSmith50
EveJackson94

Firstname

Lastname

Age

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

HTML Table - Adding a Border A border is set using the

HTML Table - Adding a Border A border is set using the

HTML Table - Adding a Border

A border is set using the CSS border property:

table, th, td
{     border: 1px solid black; }

If you want the borders to collapse into one border, add the CSS border-collapse property:

table, th, td {     border: 1px solid black;     border-collapse: collapse; }

Firstname

Lastname

Age

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

HTML Table - Collapsed Borders

Table - Adding Cell Padding Cell padding specifies the space between the cell content and its borders

Table - Adding Cell Padding Cell padding specifies the space between the cell content and its borders

Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.
To set the padding, use the CSS padding property:

th, td {     padding: 3px; }

Firstname

Lastname

Age

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

Firstname

Lastname

Age

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

th, td {     padding: 9px; }

HTML Table - Left-align Headings

HTML Table - Left-align Headings

HTML Table - Left-align Headings

By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:

th {     text-align: left; }

Firstname

Lastname

Age

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

HTML Table - Adding Border Spacing

HTML Table - Adding Border Spacing

HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:

table {     border-spacing: 5px; }

table {     border-spacing: 25px; }

Questions Please

Questions Please

Questions Please

Task

Task

Task

2 Computer science grade 10 Tables_presentation1_ 1 variant

2 Computer science grade 10 Tables_presentation1_ 1 variant

2 Computer science grade 10 Tables_presentation1_ 1 variant

2 Computer science grade 10 Tables_presentation1_ 1 variant
Скачать файл