2 Computer science grade 10 Tables_presentation1_ 1 variant

  • pptx
  • 09.05.2020
Публикация на сайте для учителей

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Иконка файла материала 2 Computer science grade 10 Tables_presentation1_ 1 variant.pptx

Tables

Learning objective

10.4.2.1 use HTML in web-development

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.

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.
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 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.
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

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

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

Task