создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
К открывающему тегу
можно прописывать различные атрибуты.
1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения:
В разобранном выше примере мы выравнивали таблицу по центру align="center"
.
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы
или строкам
. Таким образом, в разных ячейках выравнивание будет разное.
Например
...
...
...
2. Свойство background="URL"
- задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Пример
Пример таблицы
Столбец 1
Столбец 2
Преобразуется на странице в следующее:
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
. Обратите внимание на то, что в теге мы добавили style="color:white;"
. Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
3. Свойство bgcolor="цвет"
- задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border="число"
- задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1"
, что означает толщина рамки - 1 пиксель.
5. Свойство bordercolor="цвет"
- задает цвет рамки. Если border="0"
, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding="число"
- отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing="число"
- расстояние между ячейками в пикселях.
8. Свойство cols="число"
- число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения:
void
- не отрисовывать границы
border
- граница вокруг таблицы
above
- граница по верхнему краю таблицы
below
- граница снизу таблицы
hsides
- добавить только горизонтальные границы (сверху и снизу таблицы)
vsides
- рисовать только вертикальные границы (слева и справа от таблицы)
10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения:
all
- линия рисуется вокруг каждой ячейки таблицы
groups
- линия отображается между группами, которые образуются тегами , , ,
или
cols
- линия отображается между колонками
none
- все границы скрываются
rows
- граница рисуется между строками таблицы, созданными через тег
12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица.
14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
.
Атрибуты и свойства
и
1. Свойство align="параметр"
- задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
left
- выравнивание по левому краю
center
- выравнивание по центру
right
- выравнивание по правому краю
2. Свойство background="URL"
- задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor="цвет"
- задает цвет фона ячейки.
4. Свойство bordercolor="цвет"
- задает цвет рамки ячейки.
5. Свойство char="буква"
- задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan="число"
- задает число объединяемых горизонтальных ячеек.
7. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan="число"
- задает число объединяемых вертикальных ячеек.
10. Свойство valign="параметр"
- выравнивание содержимого ячейки по вертикали.
top
- выравнивание содержимого ячейки по верхнему краю строки
middle
- выравнивание по середине
bottom
- выравнивание по нижнему краю
baseline
- выравнивание по базовой линии
Примечание 1
Для тега
доступны такие же параметры, что и для
. Параметры для одного тега
будут иерархично применены ко всем
внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
:
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту
же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица
выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок
при этом допустимо задать другого цвета, как показано на рис. 1.
Для изменения цвета фона таблицы используем атрибут background
,
добавляя его к селектору TABLE
. Для красоты внизу таблицы
рисуем линию с помощью параметра border-bottom
(пример 1).
Пример 1. Создание таблицы без рамки
2004
2005
2006
Рубины
43
51
79
Изумруды
28
34
48
Сапфиры
29
57
36
Поскольку содержимое тега
исходно выравнивается
по центру, то для изменения этой характеристики в данном примере применяется
стилевой атрибут text-align
со значением left
.
Можно поступить наоборот и задать выравнивание по центру для ячеек
.
Но содержимое первой колонки с названиями камней лучше оставить выровненным
по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого
рассмотрим два способа.
Первый метод заключается в использовании тега
,
он добавляется в контейнер
и устанавливает,
в частности, выравнивание для отдельных колонок (пример 2).
Пример 2. Выравнивание с помощью тега
2004
2005
2006
Рубины
43
51
79
Изумруды
28
34
48
Сапфиры
29
57
36
Аргумент align
тега
указывает, по какой стороне выравнивать ячейки колонки, а span
определяет число колонок, к которым будут применяться заданные параметры. Если
этот атрибут отсутствует, то тег
Второй метод универсальный, работает во всех браузерах и основан на добавлении
отдельного класса для определенных ячеек.
Создаем стилевой класс, например, с именем jewel
и применяем его к ячейкам левой колонки (пример 3).
Пример 3. Выравнивание с помощью стилей
2004
2005
2006
Рубины
43
51
79
Изумруды
28
34
48
Сапфиры
29
57
36
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек,
где установлен параметр class="jewel"
.
Результат примера показан на рис. 2.
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количествостандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.
С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы.
Вставляем в ячейку нашей таблицы другую таблицу.
Текст
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.
Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.
Напоследок, приведу весь код, который мы создали.
Текст
Хорошо
Плохо
В этой статье я расскажу об особенностях html, которые должен знать каждый. Я расскажу как обойти ошибки на которые я сам натыкался. Нередко возникают вопросы у…
Рамки (блочные параметры)
Значения этих свойств используются для установки характеристик области вокруг элемента. Это может быть применено к символам, изображениям и т.д.
Определяют свойства четырех сторон рамок. Работают так же, как свойства отступов (см.ниже), за исключением того, что рамка видна.
ширина_рамки
может быть значением medium, thin или thick или задана в единицах измерения. стиль_рамки
может иметь значение none или solid
Аргумент color
используется для определения цвета заполнения фона элемента, пока он загружается, а также позади прозрачных частей элемента. Если передать вместо него адрес изображения, то рисунок будет повторяться, заполняя контур рамки.
Определяют ширину рамки вокруг элемента. Каждая сторона может быть задана соответствующим параметром. Можно заменить установку четырех индивидуальных свойств установкой одного свойства border-width
так же, как и для свойств отступа margin
.
ciip
rect (/top/right/bottom/left/) auto (по умолчанию)
Определяет, какая часть элемента видна. Все, что находится за пределами области, указанной этим параметром, увидеть нельзя.
display
"", none "" (по умолчанию)
Этот параметр указывает, будет ли отображен элемент.
float
none (по умолчанию) left right
Определяет обтекание элемента другими элементами слева или справа вместо помещения их под ними. Поддерживается тегами
,
...
height
auto (по умолчанию) длина
Устанавливают высоту элемента и измеряют ее, если это необходимо. Значение возвращаются в виде строки, включающей единицы измерения (px, % и т.д.). Для получения числового значения используется свойство posHeight.
left
auto (по умолчанию) длина проценты
Задают горизонтальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (px, % и т.д.). Для получения значения в виде числа используется свойство posLeft.
Пример 1:
Эта строка подчеркнутая пунктиром.
Пример 2:
Разные типы рамок.
Position:relative;
bottom:6px;
right: 6px;
border: 1px solid #7e5a25;
/*Set the position of the background image*/
background-position: 20px 50%;
background-repeat: no-repeat;
text-align: justify;
font-size: 0.9em;
Начиная с 1 января 2014 года новые коды ОКТМО, указываются в:
. в налоговых декларациях;
. справках 2-НДФЛ;
. платежных поручениях (поле 105);
. квитанция на оплату налогов, сборов, пошлин формы ПД-4 налог.
Во всех перечисленных документа указывается 11тизначный код ОКТМО взамен ранее используемых кодов ОКАТО.
Пример 5:
Рамка оформлена с помощью вложенных таблиц.
Свойства CSS width
и height
- устанавливают ширину и высоту блочных элементов. Ширина и высота элемента может быть задана следующими способами:
auto
- Размеры элемента определяется его содержанием. (по умолчанию)
%
- Размеры элемента задаётся в процентах от высоты/ширины элемента родителя.
px
- Размеры элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.
Пример:
Блок 1
Блок 2
Блок 3
Управление содержанием элемента
Что делать с содержанием элемента, если оно превышает его размер?
Если элементу присвоены точные значения высоты и ширины (height, width
) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow
, который указывает браузеру, что делать с элементом в таких случаях.
hidden
- Содержание элемента "обрезается" видна лишь та его часть что помещается в элементе.
scroll
- Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).
auto
- Полосы прокрутки добавляются при необходимости.
Пример:
CSS
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки и т.д. ..............
Результат
CSS
CSS
(англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Способы подключения CSS к документу
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS - это обычный текстовый файл. В файле.css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега , располагающегося в этом документе между тегами и . (Тег будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
.....
Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами и ) сразу после тега
Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;
.....
Когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
Купи слона
Рамка таблиц важный элемент. Она универсальна и часто используема. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута, но основная часть урока будет направлена на свойства CSS, потому что рамка становится универсальной при использовании стилей CSS.
Создание рамки при помощи атрибута
Вообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:
Ячейка 1
Ячейка 2
Простой способ создать рамку вокруг элемента
Сразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример:
td { border: 5px solid #CCCCCC; }
Рамка слева, справа, снизу и сверху
При использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black ; рамка справа border-right: 1px dotted #FF0000 ; рамка снизу border-bottom: 10px solid #000000 ; рамка сверху border-top: 1px solid green . Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:
Теперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius . Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:
Дабы текст не был впритык к рамке, нужно делать отступ от нее. В этом нам поможет свойство padding . Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине. Будем использовать только одно значение. Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:
