Совет 1: Как задать ширину таблицы

Инструкции языка HTML (HyperText Markup Language или «Язык разметки гипертекста»), которые формируют таблицы, размещаемые в веб-страницах, предусматривают довольно большое число дополнительных параметров. Это позволяет, в отличие от других блочных элементов, задавать размеры не только с помощью языка CSS (Cascading Style Sheets или «Каскадные таблицы стилей»), но и средствами самого HTML.
Инструкция
1
Используйте атрибут width тега table для указания ширины таблицы в пикселах. Тег (инструкция языка HTML) table состоит из открывающей (<table>) и закрывающей (</table>) частей, между которыми находятся теги, формирующие строки и ячейки таблицы. В открывающий тег можно поместить дополнительные параметры (атрибуты), список которых для каждого конкретного тега определяется международными стандартами. Для тега table этими стандартами разрешено использование атрибута width, который задает ширину таблицы в пикселах. Выглядеть HTML-код простейшей таблицы с таким тегом, определяющим ширину в 500 пиксел, может, например, так:<table width="500">
<tr><td>1я ячейка</td><td>2я ячейка</td></tr>
</table>
2
Добавляйте символ % к значению атрибута width, если ширину таблицы надо указать в процентах, а не в пикселах:<table width="60%">
<tr><td>1я ячейка</td><td>2я ячейка</td></tr>
</table>Обратите внимание на то, что эти проценты не обязательно будут отсчитываться от ширины окна браузера. Здесь имеет значение структура документа - как вложенная матрешка не может быть шире той, в которую она вложена, так и 100% ширины таблицы не может быть больше ширины родительского элемента. Например, если таблица находится внутри блока div, то за 100% будет приниматься ширина этого блока.
3
Используйте инструкции языка описания стилей, если хотите в одном месте исходного кода задать одинаковую ширину таблицам, размещенным в веб-странице. Для этого сначала поместите в заголовочную часть HTML-кода (между <head> и </head>) открывающий и закрывающий теги, ограничивающие инструкции языка CSS:<style type="text/css">
/* здесь будут CSS-инструкции */
</style>Затем между этими тегами поместите такой CSS-код:table {width: 100px;}Здесь table указывает на то, что помещенное внутрь фигурных скобок описание должно быть применено ко всем тегам table, встречающимся в коде страницы. Ну а параметр width задает ширину. Здесь тоже можно использовать относительную ширину в процентах.
4
Указывайте в CSS-коде и в HTML-теге table имя класса, если задать ширину надо не для всех таблиц, а только для одной или нескольких. Например, пусть класс, отмечающий группу узких таблиц, называется tiny. Тогда описание его стиля может выглядеть так:table.tiny {width: 100px;}А соответствующий тег одной из таблиц в HTML-коде - так:<table class="tiny">
<tr><td>1я ячейка</td><td>2я ячейка</td></tr>
</table>

Совет 2: Как установить ширину

Ширина колонок в документах табличного редактора Microsoft Office Excel определяет удобство пользования ими и внешний вид. Особенно важен этот параметр при выводе таблиц на печать. В Excel предусмотрено несколько способов задания ширины столбцов: введение чисел, перетаскивание границ. А можно доверить подбор параметра самой программе.
Вам понадобится
  • Табличный редактор Microsoft Office Excel.
Инструкция
1
Для установки одинаковой фиксированной ширины группы колонок таблицы начните с их выделения. Кликните мышкой заголовок одного из столбцов, затем нажмите клавишу Shift и с помощью стрелки влево или вправо распространите выделение на остальные нужные колонки.
2
Выберите один из способов установки ширины для группы выделенных колонок. Это можно сделать, указав точное числовое значение, или подобрать нужный размер визуально. Чтобы использовать первый вариант, кликните по выделенному диапазону колонок правой кнопкой мыши и в контекстном меню выберите строку «Ширина столбца». Введите числовое значение и нажмите кнопку «OK». Размеры ячеек в Excel по умолчанию задаются в единицах, называемых «точками» (points). Каждая из них равна 1/72 части дюйма или 1/28 доле сантиметра.
3
Второй — визуальный — вариант реализуется с помощью мышки. Наведите ее указатель на границу между заголовками любых двух колонок. Когда курсор поменяет вид и станет двунаправленной горизонтальной стрелкой, нажмите левую кнопку и раздвиньте или сдвиньте границу до нужной ширины.
4
Если надо установить для каждой колонки ширину, соответствующую ширине помещенных в нее данных, выделите все ячейки листа. Кликните пустую клетку на стыке заголовков строк и колонок. Затем раскройте выпадающий список «Формат», помещенный в группу команд «Ячейки» на вкладке «Главная». Выберите строку «Автоподбор ширины столбца». Сделать это можно не только указателем мыши, но и с клавиатуры: нажмите клавишу «б», чтобы перейти на эту строку списка, а затем клавишу Enter для ее активации.
5
Кроме ширины колонок Excel позволяет задавать и ширину области печати, т.е. устанавливать горизонтальные границы выводимого на принтер фрагмента таблицы. Чтобы воспользоваться этой опцией, выделите нужный диапазон колонок, а затем перейдите на вкладку «Разметка страницы». В группе команд «Параметры страницы» раскройте выпадающий список «Область печати» и выберите пункт «Задать».
Видео по теме

Совет 3: Как создать всплывающее меню

С помощью грамотного HTML-кода и простых правил CSS можно сделать всплывающее меню, дополнять его и изменять. Если использовать средства каскадных таблиц и языка разметки, можно во всех браузерах обеспечить корректную работу самого меню.
Инструкция
1
Постойте для начала базовую строку меню. Создайте специальный нумерованный список с подменю в текстовом редакторе. Обычно для этих целей используют «Блокнот». Подменю выступает элементом родительского списка. К примеру: Первый элементВыпадающий элементВыпадающий элемент2Выпадающий элемент3Выпадающий элемент4Выпадающий элемент5
2
Данный список сохраните в отдельном html-файле. Затем создайте файл .css. Введите все необходимые параметры таблицы стилей. Делайте это очень внимательно, ведь одна ошибка, и всплывающее меню будет отображаться некорректно или вообще не будет работать.
3
Удалите все маркеры и отступы, применяемые в ненумерованном списке. Задайте ширину меню с помощью средств CSS:ul -style: none;width: 200px; }
4
Отметьте относительное положение всех элементов списка с помощью атрибута под названием position:ul li : relative; }
5
Затем оформите подменю, элементы которого будут появляться от родительского меню справа в момент, когда курсор мышки будет находиться над пунктом:li ul : absolute;left: 199px;top: 0;display: none; }
6
У атрибута left значение на один пиксель меньше, чем у ширины самого меню. Это позволяет правильно расположить всплывающие пункты без создания двойных границ. Атрибут display используется, чтобы при открытии страницы скрыть подменю.
7
Задайте необходимые стили для ссылок с помощью соответствующих параметров css. Подключите параметр display: block, чтобы ссылки занимали все отведенные для них места. Для того чтобы меню появлялось в момент, когда курсор мыши будет оказываться над ним (hover), введите такой код:li:hover ul : block; }
8
По желанию задайте дополнительные параметры для отображения элементов списка и ссылок. Включите в файл .html атрибут. Всплывающее меню готово к применению.
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500