Задание 3. Набрать таблицы, используя предложенные коды.

ПРАКТИЧЕСКАЯ РАБОТА №4

ТЕМА: Таблицы в HTML

Цель работы: Изучить правила и овладеть приемами создания таблиц как универсального средства форматирования картинок и текста.

Оборудование: персональный компьютер, Windows XP.

Теоретическая часть: создание таблиц.

1. Таблицы в HTML являются одним из самых необходимых элементов и самыми универсальными средствами форматирования картинок и текста.

Код простейшей таблицы 2х2 ячейки:

Начало таблицы содержит:

width - ширина (у нас 200 пикселей), border - толщина каемки/бордюра нашей таблицы (у нас 1 пиксель), cellspasing - расстояние между ячейками, cellspadding - отступ от границ ячейки внутри нее.

остальной код:

тег открытия строки тег ячейки 1 тег ячейки 2 конец строки начало второй строки тег ячейки 3 тег ячейки 4 конец второй строки конец таблицы

Вот такая вот табличка:

1	2
3	4

добавив в код сегмент:

</tr>
мы получим третью строку с двумя столбиками.
2. Количество ячеек может располагаться и по-другому – например, так:

1	2
1	3
4	5

1	3
2	3
4	5

выделение жирным в коде соответствует закрашенности серым цветом в таблице.
Все отличие такого построения таблиц заключается в появлении параметра rowspan="2"
цифра в котором соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в этой ячейке:

1	3
2	3
4	5

3.Если в симметричной таблице мы читаем слева - направо, то тут происходит то же самое, только почему же в коде впереди 2-ки стоит ячейка с цифрой 3? Все очень просто - буквально код расшифровывается, как "ячейка 1", "ячейка 3, состоящая из ДВУХ подстрок", ячейка 2, второй строки. Но физически ячейка 3 принадлежит к ПЕРВОЙ строке! Ведь HTML читается именно построчно - слева-направо.
А что будет, если поставить после 3-ки еще такую же ячейку? 3b например?

1	3	3b
2
4	5

В той ячейке тоже достаточно прописать rowspan="2".
А что, если в правой колонке нам надо три ячейки?

1	3	3b
2		3c
		3d

Читаем код: Ячейка 1 (обычная) > ячейка 3 (состоит из трех слитых воедино строк) > ячейка 3b (тоже обычная); тут у нас начинается вторая строка. Начинается она с ячейки №2, обозначаемой как "ячейка, состоящая из двух строк, т.е. слитых по вертикали ячеек", а ячейки 3с и 3d - совершенно обычные ячейки. Это немного сложно осознать с наскока, но это весьма важно - понимать очередность считывания и принцип построения.
4. Если же у нас, наличествуют ячейки, совмещенные по горизонтали, то вместо тега rowspan используется тег colspan, естественно, в той ячейке, которая занимает площадь нескольких:

1
2	3

Так же следует отдельно запомнить, что параметры, вставляемые в тег открытия строки (<tr>) НE не воспринимаются!!! Поэтому назначать теги будем только самим ячейкам или всей таблице сразу.

Порядок выполнения работы:

Задание 1. Набрать предложенные выше коды и проверить их отображение в браузере

Задание 2. Набрать таблицу, используя предложенный код. (Вид таблиц по вариантам, соответствующих номеру компьютера.)

остальной код:

добавив в код сегмент:

Вариант 1.

1	2	3	4	5
6	7	8	9	10

Вариант 2.

1	2	3	4	5
6	7	8	9	10
				11

Вариант 3.

1	2	3	4
6	7	8	9	10

Вариант 4.

1	2	3	5
6	7	8	10

Вариант 5.

6	7	8	10
1	2	3	5

Вариант 6.

1	2	3	4	5
6	7	8	9

Вариант 7.

2	3	4	5
6	7	8	9	10

Вариант 8.

2	4	5
7	9	10

Вариант 9.

1	2	3
6	7	8

Вариант 10.

1	2	3	4	5
6	7	8	9	10

Задание 3. Набрать таблицы, используя предложенные коды.

1. <table border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>

2. <table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>2</td>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>

Дата добавления: 2019-02-12; просмотров: 135; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 Следующая ⇒

Мы поможем в написании ваших работ!