рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

Таблицы в html

Таблицы в html - раздел Программирование, Таблицы Т...

Таблицы

Тег <table> ……</table> задаёт начало и конец таблицы.

<tr>…</tr> - строка таблицы
<td>…</td> - столбец таблицы

 

 

Вместе эти теги пишутся так:

<table>
<tr>
<td>ячейка</td>
</tr>

</table>

Это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку

 

Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, используем атрибут border "рамка", который добавит нам наглядности.

border - задает толщину рамки в пикселях

 

<table border="1">

<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>

<tr>

<td>строка3 ячейка1</td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

Тэг <table>может включать несколько атрибутов:

¨ align="left | center | right" – устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо).

¨ background="URL" – Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.

¨ bgcolor="цвет" – Устанавливает цвет фона таблицы.

¨ width="значение" – Задает ширину таблицы. Ее можно задать в пикселях (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%). Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

 

 

¨ border="толщина" – устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

¨ bordercolor="цвет" – Устанавливает цвет рамки таблицы.

¨ cellspacing="значение" – устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).

¨ cellpadding="значение" – устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).

 

¨ cols="число" – задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано.

¨ rules="значение" – Сообщает браузеру, где отображать границы между ячейками. Толщина границы и ее цвет указывается с помощью параметров border и bordercolor. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку.

 

 

Допустимые значения:

all – Линия рисуется вокруг каждой ячейки таблицы;

cols – Линия отображается между колонками;

none – Все границы скрываются;

rows – Граница рисуется между строками таблицы, созданных через тег <TR>.

 

Задание строк таблицы

 

Тег <TR> служит контейнером для создания строки таблицы. Общая структура:

<table>

<tr>…..</tr>

<tr>…..</tr>

</table>

 

 

Атрибуты тега:

¨ bgcolor="цвет" – Устанавливает цвет фона строки таблицы;

 

¨ bordercolor="цвет" – Устанавливает цвет рамки вокруг строки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.

 

¨ align="left | center | right | justify" – Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки.

¨ valign="top | middle | bottom | baseline" – Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию содержимое ячейки располагается по ее вертикали в центре – middle.

 

Допустимые значения:

 

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

middle – Выравнивание по середине.

bottom – Выравнивание по нижнему краю.

 

 

Задание ячеек таблицы

Тег <TD> – предназначен для создания одной ячейки таблицы. Должен размещаться внутри контейнера <TR>.

<table>

<tr>

<td>ячейка 1, 1-строки </td>

…..

<td> ячейка n, 1-строки </td>

</tr>

<tr>

<td>ячейка 1,2-строки </td>

…..

<td> ячейка n, 2-строки </td>

</tr>

</table>

Атрибуты тега:

¨ align="left | center | right | justify" – Задает выравнивание содержимого ячейки по горизонтали.

¨ valign="top | middle | bottom | baseline" – Устанавливает вертикальное выравнивание содержимого ячейки.

¨ background="URL" – Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.

¨ bgcolor="цвет" – Устанавливает цвет фона ячейки.

¨ bordercolor="цвет" – Устанавливает цвет рамки вокруг ячейки.

¨ colspan="число" – Устанавливает число ячеек, которые должны быть объединены по горизонтали.

¨ rowspan="число" – Устанавливает число ячеек, которые должны быть объединены по вертикали.

¨ height="значение" – Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован.

В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали

¨ width="значение" – Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

 

Заголовки столбцов таблицы - тег <ТН>

 

теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки.

 

Тег <CAPTION> позволяет создавать заголовки таблицы.

либо под таблицей (<САРТION ALIGN=bottom>).   Заголовок может состоять из любого текста и изображений.

Размеры таблицы.

Пример: <center> <table border="1" width="640" height="480"> <tr> <td…

– Конец работы –

Используемые теги: таблицы, HTML0.057

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Таблицы в html

Что будем делать с полученным материалом:

Если этот материал оказался полезным для Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Еще рефераты, курсовые, дипломные работы на эту тему:

Работа с таблицами в MS Word. Форматирование таблиц. Использование формул в таблицах. Стандартные функции
Лабораторная работа... Работа с таблицами в MS Word Форматирование таблиц Использование формул в... Цель работы Привить у студентов навыки создания и форматирования таблиц при оформлении документов Microsoft...

Лекция № 3. Таблицы. Типы данных и свойства полей. Создание и заполнение таблиц
Цели... Изучить таблицы и типы данных полей...

Язык html. применение каскадных таблиц стилей
На сайте allrefs.net читайте: "Язык html. применение каскадных таблиц стилей"

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

Основы работы в процессоре электронных таблиц Excel
Теоретические сведения... Введение в Excel... Excel табличный процессор входящий в комплект Microsoft Office и предназначенный для обработки информации...

Правило дифференцирования. Таблица дифференцирования основных элементарных функций. 7
ПОСОБИЕ ПО МАТЕМАТИКЕ... ТЕМА ДИФФЕРЕНЦИАЛЬНОЕ ИСЧИСЛЕНИЕ ФУНКЦИИ ОДНОЙ ПЕРЕМЕННОЙ... СОДЕРЖАНИЕ...

РЕДАКТОР ЭЛЕКТРОННЫХ ТАБЛИЦ MICROSOFT EXCEL 2007
СОЗДАНИЕ ТАБЛИЦЫ Ввод данных Имя ячейки адрес ячейки в Ехсеl формируется по аналогии с... Выделение несмежных ячеек... Для того чтобы выделить несмежные ячейки вначале необходимо выделить первый диапазон в данном случае А А здесь...

ТАБЛИЦА РЕЗУЛЬТАТОВ ОПРЕДЕЛЕНИЯ ФИЗИЧЕСКИХ ХАРАКТЕРИСТИК ГРУНТА
ТАБЛИЦА РЕЗУЛЬТАТОВ ОПРЕДЕЛЕНИЯ ФИЗИЧЕСКИХ ХАРАКТЕРИСТИК ГРУНТА...

ЭЛЕКТРОННЫЕ ТАБЛИЦЫ EXCEL
ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ... ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ... УФИМСКИЙ ГОСУДАРСТВЕННЫЙ НЕФТЯНОЙ...

Разработка таблиц БД
Введение... Аналитическая часть... Обзор предметной области...

0.042
Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • По категориям
  • По работам