Задать ширину таблицы html. Атрибуты и свойства тега. Атрибуты и свойства и
Одно из самых полезнейших свойств новой спецификации. Вспомните, как нужно за дроч мучиться, чтобы в резиновом дизайне сделать область из 3, 4 или 5 колонок одинаковой ширины и при этом не использовать таблицы. Правильно, ацкий ад. Теперь это можно сделать всего лишь несколькими строчками CSS. Правда пока имеется небольшая ложка дёгтя, но об этом попозже.
Итак, какими же средствами мы обладаем, чтобы создать многоколоночный блок.
|
Свойство |
Описание |
|
|---|---|---|
| column-count | количество колонок | column-count: 3; |
| column-gap | расстояние между колонками | column-gap: 2em; |
| column-width | ширина столбца | column-width: 200px; |
| column-rule |
разделительная линия между колонками (формат записи аналогичен свойству border) |
column-rule: 1px solid #000; |
| column-rule-width | ширина разделительной линии | column-rule-width: 5px; |
| column-rule-style | стиль разделительной линии | column-rule-style: dotted; |
| column-rule-color | цвет разделительной линии | column-rule-color: #fff; |
Не забываем, что для мозиллы и вебкит браузеров необходимо дублировать свойства с приставками -webkit- и -moz- .
Думаю как с этими свойствами работать итак понятно. Однако подмечу следующее. По-умолчанию, column-count имеет значение auto. Это означает, что если задать column-width, то количество колонок будет высчитано автоматически.
Теперь несколько слов о том для чего это надо, где это можно применить и какие есть ограничения.
В принципе, column-count отсылает нас ещё к газетам, а если полнее сказать, то к полиграфии. Для чего же оно делалось? Прежде всего – это удобство для чтения, т.к. человеческий глаз лучше всего воспринимает строки текста длиной в среднем 10 слов. Также, разделения текста по колонкам позволяет лучше организовать контент и снизить количество свободного пространства на странице.
Применение
Для чего же можно применить это свойство. Полагаю, что оптимальным использованием можно считать следующее – на сайтах с большим центральным полем можно разделить текст на колонки. Плюс в том, что если он не разделится, то ничего страшного от этого не будет.
Вторым местом для использования я бы предложил какое-нибудь массивное вертикальное меню, где нужны блоки одинаковой ширины. Но, если column-count не сработает, то выйдет косяк.
Ограничения
Нельзя задавать свойства отдельной колонки, типа бэкграунда и ширины, так что для вёрстки сайта свойство пока не применить
Если задать высоту колонки, то если текста будет очень много, будут добавлены дополнительные колонки. чтобы его уместить. Но благо оно лечится через overflow: hidden.
Если блок делится на колонки и задан column-rule, то в случае, когда текст помещается в одну колонку, вебкит браузеры разделительную линию покажут, а мозиллоподобные браузеры – нет.
Есть ещё два свойства, которые есть в спецификации, но не поддерживаются ни одним браузером. Это column-break, которым можно указать, когда начинать следующую колонку (.container h3 { column-break-before:always; } ). Второе свойство – column-span, позволяет отобразить элемент через все колонки, к примеру, заголовок (.container h1 { column-span:all; } ).
Те свойства, что имеются, ишаком совсем не поддерживаются, не говоря уже о некоторых других разновидностей и версий браузера (вроде с оперой есть проблемы). Хотя, для ишака есть попытка написания плагина, но я бы его назвал в лучшем случае бетой. Впрочем, автор этого и не скрывает () .
Вот и всё на сегодня. Жаль, что свойство поддерживается не всеми и нет при этом хаков. Хотя больше всего жаль именно то, что функционал пока не весь доступен и пока нельзя этот метод считать ещё одним в серии для создание многоколоночных вёрсток. Остаётся надеяться, что в консорциуме подумают над этим как следует.
Данное свойство входит в свойство-сокращение columns .
См. все свойства для многоколоночности: column-count , column-width , column-gap , column-rule , column-span , columns .
Синтаксис
Селектор { column-count: число | auto; }
Значения
Значение по умолчанию: auto .
Примеры
Пример
В данном примере текст разобьется на 3 колонки (конечно же, в браузерах, которые поддерживают многоколоночность, в остальных будет просто обычный текст в одну колонку):
#elem { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: justify; }
Результат выполнения кода:
Пример . Значение auto
В данном примере указана ширина колонки column-width в 150px , а их количество column-count стоит в значении auto - браузер сам подберет необходимое количество колонок и промежуток между ними:
#elem { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; text-align: justify; }
Результат выполнения кода:
Быть энтузиасткой сделалось ее общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших ее, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к ее отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка, от которого она не хочет, не может и не находит нужным исправляться. В середине разговора про политические действия Анна Павловна разгорячилась. - Ах, не говорите мне про Австрию! Я ничего не понимаю, может быть, но Австрия никогда не хотела и не хочет войны. Она предает нас. Россия одна должна быть спасительницей Европы. Наш благодетель знает свое высокое призвание и будет верен ему. Вот одно, во что я верю. Нашему доброму и чудному государю предстоит величайшая роль в мире, и он так добродетелен и хорош, что Бог не оставит его, и он исполнит свое призвание задавить гидру революции, которая теперь еще ужаснее в лице этого убийцы и злодея. Мы одни должны искупить кровь праведника… На кого нам надеяться, я вас спрашиваю?… Англия с своим коммерческим духом не поймет и не может понять всю высоту души императора Александра. Она отказалась очистить Мальту. Она хочет видеть, ищет заднюю мысль наших действий. Что они сказали Новосильцову?… Ничего. Они не поняли, они не могут понять самоотвержения нашего императора, который ничего не хочет для себя и все хочет для блага мира. И что они обещали? Ничего. И что обещали, и того не будет! Пруссия уж объявила, что Бонапарте непобедим и что вся Европа ничего не может против него… И я не верю ни в одном слове ни Гарденбергу, ни Гаугвицу. Cette fameuse neutralite prussienne, ce n`est qu`un piege. [Этот пресловутый нейтралитет Пруссии - только западня. ] Я верю в одного Бога и в высокую судьбу нашего милого императора. Он спасет Европу!.. - Она вдруг остановилась с улыбкою насмешки над своею горячностью. - Я думаю, - сказал князь улыбаясь, - что ежели бы вас послали вместо нашего милого Винценгероде, вы бы взяли приступом согласие прусского короля. Вы так красноречивы. Вы дадите мне чаю?
CSS3 columns — концепция многоколоночной разметки, которая позволяет разбивать контент на колонки. Колонки могут содержать заголовки, текст, таблицы, картинки и любые другие inline -элементы.
Создание многоколоночной разметки с помощью модели CSS3 columns
Поддержка браузерами
IE: 10.0
Firefox: 9.0 -moz-
Chrome: 4.0 -webkit-
Safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Android Browser: 2.1 -webkit-
Chrome for Android: 44 -webkit-
1. Количество колонок column-count
Свойство позволяет явно задать необходимое число колонок, а их ширина будет рассчитываться, исходя из ширины доступного пространства. По умолчанию браузер добавляет промежуток между колонками по горизонтали, равный 1em . Если ширина изображения больше ширины колонки, то оно будет обрезано. Если одновременно с column-count задается column-width , то значение column-count будет считаться максимальным числом колонок (столбцов). Свойство не наследуется.
Синтаксис
Section {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
Рис. 1. Пример многоколоночной разметки
2. Ширина колонок column-width
Свойство позволяет разбить контент на колонки без задания свойства column-count . Количество колонок будет зависеть от того, сколько колонок заданной ширины может поместиться в контейнер. Не наследуется.
Синтаксис
Section { -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; }
3. Ширина пустого пространства между колонками column-gap
Свойство управляет промежутком между колонками. Если для колонок установлена разделительная линия с помощью свойства column-rule , то эта линия будет расположена посредине промежутка, а ее ширина не изменит общую ширину. Свойство не наследуется.
Синтаксис
Section {
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
Рис. 2. Промежутки между колонками
4. Позиционирование элемента на несколько колонок column-span
Свойство задаёт количество колонок, которое пересечет выбранный элемент. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка.
Если нужно, чтобы изображение растянулось на все колонки, задаётся img {display: block; -webkit-column-span: all; column-span: all;} . Свойство не наследуется.
Синтаксис
H1 {
-webkit-column-span: all;
column-span: all;
}
Рис. 3. Позиционирование заголовка на все колонки
5. Стиль разделительной линии column-rule-style
Свойство создаёт внутри пустого пространства между колонками вертикальную полосу — разделительную линию. Если не задан цвет линии, то некоторые эффекты не будут отображаться. Не наследуется.
| Значения: | |
| none | Значение по умолчанию, означает отсутствие линии. Цвет и ширина, заданные для линии, игнорируются. |
| hidden | Аналогично со значением none , линия скрыта. |
| dotted | Отображает линию набором квадратных точек. |
| dashed | Отображает линию как последовательность из тире. |
| solid | Обычная линия. |
| double | Отображает разделительную линию в виде двух параллельных тонких линий, расположенных на некотором расстоянии между собой. Толщина разделительной линии не указывается, но сумма линий и промежутка между ними равна значению column-rule-width . |
| groove | Отображает линию объемной, вдавленной в полотно. Это достигается путем создания тени из двух цветов, один из которых темнее, другой — светлее. |
| ridge | Отображает разделительную линию объемной, т.е. эффект, противоположный groove . |
| inset | Отображает сплошную линию цветом темнее, чем заданный цвет линии. |
| outset | Отображает сплошную линию цветом, заданным свойством column-rule-color . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
}
Рис. 4. Стиль разделительной линии
6. Ширина разделительной линии column-rule-width
Свойство устанавливает ширину разделительной линии. Не работает без свойства column-rule-style . Не наследуется.
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
}
Рис. 5. Ширина разделительной линии
7. Цвет разделительной линии column-rule-color
Свойство позволяет изменить цвет разделительной линии, которая наследует цвет текста. Не наследуется.
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: #59ACE7;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 5px;
-moz-column-rule-color: #59ACE7;
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: #59ACE7;
}
Рис. 6. Цвет разделительной линии
8. Краткая запись стилей разделительной линии column-rule
Свойство позволяет задать в одном объявлении три свойства разделительной линии — ширину column-rule-width , стиль column-rule-style и цвет column-rule-color . Не наследуется.
Синтаксис
Section { -webkit-column-rule: 5px dotted #59ACE7; -moz-column-rule: 5px dotted #59ACE7; column-rule: 5px dotted #59ACE7; }
9. Установка колонок с помощью одного свойства columns
Свойство представляет собой краткую запись свойств column-width и column-count , одновременно задает ширину и количество колонок. Не наследуется.
Синтаксис
Section { -webkit-columns: 100px 3; -moz-columns: 100px 3; columns: 100px 3; }
3.5. Ширина и высота таблицы и ячеек
Ширина таблицы задается атрибутом width элемента TABLE. Значение можно задавать как в абсолютных единицах (width="2 5 0"), так и в относительных (width="80 %"). Например, задав значение ширины в 600 пикселов, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора. Если же ширина задается в процентах, то они высчитываются от ширины окна браузера или от ширины ячейки другой таблицы, в которую вставлена данная. То же самое можно делать и с высотой таблицы с помощью атрибута height.
Все вышесказанное относится и к ячейкам таблицы. Просто необходимо использовать элементы с соответствующими атрибутами. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины или высоты ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения.
При задании чрезмерно малых величин ширины и высоты таблицы браузер определяет минимальные значения, которые позволяют нормально отображать данные.
На рис. 3.9 и 3.10 изображены две таблицы одинакового содержания, но разной ширины и высоты.
Рис. 3.9. Ширина таблицы равна 80 % от ширины окна браузера
Рис. 3.10. Ширина и высота таблицы равна 300 пикселам
Ширина первой таблицы равна 80 % от размера окна браузера, а первый столбец этой таблицы занимает 50 % от всей ширины таблицы. Высота первой строки равна 100 пикселам.
Вторая таблица квадратная, ширина стороны равна 300 пикселам. В листингах 3.4 и 3.5 приведены коды страниц, содержащих описанные таблицы.
Листинг 3.4. Код таблицы шириной 80 % от ширины окна браузера
| Заголовок 1 | Заголовок 2 | Заголовок 3 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 | ||||||||||||||||
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 | ||||||||||||||||
| Заголовок 1 | Заголовок 2 | Заголовок 3 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 | ||||||||||||||||
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 | ||||||||||||||||
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в htmlПриведем пример, html код:
Обратите внимание на ячейку | . Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег |
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
| ||||||||||||||||
