2_Computer science grade 10 Tables_presentation_2_ 2 variant

Tables

10.4.2.1 use HTML in web-development

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.

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:

HTML Tables

5

Simple HTML Tables – Example

	Lesson 1
	Lesson 2
	Lesson 2 - Demos

Simple HTML Tables

Live Demo

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

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

9

Complete HTML Table: Example

table header

footer

Last comes the body (data)

 header column

column width definitions

10

Complete HTML Table: Example (2)

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

Deprecated: use CSS instead!