38026

Элементарные таблицы

Лабораторная работа

Информатика, кибернетика и программирование

Если значение ноль то рамка не требуется; cellpdding= cellspcing= добавляют свободное пространство между данными ячейки и ее границами и между ячейками таблицы соответственно. th т th контейнер ячейки Заголовок : заголовок столбца или строки. Значения: left заголовок прижать к левому краю ячейки center заголовок расположить по центру ячейки right заголовок прижать к правому краю ячейки; vlign= задает положение данных в ячейке Заголовок по вертикали. Значения: bottom заголовок прижать к нижнему краю ячейки middle заголовок...

Русский

2013-09-25

60 KB

1 чел.

Лабораторная работа № 9. «Элементарные таблицы»

<table a >т</table>

контейнер "Таблица". Атрибуты контейнера "Таблица":

width=""

height=""

ширина и высота таблицы в пикселах или в % от ширины и высоты окна, соответственно;

border=""

ширина рамки. Если значение - ноль, то рамка не требуется;

cellpadding=""

cellspacing=""

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

align=""

задает положение данных в ячейках таблицы по горизонтали. Значения:

left - данные прижать к левому краю ячеек,

center - данные расположить по центру ячеек,

right - данные прижать к правому краю ячеек.

Теги контейнера "Таблица":

<caption a >

заголовок таблицы. Атрибут:

align=""

задает место заголовка. Значения:

top - заголовок над таблицей,

bottom - заголовок под таблицей.

<tr a >т</tr>

контейнер строки таблицы. Если контейнер пуст - строка пустая. Заданные атрибуты строки подавляют атрибуты таблицы. Атрибуты строки:

bgcolor=""

задает цвет фона ячеек строки;

bordercolor=""

задает цвет рамки к ячейкам строки;

valign=""

задает положение данных в ячейке по вертикали. Значения:

baseline - данные располагать в ячейках по базовой линии строки,

bottom - данные прижимать к нижнему краю ячеек строки,

middle - данные располагать по центру ячеек в строке,

top - данные прижимать к верхнему краю ячеек строки.

<th a >т</th>

контейнер ячейки "Заголовок": заголовок столбца или строки. По умолчанию текст в этой ячейке показывается жирным шрифтом по центру. Атрибуты:

align=""

задает положение данных в ячейке "Заголовок" по горизонтали. Значения:

left - заголовок прижать к левому краю ячейки,

center - заголовок расположить по центру ячейки,

right - заголовок прижать к правому краю ячейки;

valign=""

задает положение данных в ячейке "Заголовок" по вертикали. Значения:

bottom - заголовок прижать к нижнему краю ячейки,

middle - заголовок расположить по центру ячейки,

top - заголовок прижать к верхнему краю ячейки;

colspan=""

задает число ячеек, объединяемых в одну на строке;

rowspan=""

задает число ячеек, объединяемых в одну в столбце.

<td a >т</td>

контейнер ячейки таблицы. Если контейнер пуст или содержит значение &nbsp;- ячейка пустая. Заданные атрибуты ячейки подавляют атрибуты строки и таблицы. Атрибуты ячейки:

width=""

height=""

ширина и высота ячейки в пикселах или в % от ширины и высоты окна, соответственно;

align=""

задает положение данных в ячейке по горизонтали. Значения:

left - данные прижать к левому краю ячейки,

center - данные располагать по центру ячейки,

right- данные прижать к правому краю ячейки;

valign=""

задает положение данных в ячейке по вертикали. Значения:

baseline - данные расположить в ячейке по базовой линии,

bottom - данные прижать к нижнему краю ячейки,

middle - данные расположить по центру ячейки,

top - данные прижать к верхнему краю ячейки;

bgcolor=""

задает цвет фона ячейки;

bordercolor=""

задает цвет рамки к ячейке;

colspan=""

задает число ячеек, объединяемых в одну на строке;

rowspan=""

задает число ячеек, объединяемых в одну в столбце;

nowrap

отмена переноса слов на другую строку внутри ячейки.

А теперь всё по порядку:

Таблица задаётся тегом:

<table></table>

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

<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы

<table>
<tr></tr>
<tr></tr>
</table>

Сначала мы задали строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Заполним некоторым образом ячейки:

<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>

Первая цифра в загадочных надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:


Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки.

<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>

Вот, что у нас получилось:



Если вы хотите задать фон для ряда, то атрибут bgcolor мы прописываем для тэга <tr>:

<tr bgcolor="#FFCC33">

Если вы хотите задать фон для всей таблицы, то атрибут bgcolor мы прописываем для тэга <table>:

<table bgcolor="#FFCC33">

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

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

Зададим высоту и ширину ячейкам таблицы. Вспомним об атрибутах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).

<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>

Вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).

Получим

Теперь нам осталось лишь выровнять содержимое (текст) внутри таблицы:

<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>

В каждой ячейке могут находиться и картинки, и текст (+тэги и атрибуты применяемые к ним), и даже таблицы (в этом случае они называются - вложенные таблицы). Т.е. тэги, которые мы применяем для форматирования содержимого (контента) - все те же.

Поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):

Это пишется:

table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>


 

А также другие работы, которые могут Вас заинтересовать

45505. Анализ и оценка производительности АСОИУ 23 KB
  В основе такой оценки лежит понятие производительности. Есть 2 показателя производительности процессов по чистому времени: показатель производительности процессоров на операциях с данными целочисленного типа MIPS отношение числа команд в программе к времени ее выполнения показатель производительности процессоров на операциях с данными вещественного типа при все кажущейся простоте критерия оценки чем MIPS тем быстрее выполняется программа его использование затруднено вследствие нескольких причин: процессоры разной архитектуры...
45506. Общая характеристика процесса проектирования АСОИУ. Цели и этапы разработки консалтинговых проектов 41 KB
  Проект проектноконструкторская и технологическая документация в которой представлено описание проектных решений по созданию и эксплуатации системы в конкретной программнотехнической среде. Проектирование системы процесс преобразования входной информации об объекте проектирования о методах проектирования и об опыте проектирования объектов аналогичного назначения в соответствии с ГОСТом в проект АСОИУ. Проектирование АСОИУ сводится к последовательной формализации проектных решений на различных стадиях жизненного цикла системы....
45507. Структурный подход к проектированию ИС. Функциональная модель АСОИУ 72.5 KB
  Сущность структурного подхода к разработке ИС заключается в ее декомпозиции на автоматизированные функции. Основные элементы этой методологии основываются на следующих концепциях: графическое представление блочного моделирования функции изображаются в виде блока интерфейсы дуг входящих и выходящих взаимодействие блоков с помощью интерфейсных дуг. Блок детализируется на другой диаграмме с помощью нескольких блоков эти блоки представляют подфункции исходной функции. Обратные связи итерации продолжающие процессы и перекрывающая во...
45508. Разработка модели защиты данных в АСОИУ 29.5 KB
  Разработка модели защиты данных в АСОИУ Большое внимание в настоящее время уделяется вопросам формирования принципов построения механизмов защиты информации ЗИ и системы требований к ним. На основе имеющегося опыта можно сформулировать следующие фундаментальные принципы организации защиты информации: системность; специализированность; неформальность. Основные требования принципа системности сводятся к тому что для обеспечения надежной защиты информации в современных АСОИУ должна быть обеспечена надежная и согласованная защита во всех...
45509. Разработка пользовательского интерфейса 44 KB
  Интерфейс пользователя эта та часть программы которая находится у всех на виду. Процесс разработки ПИ разбивается на этапы ЖЦ: Анализ трудовой деятельности пользователя объединение бизнесфункций в роли. Формулировка требований к работе пользователя и выбор показателей оценки пользовательского интерфейса. Разработка обобщенного сценария взаимодействия пользователя с программным модулем функциональной модели и его предварительная оценка пользователями и Заказчиком.
45510. Разработка программы для исследования веб-камер для стрелкового тренажера 3.1 MB
  В процессе работы была разработана программа для исследования веб-камер и микрофонов в качестве регистратора точки прицеливания и спускового крючка для стрелкового тренажера на общедоступных компонентах.
45511. УПРАВЛЕНИЕ ПРОЕКТОМ АСОИУ 35.5 KB
  Таким образом система управления проектами является одним из важнейших компонентов всей системы управления организацией. Основные преимущества использования системы управления проектами включают: централизованное хранение информации по графику работ ресурсам и стоимости; возможности быстрого анализа влияния изменений в графике ресурсном обеспечении и финансировании на план проекта; возможность распределенной поддержки и обновления данных в сетевом режиме; возможности автоматизированной генерации отчетов и графических диаграмм...
45512. Проектная документация АСОИУ 54.5 KB
  Пояснительные записки к эскизному техническому проектам содержат разделы: общие положения; описание процесса деятельности; основные технические решения; мероприятия по подготовке объекта автоматизации к вводу системы в действие. Описание автоматизируемых функций содержит разделы: исходные данные; цели АС и автоматизированные функции; характеристика функциональной структуры; типовые решения при наличии. Описание постановки задачи комплекса задач содержит разделы: характеристики комплекса задач; выходная информация; входная информация....
45513. Восстановление данных в БД 46 KB
  Обычно используется копия дедотецсын.1 В 4 контрольной точке затирается дед отец становится дедом сын отцом и появляется новый сын. сын RIDмассивы ж сбой К.4 журнал журнал сын отец Отец дед дед К.