Презентация по информатике на тему _Создание таблиц на HTML _..ppt
ssuser2621cb
5 views
17 slides
Sep 17, 2025
Slide 1 of 17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
About This Presentation
итмитмитмит
Slide Content
Основы языка HTML
(создание таблиц)
(создание таблиц)
Таблицы
Таблица в HTML создаётся тегами
< TABLE>и< /TABLE>,
строки таблицы (помещаются между тегами
< TABLE> и < /TABLE>) тегами< TR>и< /TR>,
а столбцы таблицы (помещаются между
тегами
< TR> и < /TR>) тегами< TD>и< /TD>.
<TH> и </TH> создание одной ячейки
Таблица в HTML создаётся тегами
< TABLE>и< /TABLE>,
строки таблицы (помещаются между тегами
< TABLE> и < /TABLE>) тегами< TR>и< /TR>,
а столбцы таблицы (помещаются между
тегами
< TR> и < /TR>) тегами< TD>и< /TD>.
<TH> и </TH> создание одной ячейки
Таблицы
Например, создадим таблицу, состоящую из одной
строки и двух столбцов. HTML-код будет
выглядеть так:
< table>— начало таблицы
< tr>— начало строки
< td>Первая ячейка< /td>— первый столбец
< td>Вторая ячейка< /td>— второй столбец
< /tr>— конец строки
< /table>— конец таблицы
Например, создадим таблицу, состоящую из одной
строки и двух столбцов. HTML-код будет
выглядеть так:
< table>— начало таблицы
< tr>— начало строки
< td>Первая ячейка< /td>— первый столбец
< td>Вторая ячейка< /td>— второй столбец
< /tr>— конец строки
< /table>— конец таблицы
Примечание. Помни, браузер выводит
HTML-код, как текст, ставим после
угловой скобки «<» пробел.
Этот же код можно записать и так:
< table>< tr>< td> Первая ячейка< /td>
< td> Вторая ячейка< /td>< /tr>< /table>
HTML-код, как текст, ставим после
угловой скобки «<» пробел.
Этот же код можно записать и так:
< table>< tr>< td> Первая ячейка< /td>
< td> Вторая ячейка< /td>< /tr>< /table>
Рамка таблицы (границы)
По-умолчанию, таблица в браузерах
представляется без рамки.
Чтобы рамка таблицы была видна, используется
атрибут «border»:
< table border="1">
< tr>
< td>Первая ячейка< /td>
< td>Вторая ячейка< /td>
< /tr>
< /table>
По-умолчанию, таблица в браузерах
представляется без рамки.
Чтобы рамка таблицы была видна, используется
атрибут «border»:
< table border="1">
< tr>
< td>Первая ячейка< /td>
< td>Вторая ячейка< /td>
< /tr>
< /table>
Рамка таблицы (границы)
И тогда браузер покажет:
Первая ячейка Вторая ячейка
Первая ячейка Вторая ячейка
И тогда браузер покажет:
Первая ячейка Вторая ячейка
Первая ячейка Вторая ячейка
Значение атрибута «border» влияет только на
внешнюю рамку, границы между ячейками
изменять нельзя. Например, если изменить
значение атрибута «border» с «1» на «5»:
< table border="5">
< tr>
< td>Первая ячейка< /td>
< td>Вторая ячейка< /td>
< /tr>
< /table>
Тогда в браузере мы увидим:
Первая ячейка Вторая ячейка
Первая ячейка Вторая ячейка
Объединение ячеек таблицы
•Чтобы объединить ячейки таблицы по
горизонтали (столбцам) или по вертикали
(строкам), в HTML применяются
следующие атрибуты:
•colspan— объединение ячеек по
горизонтали (столбцам);
•rowspan— объединение ячеек по вертикали
(строкам).
•Чтобы объединить ячейки таблицы по
горизонтали (столбцам) или по вертикали
(строкам), в HTML применяются
следующие атрибуты:
•colspan— объединение ячеек по
горизонтали (столбцам);
•rowspan— объединение ячеек по вертикали
(строкам).
Тогда в браузере мы увидим:
: Первая и вторая ячейки Третья ячейка
Четвертая
ячейка
Пятая ячейка Шестая ячейка
: Первая и вторая ячейки Третья ячейка
Четвертая
ячейка
Пятая ячейка Шестая ячейка
Форматирование текста
Изменить начертание шрифта
позволяют следующие тэги:
<B> …</B> Жирный
<I> … </I> Курсив
<U>…</U> Подчеркнутый
<B> <I> <U> …</U></I></B> Жирный подчеркнутый курсив
<TT> …</TT> Равноширинный
<EM> …</EM> Выделение
Изменить начертание шрифта
позволяют следующие тэги:
<B> …</B> Жирный
<I> … </I> Курсив
<U>…</U> Подчеркнутый
<B> <I> <U> …</U></I></B> Жирный подчеркнутый курсив
<TT> …</TT> Равноширинный
<EM> …</EM> Выделение
Тэги физической разметки HTML
12
Курсив (italic):
<i>Вася</i> Вася
Жирный (bold):
<b>Вася</b> Вася
Подчёркивание (underline):
<u>Вася</u> Вася
Зачёркивание (strikeout):
<s>Вася</s>
Верхний индекс (superscript):
Вася<sup>2</sup> Вася
2
Нижний индекс (subscript):
Вася<sub>2</sub> Вася
2
12
Курсив (italic):
<i>Вася</i> Вася
Жирный (bold):
<b>Вася</b> Вася
Подчёркивание (underline):
<u>Вася</u> Вася
Зачёркивание (strikeout):
<s>Вася</s>
Верхний индекс (superscript):
Вася<sup>2</sup> Вася
2
Нижний индекс (subscript):
Вася<sub>2</sub> Вася
2
Создание Web – страницы «Таблица погоды».
<html>
<head>
<title>Tabliza</title>
</head>
<body >
<center> <h1> <b> Таблица погоды
</b></h1></center>
<HR>
<table align=center border=l >
<tr> <th>День недели</th>
<th>Погода</th></tr>
<tr><td>понедельник</td>
<td>солнечная</td></tr>
<tr><td>вторник</td>
<td>солнечная</td></tr>
<tr><td>среда</td>
<td>дожливая</td></tr>
</table>
</body >
</html>
<html>
<head>
<title>Tabliza</title>
</head>
<body >
<center> <h1> <b> Таблица погоды
</b></h1></center>
<HR>
<table align=center border=l >
<tr> <th>День недели</th>
<th>Погода</th></tr>
<tr><td>понедельник</td>
<td>солнечная</td></tr>
<tr><td>вторник</td>
<td>солнечная</td></tr>
<tr><td>среда</td>
<td>дожливая</td></tr>
</table>
</body >
</html>
Создание Web – страницы «Таблица погоды».
День недели Погода
Понедельник Солнечная
Вторник Солнечная
среда дождливая
День недели Погода
Понедельник Солнечная
Вторник Солнечная
среда дождливая
Гиперссылка
Гипертекст (англ. hypertext) – это текст,
содержащий гиперссылки.
Гиперссылка (англ. hyper reference) – это
«активная» ссылка на другой объект (часть того
же документа, другой документ, файл, каталог,
программу и т.д.).
Гипертекст (англ. hypertext) – это текст,
содержащий гиперссылки.
Гиперссылка (англ. hyper reference) – это
«активная» ссылка на другой объект (часть того
же документа, другой документ, файл, каталог,
программу и т.д.).
Гиперссылки (локальные -внутренние)
16
Переход на
<a href="newpage.html">новую страницу</a>.
(тэг)
(гиперссылка)
страница в том же каталоге:
во вложенном каталоге:
<a href="news/info.htm">Информация</a>.
в родительском каталоге:
<a href="../info.htm">Информация</a>.
в соседнем каталоге:
<a href="../news/info.htm">Информация</a>.
16
Переход на
<a href="newpage.html">новую страницу</a>.
(тэг)
(гиперссылка)
страница в том же каталоге:
во вложенном каталоге:
<a href="news/info.htm">Информация</a>.
в родительском каталоге:
<a href="../info.htm">Информация</a>.
в соседнем каталоге:
<a href="../news/info.htm">Информация</a>.
Гиперссылки (внешние)
17
<a href="http://example.net/news/info.htm ">
Информация</a>.
на URL:
на главную страницу сайта:
<a href="http://example.net">Информация</a>.
для скачивания архива:
<a href="http://example.net/game.zip">
Скачать</a>.
для запуска почтовой программы:
<a href="mailto:[email protected]">
Напишите мне!</a>
17
<a href="http://example.net/news/info.htm ">
Информация</a>.
на URL:
на главную страницу сайта:
<a href="http://example.net">Информация</a>.
для скачивания архива:
<a href="http://example.net/game.zip">
Скачать</a>.
для запуска почтовой программы:
<a href="mailto:[email protected]">
Напишите мне!</a>
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 5
- Slides 17
- Age 77 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views