Polytech-soft.com

ПК журнал
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Практическая работа таблицы в html

ПРАКТИЧЕСКАЯ РАБОТА HTML №6. Таблицы

Цель работы: Научиться создавать таблицы при помощи тэга .
Задачи работы:

Овладеть методикой работы по созданию таблиц .

Получить навыки работы с командой , атрибутами ,

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab6.html на диске.

Технология работы:
Теоретическая часть :
При создании сайтов таблицы используются очень часто. Таблица задается тэгом:
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.
— строчка таблицы
— столбец (ячейка) таблицы

Зададим таблицу состоящую из двух строк и трех столбцов (ячеек). Для наглядности ячейки таблицы выделены разными цветами. Границы таблицы не заданы, поэтому вы их не видите

Заполните получившийся каркас цифрами:

1×11×21×3
2×12×22×3

Фон задается параметром bgcolor=»цвет_фона». Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). Задаем фон для каждого столбца. В параметрах height и width — вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца).

1×11×21×3
2×12×22×3

Параметры colspan и rowspan. Colspan — определяет количество столбцов, на которые простирается данная ячейка, а rowspan — количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)).

Используем параметр colspan=2, прописав его для ячейки 1х1. Код следующий:

1×11×2
2×12×22×3


Попробуйте сами написать код для такой таблицы (у вас должна исчезнуть ячейка 2х3). Для закрепления напишите код для таблицы:

Можно избавиться от пространства между ячейками таблицы.
Это достигается с помощью атрибута cellspacing, равного нулю:

1×11×2
2×12×2

Можно увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:
Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего — к низу, используя атрибут valign

1×11×2
2×12×2

Выполните на компьютере:
Задание 1

Создайте файл lab.html оформите как документ, в котором, в заголовке окна браузера должна быть надпись «Практическая».

Практическая №6- заголовок (по центру и соответствующим шрифтом).

Создайте таблицы согласно заданию. Задать фон ячейкам желтый, зеленый, согласно рисунку:

Создать таблицу из трех строк и четырех столбцов, ширина таблицы составляет 60% от ширины экрана.

Ширина левого столбца составляет 30% от ширины таблицы.

Задать цвет фона для элементов таблицы, установить цвет рамки.

Создать общий заголовок: Работа с таблицами (по центру и соответствующим шрифтом);

8. Сохранить файл как lab.txt в блокноте и как lab.html для просмотра в браузере.
Задание 2
9. Создать документ, в котором в заголовке окна браузера должна быть надпись » Практическая часть 2″. С использованием команд создания таблицы сформировать таблицу по указанному заданию.
Обратить внимание на ширину первого столбца (задать в процентах от ширины таблицы), шрифт (курсив, Courier New, Arial) и расположение текста (по центру, слева, справа).

10. Сохранить файл в папке «10 класс» как your name_date.txt в блокноте и как your name_date.html для просмотра в браузере.

Лабораторно- практическая работа №3. Вставка таблиц в HTML документ.

Как организовать дистанционное обучение во время карантина?

Помогает проект «Инфоурок»

Лабораторно- практическая работа №3.

Вставка таблиц в HTML документ.

Цель: изучить основы организации таблиц в HTML

Создание таблиц в HTML.

Для описания таблиц используется тег . Тег , как и многие другие, автоматически переводит строку до и после таблицы.

