. А вот содержать он может, внимание, и блочные, и встроенные элементы, в том числе и обычный текст. Кстати, обратите внимание, что в таблицах не существует тегов создания столбцов (колонок), потому что они формируются из элементов |
.
Тег | ... |
. Да, его нет в нашем примере, так как это практически аналог тега
и применяется вместо него, когда необходимо сделать заголовочные ячейки. Такие ячейки отличаются от обычных только тем, что браузеры выделяют в них текст жирным шрифтом и располагают содержимое по центру.
При создании таблиц всегда обращайте внимание на то, чтобы во всех рядах было одинаковое количество ячеек. Разное количество не является в HTML ошибкой, но в таких случаях ваша табличка может просто «поехать» и все отобразиться совсем не так, как вы хотели.
HTML-таблицы по центру, слева, справа
По умолчанию браузеры располагают таблицы с левой стороны родительского элемента, в котором она находится. В большинстве случаев это вполне устраивает, особенно если таблицу растягивают во всю ширину. Но все-таки иногда хочется разместить HTML-таблицу по центру или справа.
В прошлом у тега
имелся атрибут align
, с его помощью и можно было изменять положение таблицы. Но он стал устаревшим, и сколько еще времени его будут поддерживать браузеры - неизвестно, так как на смену пришли стили (CSS). И чтобы показать вам правильный метод, я использую атрибут style
.
style=
"margin:0 auto 0 0"
>...
- Таблица располагается слева. Это значение по умолчанию.
style=
"margin:0 0 0 auto"
>...
- Расположение таблицы справа.
style=
"margin:0 auto 0 auto"
>...
- HTML-таблица по центру.
Теперь поясню. Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке: style=
"margin:сверху справа снизу слева"
. Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой - все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам.
И самое главное - не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». :)
Пример расположения таблицы по центру
HTML. Таблица по центру
| Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
| Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
| Ячейка 3.1 | Ячейка 3.2 | Ячейка 3.3 |
Результат в браузере
| Ячейка 1.1
| Ячейка 1.2
| Ячейка 1.3
|
| Ячейка 2.1
| Ячейка 2.2
| Ячейка 2.3
|
| Ячейка 3.1
| Ячейка 3.2
| Ячейка 3.3
|
Изменение ширины HTML-таблиц и ячеек
По умолчанию браузеры высчитывают ширину таблицы исходя из содержимого ее ячеек, а изменить ее можно, используя знакомый вам атрибут width
, общий синтаксис такой:
- любое неотрицательное число указывающее ширину в пикселях.
- неотрицательное число задающее ширину в процентах (%) исходя из ширины родительского контейнера, элемента в котором находится таблица.
Тем не менее, если указанная ширина будет меньше, чем необходимо для размещения всего содержимого HTML-таблицы, то браузеры ее проигнорируют и увеличат до нужной.
А вот атрибута width
для изменения ширины ячеек нет, вернее он был, но устарел, поэтому снова применим стили (CSS).
style=
"width:значение"
>... |
style=
"width:значение"
>... |
В качестве значений для ширины ячеек лучше тоже использовать только пиксели (px) и проценты (%). Естественно процентные размеры будут высчитываться исходя из ширины таблицы. Только не забудьте, что при указании размеров в атрибуте style
, всегда после чисел пишутся единицы измерения, в том числе и пиксели.
И тоже, если вы укажете ширину ячейки, а содержимое в нее не уместится - браузер проигнорирует вашу ширину и установит свою.
В HTML-таблицах ширина столбца всегда равна его самой широкой ячейке, что, впрочем, вполне естественно вообще для любых таблиц. Поэтому, меняя ширину одной (любой) ячейки - вы меняете ширину всего столбца.
Пример изменения ширины HTML-таблиц и ячеек
Ширина HTML-таблицы и ячеек
| Ячейка 1.1 | Ячейка 1.2 |
|---|
| Ячейка 2.1 | Ячейка 2.2 |
Результат в браузере
| Ячейка 1.1
| Ячейка 1.2
|
|---|
| Ячейка 2.1
| Ячейка 2.2
|
Как вы уже знаете, по умолчанию браузеры не отрисовывают рамки у таблиц, поэтому, чтобы вы четко увидели картину изменения ширины, я установил атрибут border
, о котором мы поговорим чуть позже.
Изменение высоты HTML-таблиц и ячеек
В стандартном HTML у тега
нет атрибута для изменения высоты таблицы, браузеры ее автоматически высчитывают исходя из содержимого. А вот у стилей (CSS) такая возможность есть, поэтому их и будем использовать.
style=
"height:значение"
>...
- указывайте высоту таблицы только в пикселях (px), так как процентную запись браузеры игнорируют.
А вот для изменения высоты ячеек в HTML у тегов
и |
все-таки был атрибут height
(вот и пойми этих разработчиков), но он устарел, поэтому снова стили.
| style=
"height:значение"
>... |
style=
"height:значение"
>... |
Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока
не указана - браузеры проигнорируют значения для ячеек.
Ну и естественно браузеры проигнорируют ваши размеры, как для таблицы в целом, так и для ячеек, если содержимое не будет вмещаться.
В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки - вы меняете высоту всей строки.
Пример изменения высоты HTML-таблиц и ячеек
Ширина HTML-таблицы м ячеек
| Ячейка 1.1 | Ячейка 1.2 |
|---|
| Ячейка 2.1 | Ячейка 2.2 |
Результат в браузере
| Ячейка 1.1
| Ячейка 1.2
|
|---|
| Ячейка 2.1
| Ячейка 2.2
|
Выравнивание в HTML-таблицах
Если вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек (
) содержимое выравнивается горизонтально по левой стороне и вертикально по центру, а у заголовочных ( |
) - в обоих случаях по центру.
Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align
и valign
, которые указываются в тегах |
для рядов (строк) или |
и |
для отдельных ячеек:
Горизонтальное выравнивание:
align=
"left"
- Выравнивание по левой стороне ячейки.
align=
"center"
- По центру.
align=
"right"
- По правой стороне.
Вертикальное выравнивание:
valign=
"top"
- Выравнивание по верхней стороне ячейки.
valign=
"middle"
- По центру.
valign=
"bottom"
- По нижней стороне.
Пример выравнивания в HTML-таблицах
Выравнивание в таблице HTML
| Ячейка 1.1 |
Ячейка 1.2 |
| Ячейка 2.1 |
Ячейка 2.2 |
Результат в браузере
| Ячейка 1.1
| Ячейка 1.2
|
| Ячейка 2.1
| Ячейка 2.2
|
Фон HTML-таблиц
В старых версиях HTML у тегов таблиц был специальный атрибут bgcolor
, который изменял цвет фона всей таблицы или ее части. Но в уроке Меняем цвет текста и фона
мы с вами изучили универсальный способ изменения фона абсолютно любых HTML-элементов, поэтому им и пользуйтесь.
А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут - background
. Браузеры и до сих пор его понимают, но опять же, в уроке Изображения для фонов
вы уже научились правильно устанавливать изображения-фоны для любых элементов.
Домашнее задание.
Все задание я вам расписывать не буду, обрисую только некоторые моменты, просто сделайте так, как показано в результате примера. Если вы в свое время не скачали картинки для обучения, то можете скачать сейчас.
- Измените фон страницы и размер шрифта.
- В начале страницы создайте четыре ссылки-изображения.
- Ниже сделайте таблицу из одного ряда и двух столбцов. Растяните ее ширину на всю страницу, сделайте выравнивание по верхней стороне ряда и измените фон каждой ячейки.
- Сделайте ширину левой колонки 150px и поместите в нее ссылки-изображения.
- Под таблицей создайте текстовые ссылки.
- Сделайте так, чтобы при наведении курсора мыши на любую ссылку появлялась «всплывающая» подсказка.
- Не забывайте про
Табличные данные
- информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег , представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом .
Внутри тега располагаются ячейки таблицы, представленные тегами | или | . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицы
По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу , то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов | и | . Table, th, td { border: 1px solid black; }
Попробовать »
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения:
- separate:
является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
- collapse:
соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
Название документа
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
Попробовать »
Размер таблицы
После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding : Th, td { padding: 7px; }
Попробовать »
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам: Table { width: 70%; }
th { height: 50px; }
Попробовать »
Выравнивание текста
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.
CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:
- top:
текст выравнивается по верхней границе ячейки
- middle:
выравнивает текст по центру (значение по умолчанию)
- bottom:
текст выравнивается по нижней границе ячейки
Название документа
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
Попробовать »
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class , добавляя его к каждой второй строке таблицы:
Название документа
| Имя | Фамилия | Положение |
|---|
| Гомер | Симпсон | отец |
| Мардж | Симпсон | мать |
| Барт | Симпсон | сын |
| Лиза | Симпсон | дочь |
Попробовать »
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс:nth-child , позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные): Tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »
Изменение фона строки при наведении курсора
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.
Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс:hover к селектору строки таблицы и задать нужный цвет фона: Tr:hover { background-color: #E0E0FF; }
Попробовать »
Выравнивание таблицы по центру
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе - за автоматическое выравнивание по центру: Table { margin: 10px auto; }
Попробовать »
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу: Table { margin: 10px auto 30px; }
09.10.16
2.2K
Атрибут width HTML
используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS
для управления разметкой ячеек в HTML таблицах
.
Настройка ширины столбца таблицы
Атрибут width
, в настоящее время устаревший, когда-то являлся стандартным методом регулирования ширины столбцов таблицы. По умолчанию, браузер будет настраивать столбцы таблицы так, чтобы соответствовать ее содержимому. Но если нужно контролировать ширину каждого столбца, вы можете это сделать, настроив ширину для каждого элемента | или | отдельной строки. Посмотрим, как это делали раньше с помощью атрибута width
, а затем как то же самое можно сделать с помощью CSS
. Но вначале нам нужен эталон для сравнения:
| Thin | Really Really Really Wide | | Little | |
Как видите, в первом случае мы не применили CSS
или HTML td width
. Что браузер сделает с такой таблицей?
| Thin
|
Really Really Really Wide
|
| Little
|
|
Браузер выделил для второго столбца намного больше места, чем для первого. Теперь сделаем то же самое, но воспользуемся атрибутом width
, чтобы принудительно задать столбцам одинаковый размер:
| Thin | Really Really Really Wide | | Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
В обоих случаях браузер должен предоставить каждому столбцу одинаковую ширину. Но первая таблица должна автоматически устанавливать размер, чтобы заполнить доступное пространство, в то время как вторая имеет фиксированную ширину.
| Thin
|
Really Really Really Wide
|
| Little
|
Lots and lots and lots and lots of content, so much that we might even need a line break.
|
Довольно неплохо. К сожалению, это некорректный HTML- код
, поскольку HTML table width
был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS
:
| Thin | Really Really Really Wide | | Little | |
Давайте посмотрим, как браузер выведет таблицу, использующую CSS
вместо атрибута width
:
| Thin
|
Really Really Really Wide
|
| Little
|
Lots and lots and lots and lots of content, so much that it will require a line break.
|
Регулируемая высота строки таблицы
Еще один атрибут, тесно связанный с шириной, это высота (height
). Этот атрибут также устарел, поэтому его не следует использовать. Но поскольку мы говорим о настройке ширины столбцов, то нужно рассмотреть и регулировку высоты строк. Вот как это делалось раньше с помощью устаревшего атрибута:
| Thin | Really Really Really Wide | | Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Как браузер выводит этот пример:
Если честно, я не могу представить, зачем нужно контролировать высоту строки с помощью HTML td width
. Гораздо больше смысла в том, чтобы настроить внешний и внутренний отступ для контента элемента | и позволить браузеру автоматически устанавливать высоту строки, основываясь на этой информации. Вот как можно применить эту стратегию.
Популярное в рубрике:
Как объединить слои в фотошопе в один или соединить их в группу...
читать
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Top
| | | |
