HTML — таблицы

06.08.2018
Каталог статей

ПоделитьсяTweetПоделитьсяGoogle

Всем привет ! После небольшого перерыва продолжаем уроки по освоению гипер текста — HTML

При создании сайта таблицы играют не маловажную роль. Даже если просто вставлять в пост . Особенно важный элемент ( таблица ) это в landing page, то есть страничка захвата или по другому сайт воронка.

Когда верстаешь в Дримвивере  без таблицы просто не обойтись. На таблице держаться структурные элементы, например ряд изображений и подписная форма. Не на всех конечно вариантах, но на многих. С помощью таблицы можно не только показать разную информацию, тарифную сетку или график дежурств к примеру, но и взяв за основу полностью построить на таблице свой сайт? или на таблицах.

Как прописать таблицу в HTML

Задаёт таблицу тег 

 любая таблица состоит из строк и столбцов, для этого есть ещё два тега: — строка таблицы

 — столбец таблицы

Хором эти теги пишутся так:

ячейка

Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец — ячейку

Создадим  таблицу из трёх строк и трёх столбцов и используем атрибут border «рамка», чтоб прорисовать границы и пропишем значение «1«.

Надеюсь всё понятно…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

Таблица

строка1 ячейка1 строка1 ячейка2 строка1 ячейка3
строка2 ячейка1 строка2 ячейка2 строка2 ячейка3
строка3 ячейка1 строка3 ячейка2 строка3 ячейка3

посмотреть пример>>>

Прём дальше…

Объединить ячейки

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

На самом деле слово «объединить» здесь больше подойдёт чисто с позиции визуальности как в Word-е, а для HTML  лучше сказать «растянуть».

В этом нам помогут атрибуты colspan и rowspan

  • colspan — определяет какое количество столбцов будет занимать данная ячейка
  • rowspan — количество рядов занимаемое ячейкой

Предположим что в нашем примере нам необходимо «объединить» в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

Таблица

строка1 ячейка1 строка1 ячейка2 строка1 ячейка3
строка2 ячейка1 строка2 ячейка2 строка2 ячейка3
строка3 ячейка1 строка3 ячейка2 строка3 ячейка3

Пример с запоронным боком

Вот теперь видно, что ячейка растянулась на два столбца и  сдвинула третью ячейку ( строка3 ячейка3 ), которая нам теперь уже не нужна и мы  её  удаляем к такой-то бабушке.На примере видно как выпирает допущенный мной  бок, чтобы Вы поняли принцип данного действия. В следующем примере бок убираем

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

Таблица

строка1 ячейка1 строка1 ячейка2 строка1 ячейка3
строка2 ячейка1 строка2 ячейка2 строка2 ячейка3
строка3 ячейка1 строка3 ячейка2

смотреть пример>>>

ЧИТАТЬ:  Биржа фриланса — work-zilla.com

Теперь  объединим весь первый столбец в одну ячейку, используя атрибут rowspan,  растянем ячейку первой строчки первого столбца на три строки и  сразу уберём лишнее.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

Таблица

строка1 ячейка1 строка1 ячейка2 строка1 ячейка3
строка2 ячейка2 строка2 ячейка3
строка3 ячейка2

Смотреть пример>>>

Катим колёса дальше…

Размер таблицы

Размеры таблицы и ячеек по умолчанию ограничены находящимся в них в текстом. Вспомним про атрибуты высоты и ширины ( width — ширина и height — высота ), которыми мы  пользовались для растягивания рисунков, они так же применимы к тегам 

, и 

. Вот пример. В нём заданы размеры таблицы и отдельных её ячеек и вся таблица выровнена по центру  тегом 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

Таблица

строка1 ячейка1 строка1 ячейка2 строка1 ячейка3
строка2 ячейка2 строка2 ячейка3
строка3 ячейка2

пример>>>

Обратите внимание на то, что длина и ширина заданы не для всех ячеек. Потому как таблица будет выровнена по самым широким и длинным ячейкам.

Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах

смотреть  пример:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Таблица

строка1 ячейка1 строка1 ячейка2 строка1 ячейка3
строка2 ячейка1 строка2 ячейка2 строка2 ячейка3
строка3 ячейка1 строка3 ячейка2 строка3 ячейка3

Пример>>>

В этом примере от общей ширины таблицы в 640 пикселей мы дали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке и  добрую половину места второй.

ЧИТАТЬ:  Как преобразовать файлы .MO в .PO

Верстка страницы сайта с использованием таблицы.

Приближаемся к построению сайта… Вот вам и таблица, просто и наглядно…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

Верстка страницы

Заголовок
кнопка1
кнопка2
кнопка3
кнопка4
кнопка5
содержание:
куча текста

смотреть пример>>>

Здесь мы уже видим как  таблица участвует в построении сайта

Любая ячейка таблицы может служить самостоятельной боксом (ящиком)  для наполнения другими тегами и текстовым содержанием, а также иметь те или иные индивидуальные свойства — атрибуты.

Давайте освежим  уже пройденный материал, применив эти знания к таблице.

Добавим  нашему документу  красок — зададим это тегом bgcolor ( цвет фона ) и выровняем содержание ячеек, допустим текст, новым для нас атрибутом valign — Вертикальное выравнивание.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Выравнивание в таблице

1
2
 3
4
5
 6
7
8
 9

Пример>>>

следующий атрибут cellspacing — задаёт расстояние в пикселях между ячейками таблицы. Задав значение cellspacing=»0″ можно избавиться от «зазора» между ячейками, задав другое цифровое значение увеличить, на порядок.

Пример, увеличим «зазор»:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Расстояние между ячейками

1
2
 3
4
5
 6
7
8
 9

ЧИТАТЬ:  Комбинации клавиш на клавиатуре.

смотреть пример>>>

Следующий атрибут cellpadding (не путайте с cellspacing) — в пикселях задаёт отступ от границ ячеек до текста

Пример:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Поля таблицы

1
2
 3
4
5
 6
7
8
 9

смотреть пример>>>

Также таблица может быть вложена одна в другую

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

Вложенная таблица

Заголовок
содержание:

В одну ячейку вложена целая таблица!!

1
2
 3
4
5
 6
7
8
 9

смотреть пример>>>

При выборе размеров страницы, особенно это касается её ширины (атрибут width), ориентируйтесь на стандартные разрешения мониторов 640 на 480, 800 на 600, 1024 на 768,   если указанные Вами размеры будут выходить за их рамки то соответственно на экранах таких пользователей, у которых выставлены указанные разрешения, будут появляться полосы прокрутки. Вертикальная полоса это  не так страшно,  колёсико на мышке есть,  а вот горизонтальная полоса прокрутки уже вызывает значительные неудобства при чтении страницы.. Так что не советую указывать большую ширину страницы.

Ширина в 1024 пикселей будет оптимальным размером.

На этом урок » HTML — таблицы » закончен. Всем всего доброго!

ПоделитьсяTweetПоделитьсяGoogle
Метки: ,