PRACTICAL WORK HTML №6. tables

Purpose of work: To learn how to create tables using the

tag.
Work tasks:

Learn how to create spreadsheets.

Get skills in working with the command

, attributes

,

Providing means: Collection of descriptions of practical work; Windows XP operating system, Internet Explorer program; Notepad program; Personal Computer.
Requirements for the report: Present the results of the practical work in the form of a lab6.html file on disk.

Work technology:
Theoretical part :
When creating websites, tables are used very often. The table is defined by the tag:

The table consists of rows and columns (cells), so we also need to specify them.

– table row

– column (cell) of the table

Let’s define a table consisting of two rows and three columns (cells). For clarity, the cells of the table are highlighted in different colors. The table borders are not set so you can’t see them

Fill in the resulting frame with numbers:

1×1 1×2 1×3
2×1 2×2 2×3

The background is set with the bgcolor=”background_color” parameter. The background can be set for the table as a whole, for a row, for a column (within one row). Set the background for each column. In the height and width parameters – you can set them for the entire table, for one row, for a cell (column).

1×1
1×2
1×3
2×1
2×2
2×3

colspan and rowspan parameters. Colspan – determines the number of columns that this cell extends, and rowspan – the number of rows (these parameters can take a value of 2 or more, i.e. our cell can stretch over two or more columns (rows)).

We use the colspan=2 parameter, setting it for a 1×1 cell. The code is the following:

1×1
1×2
2×1
2×2
2×3


Try to write the code for such a table yourself (you should have a 2×3 cell disappear). To fix it, write the code for the table:

You can get rid of the space between table cells.
This is achieved by setting the cellspacing attribute to zero:

1×1
1×2
2×1
2×2

You can increase the space between cells, let’s say cellspacing=5, then we get this:
Typically, the cellspacing attribute, seen in manuals and tutorials, is paired with the cellpadding attribute, which adds white space between the contents of a cell and its borders. To make it clearer, I will first press the text of the cells of the first row to the top, in the bottom – to the bottom, using the valign attribute

1×1
1×2
2×1
2×2

Run on your computer:
Exercise 1

Create a lab.html file, format it as a document, in which, in the title of the browser window, there should be the inscription “Practical”.

Practical No. 6 – heading (in the center and in the appropriate font).

Create tables according to the task. Set the background to the cells yellow, green, according to the picture:

one)

2)

Create a table with three rows and four columns, the width of the table is 60% of the screen width.

The width of the left column is 30% of the width of the table.

Set background color for table elements, set frame color.

Create a general heading: Work with tables (centered and in the appropriate font);

8. Save the file as lab.txt in notepad and as lab.html for viewing in a browser.
Task 2
9. Create a document in which the title of the browser window should contain the inscription “Practical part 2”. Using the table creation commands, create a table according to the specified task.
Pay attention to the width of the first column (set as a percentage of the table width), font (Italic, Courier New, Arial) and text position (centered, left, right).

10. Save the file in the “Grade 10” folder as your name_date.txt in notepad and as your name_date.html for viewing in a browser.

Be First to Comment

Leave a Reply

Your email address will not be published.