1Tables_methodological_instructions_ 1 variant (1)

Methodological Instructions

Theme: Tables

Aim: 10.4.2.1 use HTML in web-development

Assessment criteria

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

Key words and phrases:

• Website, webpage, WYSIWYG, text editor, CMS, Microsoft Front Page, Adobe Dream Weaver, Notepad, Joomla, Word Press, HTML

A series of useful phrases for dialogue / writing:

• HTML is used for ,,,,

• We use tags for ....

• Tags are ...

• I used (a) title tag ... to ...

I.                   Theory

A table is nothing but a means of arranging data in rows and columns. This concept has been present in our society for a long time and has been adopted by HTML in its early stages, as a way to convey information that might otherwise not be obvious or readily understood.

In HTML documents a table can be considered, in a simple way, as a group of rows containing each a group of cells. This is conceptually different to a group of columns containing a group of cells, and this difference will have some impact in the composition and behavior of the table.

Like many other structures in HTML, tables are constructed using elements. In particular, a basic table can be declared using three elements, namely, table (the main container), tr (representing the rows, containers for cells) and td (representing plain cells). Let's make it clear with an example:

<table class="egt">

  <tr>

    <td>Cell 1</td>

    <td>Cell 2</td>

    <td>Cell 3</td>

  </tr>

  <tr>

    <td>Cell 4</td>

    <td>Cell 5</td>

    <td>Cell 6</td>

  </tr>

</table>

Now that the basic structure of a table has been treated, it's time to start making more useful tables.

A header cell is a special type of cell used to organize and categorize other cells in the table. Having said this, it's hard to imagine a table where a header cell wouldn't be of use. Almost any table can benefit from a well placed group of header cells.

In the following example, we're building a table to display information about the weather in the upcoming days. Here, the header cells, represented by the th element, are placed in the first row of the table, on top of the regular cells.

<table class="egt">

  <tr>

    <th>Today</th>

    <th>Tomorrow</th>

    <th>Monday</th>

  </tr>

  <tr>

    <td>Sunny</td>

    <td>Mostly sunny</td>

    <td>Partly cloudy</td>

  </tr>

  <tr>

    <td>19°C</td>

    <td>17°C</td>

    <td>12°C</td>

  </tr>

  <tr>

    <td>E 13 km/h</td>

    <td>E 11 km/h</td>

    <td>S 16 km/h</td>

  </tr>

</table>

Visual Aids and Materials.

1.      Slides

2.      http://www.htmlquick.com/tutorials/tables.html

3.      https://www.w3schools.com/html/html_tables.asp

4.      http://htmlbook.ru/html/table

5.      https://developer.mozilla.org/ru/docs/Learn/HTML/Tables/Basics

6.      https://www.tutorialspoint.com/ru/html/html_tables.htm

7.      https://html.com/tables/

8.      https://www.youtube.com/watch?v=BczLWImAmBk

9.      https://www.youtube.com/watch?v=GkuJfBPgWrQ

Скачано с www.znanio.ru