Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

Подписываем
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Таблицы содержат информацию, расположенную по строкам и столбцам, играют большую роль в организации Web- страницы.
Таблица задается командой <TABLE>…</TABLE>, тег <TR> описывает строку таблицы, а тег <TD> и <TH> позволяют задавать ячейки внутри строки.
Таким образом, таблица описывается по строкам.
Пример задания таблицы:
Описание таблицы в HTML-коде |
Вид таблицы в окне браузера |
<table border="1" align="center"> <tr> <td>текст ячейки (1,1)</td> <td>текст ячейки (1,2)</td> <td>текст ячейки (1,3)</td> </tr> <tr> <td>текст ячейки (2,1)</td> <td>текст ячейки (2,2)</td> <td>текст ячейки (2,3)</td> </tr> </table> |
Таблицы могут применяться для форматирования текста в несколько колонок, как в газетах. Например, чтобы отобразить текст в три колонки, можно задать таблицу с одной строкой и тремя столбцами:
Описание таблицы в HTML-коде |
Вид таблицы в окне браузера |
<table border="0"> <tr valign="top"> <td>Чтобы использовать таблицу в качестве средства компоновки данных для отображения в несколько колонок, создайте таблицу с одной строкой и поместите в каждую ее ячейку данные, отвечающие определенной колонке.</td> <td>Ячейка должна содержать информацию одной колонки. Например, можно в одну колонку поместить изображение, а в две другие - сопроводительный текст.</td> <td>Браузер воспроизведет введенную в ячейки информацию в нескольких колонках. Ширина каждого столбца построенной таблицы определяется текущей шириной окна браузера.</td> </tr> </table> |
Атрибуты |
Назначение и описание атрибутов |
align |
Выравнивание таблицы относительно соседних элементов документа. Возможные варианты: align=center (расположение таблицы по центру окна документа), align=left(по левому краю), align=right(по правому краю). |
border bordercolor bordercolordark bordercolorlight frame rules |
Обрамление таблицы. При воспроизведении таблицы в окне браузера ее столбцы и строки будут отделены друг от друга линиями указанной ширины. С помощью атрибутов bordercolor, bordercolordark, bordercolorlight можно изменить цвет рамки. Например, строка <TABLE border="2" bordercolordark="#c0c0c0" bordercolorlight="#0000ff"> задает рамку толщиной 2 пикселя, сверху и слева рамка синяя, а снизу и справа серебристая. Атрибут frame указывает тип внешнего обрамления, rules внутреннего. |
width height |
Размеры таблицы. Задаются числом пикселей или процентами (от ширины окна). Если атрибут не задан, таблица принимает минимальные размеры по размерам внесенных данных. <TABLE width="200"> <TABLE width="100%"> |
bgcolor background |
Оформление фона таблицы (bgcolor изменяет цвет фона, background заливает фон картинкой). Например: <TABLE border="1" width=70% bgcolor="#FFFF5B"> <TABLE border="1" width=70% background="pic/fon.jpg"> |
cellpadding cellspacing |
cellpadding=n : задает расстояние между содержимым ячейки и рамкой в пикселях cellspacing=m :задает расстояние между ячейками таблицы в пикселях |
Атрибут bgcolor позволяет менять цвет фона не только для всей таблицы, но и для отдельных ячеек (в тегах <TD> <TH>) и строк (в теге <TR>).
Заливку фоновой картинкой можно выполнить только для отдельной ячейки или таблицы целиком с помощью атрибута background.
Возможность изменения размеров ячейки (<TD>) с помощью атрибутов width и height позволяет наилучшим способом осуществить ее компоновку. Ширину и высоту ячейки можно задавать в пикселях или процентах относительно габаритов таблицы. Причем, при изменении ширины ячейки все ее "соседи" в пределах того же столбца будут отображаться с учетом нового значения ширины. А изменение высоты автоматически распространяется на остальные ячейки данной строки таблицы.
Выравнивание данных в ячейках таблицы устанавливается с помощью атрибутов align (по горизонтали) и valign (по вертикали). Если все ячейки одной строки имеют одинаковое выравнивание данных, то удобнее прописать соответствующие значения атрибутов align и valign только для тега <TR>. В окне редактора HomeSite при автоматическом выборе атрибутов выдается список допустимых значений для них, что значительно облегчает процесс написания HTML-кода.
HTML позволяет объединять несколько соседних ячеек столбца или строки в одну большую ячейку.
Для слияния ячеек в пределах одной строки в дискрипторе <TD> ( или <TH>) исползуется атрибут colspan=n, где n это число объединяемых ячеек.
Аналогично, для слияния ячеек в одном столбце применяется атрибут rowspan=m.
Например:
Описание таблицы в HTML-коде |
Вид таблицы в окне браузера |
<table border="1" align="center"> <tr align="center"> <td colspan="2" bgcolor="#00ffff">текст ячейки 1</td> <td rowspan="2" bgcolor="#c0c0c0">текст ячейки 2</td> </tr> <tr> <td>текст ячейки 3</td> <td>текст ячейки 4</td>
</tr> </table> |
Создать Web-страницу на тему “Картинная галерея” с изображением картин-миниатюр, применив табличную разметку.
Каждая миниатюра является ссылкой на файл с этим же изображением, но больших размеров.
Пример организации такого многостраничного документа продемонстрирован ниже.
Замечания:
PAGE 1