Создание строки таблицы — тег Тег (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами ТR>.

Определение ячеек таблицы — тег Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами ТD>. Число тегов ТD> в строке определяет число ячеек (открыть)

Если в таблице два тега TR, то в ней две строки.

Если в строке три тега TD,

Заголовки столбцов таблицы — тег

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны ТD>. Отличие состоит в том, что текст, заключенный между тегами ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться ТD> с тегом и атрибутом , текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью .

Заголовок центрирован по умолчанию

Заголовок может объединять столбцы

Заголовок может быть расположен перед столбцами

Текст или данные

Текст или данные

Заголовок может объединять строки

Текст или данные

Текст или данные

Текст или данные

Текст или данные

Текст или данные

Текст или данные

Использование заголовков таблицы — тег

Тег позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над ( ), либо под таблицей ( ). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Заголовок над таблицей

Текст или данные

Текст или данные

Текст или данные

Текст или данные

Заголовок под таблицей

Текст или данные

Текст или данные

Текст или данные

Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами или длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

Теги и модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

Если вы хотите сделать какую-нибудь

ячейку шире, чем верхняя или нижняя,

можно воспользоваться атрибутом

растянуть ее над любым количеством

Атрибут ROWSPAN, используемый в тегах и , подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.

Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег , чтобы дать ширину всей таблицы, а можно использовать в тегах или , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге W > таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег , чтобы дать ширину всей таблицы, а можно использовать в тегах или , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге W > таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPASING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

Атрибуты АLIGN и VALIGN

Теги , и можно модифицировать с помощью атрибутов ALIGN и VALIGN.

· Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

o ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.

o ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLL;line-height: 100%»> o АLIGN=сеnter располагает содержимое ячейки по центру.

o АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLL;line-height: 100%»> · Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:

o VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

o VALIGN=middle центрирует содержимое ячейки по вертикали.

o VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

В теге часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав . Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением.

В теге часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав . Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

В редакторе БЛОКНОТ создайте новый файл Таблицы. html и сохраните его в Вашей папке.

В документ введите следующие теги:

H 1 ALIGN = CENTER > Список учащихся 10 А класса H 1>

tr > td > Фамилия td > td > Имя td > td > Телефон td > tr >

tr > td > Иванов td > td > Иван td > td > 234-44-77 td > tr >

tr > td > Петрова td > td > Анна td > td > 542-63-18 td > tr >

Сохраните файл и просмотрите таблицу в браузере.

Добавьте в таблицу новый столбец «Дата рождения».

Расположите таблицу по центру окна.

Настройте линии сетки таблицы и задайте их цвет.

Измените начертание надписей в шапке таблицы на жирное.

tr > td > b > Фамилия b > td > td > b >Имя b > td >

td > b > Телефон b > td > td > b > Дата рождения b > td >

Измените цвет надписей в шапке таблицы на зеленый.

Основы HTML: таблицы и списки на веб-страницах.

Таблицы документа html

Создание списков html страницы

Таблицы документа html

Переходим к изучению таблиц. Таблицы играют огромную роль в создании html-страниц сайта. С их помощью можно придать странице сколь угодно сложную компоновку. Поэтому советую досконально изучить этот мощный инструмент создания сайта.

Создание таблицы документа html

Для создания таблицы служит тэг

. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг, для создания ячеек —
,.

Тэг

используется для создания ячеек с заголовками.

Тэг

— для обыкновенных ячеек с данными.

Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.

В чем же «прелесть» таблиц и почему они нашли такое широкое применение в сайтостроении? Дело в том, что, используя таблицы, можно сделать аккуратную компоновку информации в пределах Веб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Например, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.

HTML-код:

Отображение в браузере:

12
34
56

Обрамление таблицы документа html

Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга

.

Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.

По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.

HTML-код:

Отображение в браузере:

12
34
56

Заголовок таблицы документа html

Для создания заголовка таблицы служит тэг .

По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.

Следует сказать, что стандарт HTML не позволяет ставить одной таблице несколько заголовков.

HTML-код:

Отображение в браузере:

Заголовок таблицы

12

Группирование столбцов документа html

Для группирования столбцов таблицы служат тэги и .

Дескриптор создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая — ячейки, содержащие данные.

Дескриптор предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.

HTML-код:

Отображение в браузере:

ТоварЦенаКол-во
Гайка20р50
Болт30р80

ТоварЦенаКол-во
Гайка20р50
Болт30р80

Группирование строк документа html

Для группирования строк таблицы служат тэги,, .

— нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

— применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные.

— позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

HTML-код:

Итоговая строка

Отображение в браузере:

ТоварЦенаКол-во
Гайка20р50
Болт30р80
Итоговая строка

При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.

Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.

HTML-код:

Отображение в браузере:

12
34

Графический фон таблицы html страницы

При помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта.

HTML-код:

11111222223333344444

Отображение в браузере:

1111122222
3333344444

Выравнивание данных в таблице html страницы

Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.

Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек — влево.

Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине. Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.

Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN=»top», данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.

HTML-код:

1111
222222222Нижняя ячейкаНижняя ячейка

Отображение в браузере:

1111
2222
22222
Нижняя ячейкаНижняя ячейка

Изменение размеров таблицы html страницы

Ширина таблицы задается атрибутом W ). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.

То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.

При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.

Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.

HTML-код:

Ширина 200 пикселей

Отображение в браузере:

Ширина 200 пикселей

При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.

Атрибут COLSPAN тэгов,позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.

Атрибут ROWSPAN — ячеек из нескольких строк в пределах одного столбца.

Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.

Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге.

HTML-код:

2222233333444445555566666777778888899999

Отображение в браузере:

11112222233333
444445555566666
7777788888
99999

Улучшение внешнего вида таблицы html-страницы

Атрибут CELLSPACING дает возможность задавать размер полосы чистого пространства, обрамляющих таблицу извне. По умолчанию браузер разделяет ячейки таблицы полосой в 2 пикселя.

Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. По умолчанию эта величина равна 1 пикселю.

Чтобы графические изображения, помещенные в соседние ячейки таблицы, выглядели как единое целое, надо задать атрибутам CELLSPACING, CELLPADDING нулевые значения.

Если значение атрибута BORDER тэга

отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать.

Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы.

Атрибут RULES — указывает набор внутренних разделительных линий.

Ниже приведены допустимые значения этих атрибутов.

HTML-код:

Отображение в браузере:

111111111
111111111

Перенос слов в ячейках таблицы html-страницы

По умолчанию браузер делает автоматический перенос слов текста внутри ячейки таблицы. Атрибут NOWRAP принудительно отключает функцию переноса слов внутри таблицы и отображает текст в одну строку. Поэтому этот атрибут рекомендуют применять по отношению к ячейкам таблицы, содержащим короткий текст, т.к. в противном случае он выйдет за пределы окна браузера. Следует сказать, что этот атрибут не оказывает воздействие на текст ячейки, отформатированный при помощи тэгов

Вложение таблиц одну в другую — очень распространенный прием оформления внешнего вида веб-страницы. Прежде всего надо построить главную таблицу, а затем в ее ячейках разместить дочерние таблицы. Определяя таблицы, надо не забывать включать в их описание все закрывающие тэги, содержащие символ косой черты, т.к. пропуск всего одного такого дескриптора исказит таблицу кардинальным образом.

Не следует, также, злоупотреблять вложением, т.к. в этом случае существенно замедляется загрузка страницы браузером.

Форматирование вложенных таблиц осуществляется по общим правилам, что, собственно и делает страницу привлекательной.

Основы HTML. Таблица как основа дизайна web-страницы

  • систематизировать знания, умения и навыки форматирования текста и вставки графических объектов при создании Web-страниц средствами языка HTML;
  • повысить компетентность в области компьютерного проектирования;
  • развивать познавательный интерес.

создавать гипертекстовый документ;

Состав: практическая работа в двух частях работы, на каждую отводится по 45 минут.

Оборудование и программное обеспечение:

  • компьютерный класс;
  • программа Блокнот;
  • любой обозреватель (Internet Explorer, Opera, Mazilla);
  • раздаточный материал – карточки с заданиями;
  • папка с файлами (Приложение 1).

Задание. Создать сайт, посвященный самым выдающимся горам, морям, рекам, странам, животным и растениям. Сайт состоит из 5 страниц:

ЗаголовокСодержаниеФайл
1Главнаяописание ресурсаIndex.html
2Географиястраница, посвященная горам, морям, рекам, странамGeo.html
3Животныестраница о самых-самыхAnimal.html
4Растениястраница о самых-самыхFlora.html
5Информационные источникиперечень использованных ресурсовLinks.html

Все страницы имеют одинаковый дизайн, основанный на таблицах.

Часть 1. Разметка страницы

Задание 1. Создать шаблон страницы.

Создать в программе Блокнот файл под именем shablon.html и сохраните его в папку Site.

! Важно. При сохранении файла в качестве типа файла укажите Все файлы.

Комментарии.
Дизайн страницы построен на 4 таблицах (рис. 2).

  • гиперссылки на страницы сайта Главная, География, Животные, Растения, Информационные источники.

Таблица 3. Страница

Ширина таблицы: W >Высота строки подбирается автоматически под высоту экрана: Height=»100%»

Выравнивание в строке по верхнему краю: Valign=»top»

Без границ: Border=»0″ Frame=»vo >Форматирование по центру: Аlign=»center»

Расстояние внутри ячеек: Cellpadding=»10″

Цвет строки — фисташковый: Bgcolor=»#B8DB7C»

Ширина 1-го и 4-го столбца фиксированная: W >Ширина 2-го столбца фиксированная: W >Цвет 2-го столбца – серый: Bgcolor=»#ADC2D1″

Цвет 3-го столбца – белый: Bgcolor=»#FFFFFF»

  • 2-й столбец: три гиперссылки в виде рисунков;
  • 3-й столбец: заголовок 1-го уровня, форматирование по центру; текст страницы, форматирование по ширине.

Таблица 4. Подвал

  • © Все права защищены. Инициалы и фамилия, класс. Год
  • Гиперссылка на отправку письма на E-mail автора сайта.

Подсказка-код (замените смайлики недостающими строками кода)

Главная


Заголовок

Основной текст

Задание 2. Используя файл shablon.html как шаблон, создайте заготовки всех страниц сайта.

ФайлЗаголовок
1index.htmlГлавная
2geo. htmlГеография
3animal.htmlЖивотные
4flora.htmlРастения
5links.htmlИнформационные источники

Часть 2. Создание страниц сайта

Задание 3. Заполните страницы сайта содержимым.

Дизайн страницы Растения (файл flora.html) на рис. 3.

Фрагмент кода (замените смайлики J недостающими строками кода, курсивом выделены команды кода, добавляемые в страницу-шаблон).

Читать еще:  Html reader rus
Ссылка на основную публикацию
Adblock
detector