x-uni.com
x-uni.com
x-uni.com
Математика
Биология
Литература
Русский язык
География
Физика
Химия
История
Английский
Информатика
География
Информатика

Информатика - Программирование - 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"Дата публикации: 23.09.2010 14:08 UTC

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

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

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

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

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


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

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

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

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


Информатика и ИКТ. Профильный уровень. Учебник для 10 класса

Автор(ы): Угринович Николай Дмитриевич   Издательство: Бином. Лаборатория знаний, 2013 г.

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

Учебник предназначен для изучения курса "Информатика и ИКТ" в 10 классах общеобразовательных учреждений на профильном уровне. Рекомендуемые профили: информационно-технологический и физико-математический. Материал соответствует федеральному компоненту Государственного образовательного стандарта по информатике и ИКТ. Рассматриваются архитектура компьютера и методы защиты информации, понятие "информация" и системы счисления, основы логики и логические основы компьютера, а также объектно-ориентированное программирование на четырех языках: Visual Basic, Delphi, Visual C# и Visual J#. Все необходимое для преподавания курса программное обеспечение содержится на CD-дисках, которые входят в состав методического пособия для учителя. Рекомендовано Министерством образования и науки Российской Федерации. 9-е издание.


Информатика. 3-4 классы. Программа для начальной школы. ФГОС

Автор(ы): Могилев Александр Владимирович, Цветкова Марина Серафимовна, Могилева Вера Николаевна   Издательство: Бином. Лаборатория знаний, 2014 г.  Серия: Программы и планирование

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

Издание содержит программу по информатике, ориентированную на использование линии учебников "Информатика" для 3-4 классов авторов: А. В. Могилева, В. Н. Могилевой, М. С. Цветковой, приложения: таблицы соответствия требованиям ФГОС, таблицы УУД (ФГОС), инструкцию по установке программы "Мир информатики". Предназначено для использования при подготовке образовательной программы образовательного учреждения для начальной ступени общего образования в соответствии с Федеральным государственным образовательным стандартом (ФГОС). Для учителей информатики, методистов и администрации образовательных учреждений, а также обучающихся по направлению "Педагогическое образование".