2_Computer science grade 10 Tables_presentation_2_ 2 variant
Оценка 4.6

2_Computer science grade 10 Tables_presentation_2_ 2 variant

Оценка 4.6
pptx
09.05.2020
2_Computer science grade 10 Tables_presentation_2_ 2 variant
2_Computer science grade 10 Tables_presentation_2_ 2 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.

Tables represent tabular data A table consists of one or several rows

Tables represent tabular data A table consists of one or several rows

4

Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns
Tables comprised of several core tags:

: begin / end the table
: create a table row
: create tabular data (cell)
Tables should not be used for layout
Use CSS floats and positioning styles instead

HTML Tables

Simple HTML Tables – Example

Simple HTML Tables – Example

5

Simple HTML Tables – Example














Lesson 1
Lesson 2
Lesson 2 - Demos

Simple HTML Tables Live Demo

Simple HTML Tables Live Demo

Simple HTML Tables

Live Demo

Two kinds of cells in HTML tables

Two kinds of cells in HTML tables

Two kinds of cells in HTML tables
Data cells
Hold the table data –
Header cells
Hold the column names –
Semantically separate data and headers

Data Cells and Header Cells

Full Name Grade
Mariela Anderson Very Good (5)
Georgi Georgiev Exellent (6)

Table rows split into several semantic sections: denotes the table header

Table rows split into several semantic sections: denotes the table header

8

Table rows split into several semantic sections:
denotes the table header
Contains elements, instead of cells
denotes collection of table rows holding table data
denotes table footer
It may comes before the elements, but is displayed last
and define columns
Used to assign column widths

Complete HTML Tables

Complete HTML Table: Example

Complete HTML Table: Example

9

Complete HTML Table: Example















Column 1Column 2
Footer 1Footer 2
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2

table header

footer

Last comes the body (data)

 header column

column width definitions

Column 1 Column 2 Footer 1 Footer 2

Column 1 Column 2 Footer 1 Footer 2















Column 1Column 2
Footer 1Footer 2
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2

10

Complete HTML Table: Example (2)

Although the footer is before the data in the code, it is displayed last

Deprecated: use CSS instead!

Скачать файл