Learners are able to:
use HTML tags for web page developing
use CSS when designing web pages;
use ready-made scripts when developing web pages;
use HTML tags to insert multimedia objects on a web page.
HTML (HyperText Markup Language) is a standardized markup language for documents on the World Wide Web. Most web pages contain an HTML markup (or XHTML) br
HTML tables
You can change the color of the table frame using the "bordercolor" attribute. For example:
< table border="5" bordercolor="#FF0000"> < tr> < td>Первая ячейка< /td> < td>Вторая ячейка< /td> < /tr>< /table> |
Indents in the table
To change indents between adjacent cells in a table, the HTML attribute "cellspacing" is used in HTML. Let's make the table more complicated: we make two rows of three columns and apply the attribute "cellspacing":
< table border="1" cellspacing="10"> < tr> < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td> < /tr>< /table> |
In order to specify indentation within cells, the "cellpadding" attribute is used. If we change the first line in our HTML code:
< table border="1" cellpadding="10"> < tr> < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td> < /tr>< /table> |
Combining table cells
To merge table cells horizontally (columns) or vertically (rows), HTML uses the following attributes:
colspan - combining cells horizontally (columns);
rowspan - combining cells vertically (rows).
For example, change our HTML code like this:
< table border="1" cellpadding="10"> < tr> < td colspan="2">Первая и вторая ячейки< /td>< td>Третья ячейка< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td> < /tr>< /table> |
< table border="1" cellpadding="10"> < tr> < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan="2">Третья и шестая ячейки< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td> < /tr>< /table> |
Table title
If you use a table to organize the data (and not for page layout), you might need to use a header. The title of the table is specified by the
< table border="1" cellpadding="10">< caption>Заголовок таблицы< /caption> < tr> < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td> < /tr>< /table> |
Table sizes
You can change the dimensions of a table and cells using the following attributes:
width - width of the table, column, cell;
height - the height of the table, rows, cells.
Their values are specified in pixels or percentages. For example,
< table border="1" cellpadding="10" height="50px"> < tr> < td>Первая ячейка< /td>< td width="75%">Вторая ячейка< /td>< td>Третья ячейка< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td> < /tr>< /table> |
Table background
In HTML, the background color of the table or its individual cells is set using the "bgcolor" attribute. About how to select the color of an element in HTML, we said in the lesson about the attributes of the body tag. Example:
< table border="1" cellpadding="10" bgcolor="#999999"> < tr> < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td bgcolor="#FF0000">Пятая ячейка< /td>< td>Шестая ячейка< /td> < /tr>< /table> |
You can use pictures as the background of a table or a single cell. In HTML, this is done using the "background" attribute.
< table border="1" cellpadding="10"> < tr> < td>Первая ячейка< /td>< td background="fon.jpg">Вторая ячейка< /td> < /tr> < tr> < td>Третья ячейка< /td>< td>Четвёртая ячейка< /td> < /tr>< /table> |
Choosing the font color of the html page
HTML-код: Красный цвет Синий цвет | Отображение в браузере: Красный цвет |
Changing the background color of an html page
Task
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.