Таблицы HTML

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ КЫРГЫЗКОЙ РЕСПУБЛИКИ

НАЦИОНАЛЬНЫЙ УНИВЕРСИТЕТ им. Ж. БАЛАСАГЫНА

ФАКУЛЬТЕТ ПРИКЛАДНОЙ МАТЕМАТИКИ И ИНФОРМАТИКИ

Контрольная работа

На тему: Таблицы HTML

Выполнил(а): Дуйшоев Адилет Абдраимович

БИШКЕК - 2021

Введение

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.

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

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

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

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

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

Для создания таблиц в языке HTML применяется элемент table, а весь код (ее содержимое) таблицы располагается между тегами < table > < /table >. Атрибуты этого элемента задают значения для всей таблицы целиком:

background -- задается изображение (URL), которое может быть фоном для всей таблицы;

bgcolor -- цвет фона таблицы, задается если не задан фон в виде изображения;

border -- толщина линий таблицы, если неободимы видимые границы;

bordercolor -- цвет линий таблицы;

cellpadding -- расстояние от текста внутри ячеек до границ ячеек;

cellspacing -- расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);

width -- задается значение ширины таблицы в px или %.

Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:

<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

</table>

Добавляем строку

В каждой таблице должна быть хотя бы одна строка, задается она тегами < tr > < /tr >. В следующем примере смотрим пример добавления строки:

<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

<tr> </tr>

</table>

Добавляем ячейки

Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами < td >< /td >. Добавляем к нашей таблице ячейки:

<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

<tr>

<td>Ячейка №1</td>

<td>Ячейка №2</td>

<td>Ячейка №3</td>

</tr>

</table>

В браузере увидим получившуюся таблицу:

Табл. 1

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

Заголовок таблицы обозначает заголовок столбца или строки, определяется так же открывающим и закрывающим тегами < th > < /th >. Посмотрим на примере:

<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

<tr>

<th>Столбец №1</th>

<th>Столбец №2</th>

<th>Столбец №3</th>

</tr>

<tr>

<td>Ячейка №1</td>

<td>Ячейка №2</td>

<td>Ячейка №3</td>

</tr>

</table>

В браузере будет выглядеть так:

Табл. 2

Объединение строк

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

<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

<tr>

<th rowspan="2">Строки №1 и №2 объединены</th>

<td>Ячейка№1</td>

<td>Ячейка№2</td>

</tr>

<tr>

<td>Ячейка №3</td>

<td>Ячейка №4</td>

</tr>

<tr>

<th>Строка №3</th>

<td>Ячейка №5</td>

<td>Ячейка №6</td>

</tr>

</table>

Браузер отобразит:

Табл. 3

Создание таблиц средствами html и их использование на web-страницах

табличный тэг веб

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

Например, если добавить таблицу размером 4x2, то Word создаст следующий код:

<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=V WIDTH=638>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

</TABLE>

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

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

Заключение

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

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

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

Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.

Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные -- в правый.

Литература

1. https://basicweb.ru/html/tablici.php

2. https://wm-school.ru/html/html_tables.html

3. https://www.internet-technologies.ru/articles/sozdanie-tablicy-v-html.html#header-9328-7

4. https://intuit.ru/studies/courses/103/103/lecture/27971?page=7

5. https://starper55plys.ru/html/tablitsyi/

6. https://webcodius.ru/html_i_css/kak-vstavit-tablicu-v-html.html

Размещено на Allbest.ru