Базовый курс HTML выпуск 5 — таблицы


Всем привет, это itist.ru, Disainer и это 5й выпуск по HTML для новичков.
Речь в этом выпуске пойдет о таблицах. Таблицы в HTML представлены тегом table и как в случае со списками из прошлого урока, тег table представляет собой контейнер для тегов определяющих саму таблицу.
У тега table есть набор атрибутов использование которых позволяет сильно изменять ее формат отображения помимо параметра

align (align=»left | center | right») отвечающего за
Определяет выравнивание таблицы.
background (background=»URL»)
Задает фоновый рисунок в таблице.
bgcolor (bgcolor=»цвет»)
Цвет фона таблицы.
border (border=»толщина»)
Толщина рамки в пикселах.
bordercolor (bordercolor=»цвет»)
Цвет рамки.
cellpadding (cellpadding=»значение»)
Отступ от рамки до содержимого ячейки.
cellspacing (cellspacing=»значение»)
Расстояние между ячейками.
cols (cols=»число»)
Число колонок в таблице.
frame (frame=»значение»)
Сообщает браузеру, как отображать границы вокруг таблицы.
height (height=»значение»)
Высота таблицы.
rules (rules =»значение»)
Сообщает браузеру, где отображать границы между ячейками.
summary (summary=»текст»)
Краткое описание таблицы.
width
Ширина таблицы.

Я перечислил основные атрибуты таблицы но не стал акцентировать на них ваше внимание, т.к. не смотря на то, что они есть, не все они используются и не все их будете использовать вы.
И возвращаясь непосредственно к таблицам…
Для того чтобы ее сделать, нам нужно обозначить строку таблицы, для этого мы используем тег

Он как и тег таблицы должен быть закрыт.
Внутри тега строки таблицы должны размещаться теги ячейки таблицы, которые обозначаются тегом

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

Ячейка 1 Ячейка 2
Ячейка 1 Ячейка 2

Таким образм мы сделали 2 строки, и 2 столбца вроде все просто, есть тег строки, тег ячейки открывается, и текст ячейки, тег ячейки закрывается и начинается следующая ячейка.

Давайте изменим нашу таблицу добавив туда еще один столбец. Чтобы это сделать нам нужно прописать

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 1 Ячейка 2 Ячейка 3

Давайте модифицируем её сделав объединение первой ячейки в первой строке, для этого изменим таблицу так

Объединение 1 и 2 ячейки Ячейка 3
Ячейка 1 Ячейка 2 Ячейка 3

А на этом у меня все, подписывайтесь на канал и ставьте лайки, всем пока!

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *