x-uni.com
регистрация / вход
сейчас на линии 52 чел.
x-uni.com
x-uni.com
 
Математика
Биология
Литература
Русский язык
ВИДЕО
Физика
Химия
История
Английский
 
ВИДЕО
 
 
регистрация / вход
сейчас на линии 52 чел.

Информатика - Программирование - html - Таблицы

Информатика - Программирование - html - Таблицы

   Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Понятие табличного представления данных не нуждается в дополнительном пояснении. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования WEB - страниц.
Создание простейших таблиц
   Описание таблиц должно располагаться внутри раздела <body>. Документ может содержать произвольное число таблиц.
   Каждая таблица должна начинаться тегом <table> и завершаться тегом </table>. Каждая строка начинается тегом <tr> и заканчивается тегом </tr>. Отдельная ячейка в строке обрамляется контейнером <td>, </td>.
Пример:

<html>
<head>
<title>таблицы</title>
</head>

<body>

<table>

<tr>

<td bgcolor="#FFCC33">ячейка 1.1</td>

<td bgcolor="#FFFF33">ячейка 1.2</td>

<td bgcolor="#336699">ячейка 1.3</td>

<tr>

<tr>

<td bgcolor="#FFFF33">ячейка 2.1</td>

<td bgcolor="#FFCC33">ячейка 2.2</td>

<td bgcolor="#FFFF33">ячейка 2.3</td>

</tr>

<tr>

<td bgcolor="#336699">ячейка 3.1</td>

<td bgcolor="#FFFF33">ячейка 3.2</td>

<td bgcolor="#FFCC33">ячейка 3.3</td>

</tr>

</table>

</body>
</html> посмотреть
Заголовок таблиц

Заголовок таблиц оформляется с помощью тега <caption>, который имеет один единственный параметр align:

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

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



Пример:

<html>
<head>
<title>таблицы</title>
</head>

<body>

<table>

<caption align = top>Тренировочная таблица</сaption>

<tr>

<td bgcolor="#FFCC33">ячейка 1.1</td>

<td bgcolor="#FFFF33">ячейка 1.2</td>

<td bgcolor="#336699">ячейка 1.3</td>

<tr>

<tr>

<td bgcolor="#FFFF33">ячейка 2.1</td>

<td bgcolor="#FFCC33">ячейка 2.2</td>

<td bgcolor="#FFFF33">ячейка 2.3</td>

</tr>

<tr>

<td bgcolor="#336699">ячейка 3.1</td>

<td bgcolor="#FFFF33">ячейка 3.2</td>

<td bgcolor="#FFCC33">ячейка 3.3</td>

</tr>

</table>

</body>
</html> посмотреть



Следует отметить, что это редкий случай, когда параметр aling может использоваться как для вертикального выравнивания так и для горизонтального выравнивания. Однако двойное использование в одном заголовке параметра aling недопустимо. Поэтому дополнительно введен дополнительный параметр - valing принимающий значения: top и bottom.



Пример:

<html>
<head>
<title>таблицы</title>
</head>

<body>

<table>

<caption align = left valign=top>Тренировочная таблица</caption>

<tr>

<td bgcolor="#FFCC33">ячейка 1.1</td>

<td bgcolor="#FFFF33">ячейка 1.2</td>

<td bgcolor="#336699">ячейка 1.3</td>

<tr>

<tr>

<td bgcolor="#FFFF33">ячейка 2.1</td>

<td bgcolor="#FFCC33">ячейка 2.2</td>

<td bgcolor="#FFFF33">ячейка 2.3</td>

</tr>

<tr>

<td bgcolor="#336699">ячейка 3.1</td>

<td bgcolor="#FFFF33">ячейка 3.2</td>

<td bgcolor="#FFCC33">ячейка 3.3</td>

</tr>

</table>

</body>
</html>

параметры тега <table>

Основной тег таблиц <table> может использоваться с рядом параметров, которые могут быть опущены:

*     border

*     cellspacing

*     cellpadding

*     width

*     align

*     heignt

*     bgcolor



Разберем первый параметр border. По умолчанию рамки в таблицах не рисуются, однако для традиционного использования таблиц ее ячейки полезно отделить друг от друга линиями сетки, что облегчает восприятие и понимание информации, содержащейся в таблице. Для добавления в таблицу рамок добавляем в тег <table> параметр <border>, который может иметь численное значение:

Пример:

<html>
<head>
<title>таблицы</title>
</head>

<body>

<table border=10>

<caption align = left valign=top>Тренировочная таблица</caption>

<tr>

<td bgcolor="#FFCC33">ячейка 1.1</td>

<td bgcolor="#FFFF33">ячейка 1.2</td>

<td bgcolor="#336699">ячейка 1.3</td>

<tr>

<tr>

<td bgcolor="#FFFF33">ячейка 2.1</td>

<td bgcolor="#FFCC33">ячейка 2.2</td>

<td bgcolor="#FFFF33">ячейка 2.3</td>

</tr>

<tr>

<td bgcolor="#336699">ячейка 3.1</td>

<td bgcolor="#FFFF33">ячейка 3.2</td>

<td bgcolor="#FFCC33">ячейка 3.3</td>

</tr>

</table>

</body>
</html> посмотреть


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

Разберем значение параметра cellspacing:

cellspacing = num

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

Пример:

<html>
<head>
<title>таблицы</title>
</head>

<body>

<table border=10 cellspacing =5>

<caption align = left valign=top>Тренировочная таблица</caption>

<tr>

<td bgcolor="#FFCC33">ячейка 1.1</td>

<td bgcolor="#FFFF33">ячейка 1.2</td>

<td bgcolor="#336699">ячейка 1.3</td>

<tr>

<tr>

<td bgcolor="#FFFF33">ячейка 2.1</td>

<td bgcolor="#FFCC33">ячейка 2.2</td>

<td bgcolor="#FFFF33">ячейка 2.3</td>

</tr>

<tr>

<td bgcolor="#336699">ячейка 3.1</td>

<td bgcolor="#FFFF33">ячейка 3.2</td>

<td bgcolor="#FFCC33">ячейка 3.3</td>

</tr>

</table>

</body>
</html> посмотреть

ЗАПОМНИМ!

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

bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки)
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина таблицы
height="45" или height="45%"- высота таблицы
cellspacing="5" - расстояние между ячейками
cellpadding="5" - расстояние внутри ячеек
border="3" - задает толщину рамки таблицы
bordercolor="#000000" - задает цвет рамки таблицы

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

border="0" cellspacing="0" cellpadding="0"

Предложения интернет-магазинов

Самостоятельная подготовка к ЕГЭ по информатике

Автор(ы): Кашаев Сергей Михайлович, Шерстнева Людмила Владимировна   Издательство: BHV, 2009 г.  Серия: Информатика и ИКТ

Цена: 256 руб.   Купить

Книга предназначена для самостоятельной подготовки к ЕГЭ по информатике в общеобразовательных школах и содержит следующие разделы: "Информация и информационные процессы", "Системы счисления", "Логика", "Информационные модели и системы", "Компьютер, операционные системы и программные оболочки", "Обработка графической и звуковой информации", "Электронные таблицы", "Базы данных", "Телекоммуникационные технологии", "Алгоритмизация и программирование". Последней теме, с учетом преобладания этих вопросов в тестах ЕГЭ, посвящены три главы: алгоритмизация задач, программирование, алгоритмы без программирования. Каждая глава построена следующим образом: сначала рассматриваются необходимые теоретические сведения, по мере изложения которых приводятся типовые примеры, в конце содержится отдельный раздел с примерами. Книга может использоваться как при подготовке к ЕГЭ, так и в текущем учебном процессе учащимися и учителями школ и колледжей.


Информатика и информационные технологии для учащихся школ и колледжей

Автор(ы): Есипов Александр   Издательство: BHV, 2004 г.  Серия: Информатика и информационные технологии

Цена: 217 руб.   Купить

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


Программирование для школьников и студентов

Автор(ы): Колесов Вадим Владимирович, Романов Максим Николаевич   Издательство: Феникс, 2013 г.  Серия: Абитуриент

Цена: 330 руб.   Купить

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


Информатика и информационно-коммуникационные технологии. 9 класс

Автор(ы): Анеликова Людмила Александровна, Гусева Ольга Борисовна, Стрельникова Ирина Сергеевна   Издательство: Солон-пресс, 2012 г.  Серия: Элективный курс. Профильное обучение

Цена: 579 руб.   Купить

Данный учебник предназначен для учащихся 9 классов общеобразовательных школ. В нем рассмотрены все основные темы курса в соответствии с требованиями федерального компонента государственного стандарта общего образования. Раздел "Программирование" реализован на трех языках программирования, что предоставит учителю право выбора, а учащимся облегчит подготовку к сдаче ЕГЭ.

ПЕДСОВЕТ / ФОРУМ

Новости образования

Новости науки

флаг италииX-UNI рекомендует репетитора итальянского языка: yuliyavenezia (Скайп).

Репетитор по Скайпу без посредников

Неограниченная аудитория, свободный график. Начните свой бизнес здесь!