Вредоносное ПО (malware) - это назойливые или опасные программы,...
WWW
стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц
. Для этой цели обычно использовался предформатированный текст ( тег
позволяет создавать заголовки таблицы
. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>
), либо под таблицей
(<САРТION ALIGN=bottom>
). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы
. Иногда тег <САРТION>
используется для подписи под рисунком. Для этого достаточно описать таблицу
без границ.
или
или
или
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
создает новую строку. Далее во вложенных
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
.
можно прописывать различные атрибуты.
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ> . Тег <ТАВLЕ> , как и многие другие, автоматически переводит строку до и после таблицы .
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы ) создает строку таблицы . Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR> .
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD> . Число тегов <ТD> в строке определяет число ячеек (открыть)
Таблица
Если в таблице два тега TR, то в ней две строки. Если в строке три тега TD, то в ней три столбца.
Рис. 4.1.Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы ). Эти теги подобны <ТD> . Отличие состоит в том, что текст, заключенный между тегами <ТН> , автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center> , текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН> .
| Заголовок центрирован по умолчанию | Заголовок может объединять столбцы | |
|---|---|---|
| Заголовок может быть расположен перед столбцами | Текст или данные | Текст или данные |
| Заголовок может объединять строки | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | |
| Текст или данные | Текст или данные | |
Использование заголовков таблицы - тег <САРТIОN>
Тег
| Текст или данные | Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы , переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN , чтобы растянуть ее над любым количеством обычных ячеек.
| Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, | можно воспользоваться атрибутом СОLSPAN=2, |
| чтобы растянуть ее над любым количеством обычных ячеек. | |
Атрибут ROWSPAN
Атрибут ROWSPAN , используемый в тегах <ТD> и <ТН> , подобен атрибуту СОLSPAN= , только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться в растягиваемой ячейке. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ> , чтобы задать ширину всей таблицы , а можно использовать в тегах <ТD> или <ТН> , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ WIDTH=250> , вы получите таблицу шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
| Текст или данные - ширина 100% |
| Текст или данные - ширина 50% |
| Текст или данные - ширина 200 пикселов |
| Текст или данные - ширина 100 пикселов |
Каждый тег
Как сделать таблицу в html
Приведем пример, html код:
Пример таблицы Столбец 1 Столбец 2
Обратите внимание на ячейку
Теперь рассмотрим подробно все атрибуты тега
| или строкам | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ... | ... |
...
2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример
Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке 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="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:
10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
