Как сделать таблицу html – HTML-таблицы

Как сделать таблицу в HTML

Часто при создании HTML страниц пользователь сталкивается с созданием таблиц различного содержания и сложности. При этом создаются как обычные таблицы, так и таблицы, используемые для верстки (написания кода) страниц. Например, на странице «Результаты олимпиады для школьников» имеются разделы по математике, русскому языку и информатике. На каждой странице помещается таблица с набранными баллами по предметам, состоящая из нескольких столбцов и множества строк. Для перехода между страницами предметов создается горизонтальное меню, ссылки которого могут быть помещены в ячейки невидимой таблицы. Второй способ построения таблиц, как правило, применяется для формирования различной структуры страниц.

Итак, как же сделать таблицу на HTML. Для создания таблицы используется тэг <table>, <tr> и <td>. Первый тэг объявляет таблицу, а последние два используются для формирования строк и столбцов. Простейшая таблица, состоящая из стрех строк и двух столбцов, представлена на рисунке.

kak-cdelat-tabluci-html-1

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

<table border="1">
 <tr>
 <td>Ячейка 1</td>
 <td>Ячейка 2</td>
 </tr>
 <tr>
 <td>Ячейка 3</td>
 <td>Ячейка 4</td>
 </tr>
 </table>

В данном примере в тэге <table> указан атрибут border, который предназначен для указания размера рамки и границы таблицы. Так же существуют другие атрибуты таблицы и ее элементов. Атрибут cellspacing применяется для определения расстояния между ячейками, cellpadding – для определения расстояния внутри ячейки от границы до информации в ячейке, bgcolor – для задания цвета фона таблицы, width – для указания ширины таблицы или ее ячеек, height — для указания ширины таблицы или ее ячеек, align – для определения положения таблицы на странице (по левому краю, по правому краю, по центру), valign – для определения вертикального положения информации в ячейке.

cellpadding-cellspsacing

attributi-width-height-v-tablice

 

Для соединения строк или столбцов используются атрибуты colspan и rowspan соответственно.

Пример использования выше указанных атрибутов тэга <table> для создания таблицы на html представлен на рисунке.

kak-cdelat-tabluci-html-2

Полный код таблицы:

<table border="2" cellspacing="10" cellpadding="5" bgcolor="green">
 <tr>
 <td>Ячейка 1</td>
 <td>Ячейка 2</td>
 </tr>
 <tr>
 <td>Ячейка 3</td>

 <td>Ячейка 4</td>
 </tr>
 <tr>
 <td colspan="2" align="center">Ячейка 5</td>
 </tr>
 <tr>
 <td rowspan="2" valign="center">Ячейка 6</td>
 <td>Ячейка 7</td>
 </tr>
 <tr>
 <td>Ячейка 8</td>
 </tr>
 </table>

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

Поделиться в соц. сетях:

webriz.ru

Как в HTML сделать таблицу? Урок — 9 (для начинающих)

Если использовать HTML без CSS, то таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:

Как в HTML сделать таблицу? Пример каркаса веб-страницы

Итак, как в HTML сделать простую таблицу?
Для постройки таблицы необходимо использовать три тега:

TABLE

этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
Закрывающий тег </table> обязателен.

Таблица состоит из ряда

 ряд 1 ряд 1
 ряд 2 ряд 2
 ряд 3 ряд 3

и ячеек.

 ячейка 1 ячейка 2
 ячейка 1 ячейка 2
 ячейка 1 ячейка 2

TR  создает новый ряд таблицы. Закрывающий тег

</tr> обязателен.

TD  создает новую ячейку в ряду. Закрывающий тег </td> обязателен.

Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
<tr>
<td>ряд 3 ячейка 1</td> <td>ряд 3 ячейка 2</td>
</tr>
</table>
</body>
</html>

Вот результат:

ряд 1 ячейка1ряд1 ячейка2
ряд 2 ячейка 1ряд 2 ячейка 2
ряд 3 ячейка 1ряд 3 ячейка 2

Давайте все объясню.
Перед каждым созданием новой таблицы открывается тег <table>.
Дальше, размещаем в середине контейнера <table> тег <tr>, что говорит о начале нового ряда.
В этом ряду вставляем две ячейки с содержанием при помощи тега

<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
Закрываем ряд тегом </tr>.
Открываем другой ряд тегом <tr> и  вставляем в него снова две ячейки.
Закрываем ряд тегом </tr>.
Открываем третий ряд тегом <tr> и  вставляем в него снова две ячейки.
Закрываем ряд тегом </tr>.
Закрываем таблицу тегом </table>.

Я думаю, разобрались? Если кто-то забыл, что такое атрибут border, который я использую вместе с тегом  <table>, напоминаю, что это толщина рамки. Если в border

будет установлено значение «0», тогда границы таблицы будут невидимые.

Посмотрите парочку примеров созданных таблиц и можно идти дальше:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1
ряд 2 ячейка 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ряд 1 ячейка 2</td>
<td>ряд 1 ячейка 3</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1ряд 1 ячейка 2ряд 1 ячейка 3

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

в строку между тегами <td> </td> вставить изображение.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ряд 1 ячейка 2</td>
<td><img src="1.gif"></td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1ряд 1 ячейка 2:mrgreen:

А как объединить ячейки в таблице?

Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN – определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN – определяет количество рядов.
По умолчанию значение 1.

Для лучшего понимания посмотрите пример:
объединяем ячейки в верхнем ряду с помощью атрибута colspan:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1+2
ряд 2 ячейка 1ряд 2 ячейка 2

Теперь соединим ряды в ячейки с помощью атрибута rowspan:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

Ячейка 1, ряд 1+2ряд1 ячейка2
ряд 2 ячейка 2

Как установить размер таблицы?

Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:

WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

Как в HTML сделать таблицу?  Урок — 9 (для начинающих)

Выравнивание содержимого в таблице

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

ALIGN – горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN присваивается значения: left (по умолчанию), center, right.
left —
прижать содержимое к левой части;
center – установить по центру;
right —
прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN присваивается значения: top, bottom, middle.
topприжать содержимое к верху;
bottomприжать содержимое к низу;
middleустановить содержимое посередине

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<!-- ячейка по умолчанию-->
<td>ряд 1 ячейка1</td>
<!-- содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу -->
<td align="right" valign="bottom">ряд1 ячейка2</td>
</tr>
<tr>

<!-- содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху -->
<td align="left" valign="top">ряд 2 ячейка 1</td>
<!-- содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине -->
<td align="center" valign="middle">ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

Как в HTML сделать таблицу?  Урок — 9 (для начинающих)

Как сделать фон таблицы?

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

BGCOLOR –  цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.

Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге <table>. А если только к определенной ячейке, тогда в  тег <td>.

Для лучшего понимания посмотрите пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" bgcolor="#FFF8D2">
<tr>
<td align="center">ряд 1 ячейка1</td>
<!-- содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу -->
<td align="center">ряд1 ячейка2</td>
</tr>

<tr>
<!-- рисунок как фон -->
<td align="center" background="fon.jpg">ряд 2 ячейка 1</td>
<!-- фон цветом -->
<td align="center" bgcolor="#33FF99">ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

Как в HTML сделать таблицу?  Урок — 9 (для начинающих)

Внимание: если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки.

И напоследок расскажу еще о двух полезных атрибутах.

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

CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" cellpadding="15">
<tr>
<td>ряд 1 ячейка1</td>
<td>ряд1 ячейка2</td>
</tr>

<tr>
<td>ряд 2 ячейка 1</td>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка1ряд1 ячейка2
ряд 2 ячейка 1ряд 2 ячейка 2

CELLSPACING –расстояние между границами соседних ячеек.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" cellspacing="8">
<tr>
<td>ряд 1 ячейка1</td>
<td>ряд1 ячейка2</td>
</tr>

<tr>
<td>ряд 2 ячейка 1</td>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка1ряд1 ячейка2
ряд 2 ячейка 1ряд 2 ячейка 2

Фух, рассказал!
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы. А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.:idea:
Всего вам хорошего!
Спасибо, что посетили мой блог BlogGood.ru

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html, основы

bloggood.ru

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

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

В этой статье Вы познакомитесь с важнейшим моментом при создании своего сайта — таблицами!

Я думаю, что Вы обратили внимание на то, что в предыдущих статьях мы не занимались выравниванием, если, конечно, не считать выравнивание по левому краю, по центру и по правому краю браузера. Собственно, этого крайне недостаточно для красивого оформления страницы. Яркий тому пример — наша форма, которую мы создали в предыдущей статье. Как можно видеть, форма ОЧЕНЬ НЕРОВНАЯ. Вот, как раз для того, чтобы выравнивать элементы страницы более точно, чем просто по краям браузера, и были придуманы html таблицы.

Давайте для начала создадим простую html таблицу.

Но прежде, чем это делать, давайте восстановим код, который у нас остался после создания формы, то есть вот этот: Создание форм в HTML

Принцип создания таблиц в html таков: создаётся таблица, потом создаётся строка, потом все столбцы данной строки, потом очередная строка, снова все очередные столбцы данной строки и так далее.

Таблица создаётся с помощью тега <table>, а заканчивается тегом </table>. Это, думаю, понятно. У таблицы есть строки и столбцы, поэтому их необходимо создать. Теперь согласно принципу создания таблиц, необходимо создать строку. Строка создаётся с помощью тега <tr>. Соответственно, сигналом к окончанию строки является закрывающий тег </tr>. Внутри тега <tr> необходимо создавать столбцы, которые создаются с помощью тега <td>. И уже внутри этого тега находятся те элементы, которые должны быть расположены внутри данной ячейки. После того, как все элементы уложили, то можно закрывать столбец с помощью тега </td>. Дальше открывается новый тег <td>. В него снова помещаются элементы, после этого закрывается </td>. Это сигнал к концу второго столбца. И так далее, столько столбцов, сколько Вам нужно. В конце закрывается строка тегом </tr>. Затем следующая строка и так далее. А заканчивается всё закрывающим тегом </table>.

Чтобы стало понятнее, давайте сразу после формы напишем следующие строки:

<table>
  <tr>
    <td>(1, 1)</td>
    <td>(1, 2)</td>
  </tr>
  <tr>
    <td>(2, 1)</td>
    <td>(2, 2)</td>
  </tr>
</table>

Здесь мы создали таблицу, состоящую из двух строк (два тега <tr>) и двух столбцов (по два тега <td> в каждом теге <tr>). В качестве элемента я решил взять обычный текст, в виде координат ячейки. Соответственно, первая цифра означает номер строки, а вторая — номер столбца. Это был яркий пример таблицы.

Теперь поговорим об атрибутах. Сначала атрибуты тега <table>.

1) Атрибут «border«, значение которого задаёт толщину рамки таблицы в пикселях. По умолчанию, рамки вообще нет. Давайте поставим значение этого атрибута в «2«.

2) Атрибуты «width» и «height» задают ширину и высоту таблицы соответственно. Размер может быть указан, как в абсолютных единицах (пиксели, px), так и в относительных (проценты, %). Относительный размер, чем хорош, так это тем, что он всегда подстроится под любое разрешение монитора пользователя и любой браузер. А абсолютные тем хороши, что при любых браузерах и любых разрешениях монитора не будет сюрпризов с дизайном, связанные, например, с растягиванием элементов (если монитор широкоэкранный, к примеру). Какой выбрать: решать Вам, но я, лично, предпочитаю, в основном, относительные размеры, изредка разбавляя абсолютными, в зависимости от ситуации. Давайте поставим значение атрибутов «width» и «height» по «30%«.

Думаю, что атрибутов Вам дал достаточно. Таким образом, тег <table> выглядит так:

<table border = "2" width = "30%" height = "30%">

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

Теперь поговорим об атрибутах тега <tr>:

1) Атрибут «height«. Заметьте, что у тега <tr> нет атрибута «width«, впрочем, это логично, ведь тег <tr> отвечает за строку, а, следовательно, за высоту. А за ширину отвечают столбцы.

Собственно, даже атрибут «height» не особо-то и используется, поэтому можно сказать, что атрибутов у тега <tr> и вовсе нету.

Наиболее богатым по количеству атрибутов является тег <td>, отвечающий за ячейку таблицы:

1) Атрибут «width«. Объяснение то же, что и для атрибута тега <tr>. Соответственно, атрибута «height» нет.

2) Атрибут «colspan«. Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Поставьте этот атрибут в значение «2«, где у нас координаты «(1, 1)«. Сразу посмотрите на результат.

3) Атрибут «rowspan«. Значение этого атрибута означает количество строк, которое занимает данная ячейка. Поставьте этот атрибут в значение «2«, где координаты «(1, 2)«. Сразу посмотрите на результат.

4) Атрибут «align«. Значение этого атрибута означает выравнивание элемента внутри ячейки по горизонтали. Бывают три значения: «left» (по левому краю), «center» (по центру), «right» (по правому краю). По умолчанию стоит выравнивание по левому краю. Давайте выравняем координаты «(1, 1)» по центру, а координаты «(2, 1)» по правому краю. Посмотрите результат.

5) Атрибут «valign«. Значение этого атрибута означает выравнивание элемента внутри ячейки по вертикали. Снова имеются только три значения: «top» (по верху), «middle» (по середине), «bottom» (по низу). По умолчанию стоит значение «middle«. Давайте поменяем значение этого атрибута у элемента «(2, 1)» на «top«. А также у элемента «(2, 2)» поставим значение «bottom«. Сразу посмотрите на результат.

Таким образом, Ваша таблица имеет такой HTML-код:

<table border = "2" width = "30%" height = "30%">
  <tr>
    <td colspan = "2" align = "center">(1, 1)</td>
    <td rowspan = "2">(1, 2)</td>
  </tr>
  <tr>
    <td align = "right" valign = "top" >(2, 1)</td>
    <td valign = "bottom">(2, 2)</td>
  </tr>
</table>

В принципе, с теорией всё. А вот на практике необходимо научиться применять эти знания. И в качестве практики, мы сейчас выравняем нашу форму. Для начала сотрите все теги <br>, так как теперь на новую строку у нас будет переходить тег <tr>.

Теперь помещаем всё содержимое формы в таблицу, то есть сразу после тега <form> пишем тег <table>, а сразу перед тегом </form> закрываем таблицу с помощью тега </table> (не забываем про принцип вложенности!). Рекомендую поставить временно рамку у таблицы, чтобы видеть, как всё выравнивается, и как делится общее пространство между элементами таблицы.

Теперь каждую строку формы помещаем в отдельный тег <tr>. И делаем два столбца: первый для описания элемента, а второй для самого элемента формы. И так делаем вплоть до <textarea>.

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

Далее всё помещаем в одну строку и одну ячейку, но шириной эта ячейка будет в два столбца.

Вот и всё, что необходимо знать для успешного использования таблиц, а дальше лишь надо набивать руку. Я Вам скажу так: таблица наиболее часто используемая возможность при создании HTML-страницы, и без них не обходится почти ни один сайт. Правда, таблицы и наиболее сложная тема в основных знаниях по HTML, для усвоения которой необходимо потренироваться, а также избавиться от стереотипа о том, что элементом таблицы может быть только текст (уж, так нас научили в школе, учебниках и вообще в жизни). И когда Вы избавитесь от этого стереотипа и поймёте, что под элементом может подразумеваться не только текст, но и картинки, ссылки, формы, элементы формы, и даже целые таблицы, тогда можно считать, что дело сделано.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

  • Создание таблиц в HTML Создано 30.04.2010 10:47:05
  • Создание таблиц в HTML Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

myrusakov.ru

Создание таблиц в HTML — фон таблицы — рамка таблицы

При создании веб страниц очень часто необходимо представить некоторое содержимое страницы в виде таблиц.

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

Для этой цели лучше всего пользоваться средствами CSS. Но в некоторых случаях таблицы являются незаменимыми и удобными для предоставления информации.

Материалы по теме:

За создание таблиц в HTML отвечает тег <table> и закрывающий тег </table>. Но вам наверняка уже известно, что таблицы состоят из строчек и ячеек. Поэтому для того, чтобы создать таблицу, нам необходимы еще два тега: это тег <tr></tr> который отвечает за создание строк, и тег, <td></td> отвечающий за создание ячеек.

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

 <table>
<tr>
<td>1 - ячейка </td>
<td>2 - ячейка</td>
</tr>
<tr>
<td>3 - ячейка</td>
<td>4 - ячейка</td>
</tr>
</table>

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

<html> 
<head> <title>Таблица</title> 
<table> 
<tr>
<td>1 - ячейка </td> 
<td>2 - ячейка</td> 
</tr> 
<tr> 
<td>3 - ячейка</td> 
<td>4 - ячейка</td> 
</tr> 
</table> 
</head> 
</html>

У вас должно получиться следующее:

Как вы видите, наша таблица еще совсем не похожа на таблицу. Все это потому, что наши теги <table></table> и <td></td> имеют множество атрибутов, которые необходимо указать, чтобы у нашей таблицы появилась рамка, фон, размеры и т. д.

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

И так тег <table> имеет следующие атрибуты:

border — задает ширину рамки таблицы в пикселях, записывается так: <table border=»2″> </table>.

bordercolor – цвет рамки таблицы, данный атрибут поддерживает не все браузеры, поэтому вы можете и не увидеть заданный цвет рамки: <table border=»2″ bordercolor=»#548DD4″> </table>

Мы задали ширину рамки 2 пикселя, синего цвета, таблица примет следующий вид:

width – задает ширину таблицы в пикселях или процентах:

<table border="2" bordercolor="#548DD4"> </table>

height – высота таблицы в пикселях или процентах: <table border=»2″ bordercolor=»#548DD4″> </table>

Ширина таблицы будет 250 пикселей, а высота 150 пикселей, таблица будет выглядеть так:

align – выравнивание таблицы;

align=left – таблицы будет выровнена по левому краю;

align=right – таблица будет выровнена по правому краю:

<table border=2 bordercolor="#548DD4" align="right"> </table>

Наша таблица должна выровняться по правому краю.

bgcolor – цвет фона таблицы, bgcolor=#FFC000 – цвет фона таблицы будет желтый:

<table border="2" bordercolor="#548DD4" align="right" bgcolor="#FFC000"> </table>

Таблица получит следующий вид:

background – при помощи данного атрибута можно задать изображение, которое будет фоном таблицы.

В качестве примера сохраните маленькое изображение, которое вы видите в скобках () в ту папку, где у вас находится страница с таблицей, а к тегу <table> добавьте background=»fon.gif » весь код:

<table border="2" bordercolor="#548DD4" align="right" bgcolor="#FFC000" background= "fon.gif">

Таблица примет следующий вид:

сellpadding – атрибут, задающий левый, правый, верхний и нижний отступы внутри ячейки. Например, если к нашему тегу <table> добавить сellpadding=10, то текст, написанный внутри ячеек, получит отступ.

cellspacing – задает отступ между ячейками таблицы.

Если вы присмотритесь к нашей таблице, то увидите, что между рамками ячеек имеется небольшое пространство, это и есть отступ между ячейками, он задается по умолчанию. Для того, чтобы его убрать, достаточно в теге <table> прописать cellspacing=0. Весь код:

<table border="2" bordercolor="#548DD4" align="right" bgcolor="#FFC000" background= "fon.gif" cellspacing="0" сellpadding="10">

В результате наши ячейки прижались друг к другу, а текст внутри ячеек получил отступ:

hspace — задает промежуток от таблицы в лево и в право в пикселях, записывается так: hspace=20

nowrap – запрещает перенос слов в ячейке, записывается просто nowrap

Последние два атрибута применяются крайне редко, поэтому пример кода с ними я не показываю.

Теперь рассмотрим атрибуты тега <td>, некоторые из них такие же, как и атрибуты тега <table>

width — ширина ячейки в пикселях или в процентах.

height – высота ячейки в пикселях или процентах.

Например, зададим ширину первой ячейки первой строки в 30% — width=30% , а высоту первой ячейки второй строки в 100px. Код будет таким:

<table border="2" bordercolor="#548DD4" align="right" bgcolor="#FFC000" background="fon.gif" cellspacing="0" сellpadding="10"> 
<tr> 
<td>1 - ячейка </td>
<td>2 - ячейка</td> 
</tr> 
<tr> 
<td>3 - ячейка</td> 
<td>4 - ячейка</td> 
</tr> 
</table>

Наша таблица примет следующий вид:

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

align – выравнивает содержимое ячеек, имеет следующие значения:

align=»lef» – содержимое ячейки будет выровнено по левому краю;

align=»right» – содержимое будет выровнено по правому краю;

align=»center» – содержимое будет выровнено по центру ячейки.

Добавим эти атрибуты и значения в наш код и выровняем содержимое 1 — й ячейки по левому краю (по левому краю содержимое выравнивается по умолчанию, однако в некоторых случаях данный атрибут необходим), содержимое 2 – й ячейки выровняем по правому краю, а 4 -й по центру.

<table border="2" bordercolor="#548DD4" align="right" bgcolor="#FFC000" background= "fon.gif" cellspacing="0" сellpadding="10"> 
<tr> 
<td align="lef" >1 - ячейка </td> 
<td align="right" >2 - ячейка</td> 
</tr> 
<tr> 
<td>3 - ячейка</td> 
<td align="center" >4 - ячейка</td> 
</tr> 
</table>

bgcolor – при помощи данного атрибута можно задать цвет ячейки.

background – устанавливает изображение в виде фона ячейки.

С данными атрибутами мы уже встречались, рассматривая атрибуты тега <table>. Работают они одинаково, только в этом случае ими задается фон ячейки. Например, зададим цвет фона 2-й ячейки желтым, а в качестве фона 4-й ячейки установим следующее изображение ().

Для этого в наш код добавим необходимые атрибуты, для наших ячеек bgcolor=»#FFFF00″ для 2-й ячейки и background= «fon.jpg» для 4-й ячейки. В результате наша таблица станет выглядеть так:

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

bordercolor – задает цвет рамки ячейки.

C этим атрибутом мы так же встречались, рассматривая атрибуты тега <table>. Напоминаю, что он работает не во всех браузерах. Обратите внимание на то, что у тега <td> нет атрибута border обозначающего рамку ячейки. Зададим цвет рамки 2 – й ячейки красным для этого ко второй ячейке добавим атрибут bordercolor=»#FF0000″

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

valign – он производит выравнивание содержимое ячеек по вертикали.

Имеет следующие значения:

valign=»top» – выравнивание содержимого ячейки по верхнему краю;

valign=»bottom» – выравнивание содержимого ячейки по нижнему краю;

valign=»middle» – выравнивание посередине ячейки;

valign=»baseline» – выравнивание содержимого ячейки по базовой линии.

Добавим эти атрибуты к каждой из наших 4-х ячеек.

<table border="2" bordercolor="#548DD4" align="right" bgcolor="#FFC000" background= "fon.gif" cellspacing="0" сellpadding="10"> 
<tr> 
<td align="lef" valign="top">1 - ячейка</td> 
<td align="right" bgcolor="#FFFF00" bordercolor="#FF0000" valign="bottom">2 - ячейка</td> 
</tr> 
<tr> 
<td valign="middle">3 - ячейка</td> 
<td align="center" background= "fon.jpg" valign="baseline">4 - ячейка</td> 
</tr> 
</table> 

Наша таблица примет следующий вид:

Последнее что нам необходимо рассмотреть в этом уроке, это объединение ячеек таблицы. Для того чтобы объединить несколько ячеек в строке, существует атрибут colspan=»» где в кавычках указывается количество ячеек которое необходимо объединить.

Чтобы объединить ячейки по вертикали т. е. в столбце, необходимо использовать атрибут rowspan=»» где в кавычках указывается количество ячеек, которое необходимо объединить.

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

<table border="1" cellspacing="0" сellpadding="0"> 
<tr> 
<td>1 - ячейка </td> 
<td >2 - ячейка</td> 
<td>3 - ячейка</td> 
</tr> 
<tr> 
<td>4 - ячейка</td> 
<td>5 - ячейка</td> 
<td>6 - ячейка</td> 
</tr> 
<tr> 
<td>7 - ячейка</td> 
<td>8 - ячейка</td> 
<td>9 - ячейка</td> 
</tr> 
</table>

Теперь объединим 1-ю и 2-ю ячейку в строке и 3-ю, 6-ю и 7-ю ячейку в ряду. Код нашей таблицы будет следующий:

<table border="1" cellspacing="0" сellpadding="0"> 
<tr> 
<td colspan="2">1 и 2 – ячейки объединенные </td> 
<td rowspan="3">3-6-9 – ячейки объединенные</td> 
</tr> 
<tr> 
<td>4 - ячейка</td> 
<td>5 - ячейка</td> 
</tr> 
<tr> 
<td>7 - ячейка</td> 
<td>8 - ячейка</td> 
</tr> 
</table>

Обратите внимание, что теги той ячейки, которая объединяется, не записываются. Наша таблица будет иметь следующий вид:

Это были последние атрибуты ячеек. Как вы можете видеть атрибутов у тегов <table> и <td> множество. Это позволяет размещать в таблицах различное содержимое, позиционируя его и оформляя необходимым образом.

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

Материал подготовлен проектом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 01 Февраль 2010

Просмотров: 87139

webmastermix.ru

Как создать таблицу в html коде через блокнот?

Доброго всем времени суток, мои дорогие друзья. Как лето проходит? Я надеюсь, что у всех всё хорошо. Ну а сегодня мы продолжим изучать основы html и сегодня будет наверное последний урок на эту тему, потому что дальше мы окунемся уже в CSS. Так вот, говоря об html, я не могу не рассказать про таблицы, так как они тоже являются довольно значимой темой.

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

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

Что еще хорошо, так это то, что вам даже не придется ничего чертить. Всё делается в обычном блокноте (ну или другом, типа Notepad++), причем довольно легко. В общем давайте настраиваться на работу.

Как легко создать таблицу html в блокноте?

Теги

Здесь разметка происходит несколько сложнее, чем в других тегах, но это всё быстро запоминается. Так что смотрим и не отвлекаемся.

Любая таблица всегда заключается в парный тег <table></table>. Т.е. эти знаки дают команду, что здесь будет располагаться таблица.

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

Как легко создать таблицу html в блокноте?

Ну а внутри <tr></tr> мы теперь проставляем еще одну пару — <td></td>. Данная пара означает, что мы создали один столбец  в данной строке, и если в каждом tr прописать несколько td, то тогда в данной строчке будет несколько столбцов. Понятно? Если нет, то давайте посмотрим на примере, как тут всё устроено… Допустим я хочу создать таблицу учеников и отметок. Тогда пишем следующее внутри тега <body>:

<table>

<tr>
 <td></td>
 <td>Математика</td>
 <td>Русский язык</td>
 <td>История</td>
</tr>

<tr>
<td>Медведев</td>
 <td>3</td>
 <td>5</td>
 <td>5</td>
</tr>

<tr>
<td>Смирнов</td>
 <td>5</td>
 <td>5</td>
 <td>5</td>
</tr>

<tr>
<td>Соколов</td>
 <td>3</td>
 <td>2</td>
 <td>3</td>
</tr>
</table>

Что мы здесь сделали? А сделали мы четыре строки (tr), в каждой из которых содержится по четыре таблицы (td). В первом блоке tr мы написали название учебных дисциплин, при этом оставив первый столбец пустым, чтобы не нарушить таблицу.

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

Как легко создать таблицу html в блокноте?

Но зайдя в документ мы видим, что таблица не совсем похожа на то, что мы планировали. А чего тут не хватает? Правильно — границ. Но вы не переживайте. Об этом я вам расскажу чуть ниже.

Но для приличия я покажу вам еще один тег, который выделяет и центрирует данные в таблицах. Этот тег пишется как <th>. Давайте выделим наши заголовки в таблице. Для этого просто замените теги td, на th в тех местах, где у нас пишутся фамилии и названия дисциплин.

Как легко создать таблицу html в блокноте?

И смотрим, что у нас получится благодаря этому. Как я и говорил, теперь данные названия центрированы и выделены. Этого-то мы и добивались.

Как легко создать таблицу html в блокноте?

В общем с тегами мы вроде разобрались. Хотя есть еще и другие (можете посмотреть на htmlbook), но я не буду заострять на них внимание.

Атрибуты

Естественно такая вещь как таблицы не может обойтись без специальных атрибутов и я вам покажу некоторые из них.

бесплатный тренинг по инвестированию

Граница (border)

Ну и начать бы я хотел с того, о чем говорил выше, то бшь о границах. По умолчанию их нет, поэтому таблица выходит невзрачной и не совсем понятной. Но это можно исправить, и поможет нам в этом атрибут border, который ставится непосредственно в открывающий тег <table>. Сделайте так, как я показал вам в примере ниже, то есть поставьте значение атрибута border=»1″.

Как легко создать таблицу html в блокноте?

После того, как вы сделаете это, сохраните результат и запустите документ. Ну что? Совсем ведь другое дело. Теперь таблица приобрела нормальные очертания и выглядит как надо. Вы можете поэкспериментировать с различными значениями бордера и посмотреть, что в вашем конкретном случае наиболее вам подойдет.

Как легко создать таблицу html в блокноте?

Отступ и расстояние (cellpadding и cellspacing)

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

Cellpadding=»« — изменяет расстояние от самой рамки до содержимого в ячейке. Тем самым все ячейки в таблице становятся больше. Давайте напишем этот атрибут в таблице, а значение поставим равное 5, и посмотрим чем оно будет отличаться от первоначального варианта.

Хоп. Видите? Расстояние увеличилось. таким образом вы сможете сами подставлять нужные значения, расширяя тем самым ячейки.

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

Как легко создать таблицу html в блокноте?

Ну что? Суть ясна? Как видите, расстояние между ячейками стало шире. Именно этого мы с вами и добивались.

Как легко создать таблицу html в блокноте?

Выравнивание (Align)

Ну куда же мы без этого замечательного атрибута, который позволяет нам выровнять всё по разным местам? Align работает точно также, как и с другими тегами, которые мы проходили ранее и имеет три значения:

Давайте пропишем каждое из значений и посмотрим, как будет распределяться таблица.

Как легко создать таблицу html в блокноте?

Ну что? Вроде всё работает и я думаю, что должно быть понятно. Но если возникают какие-либо вопросы, то вы не стесняйтесь, спрашивайте.

Как легко создать таблицу html в блокноте?

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

Ну а я свой урок на сегодня завершаю. Не забывайте подписываться на обновления моего блога, чтобы не пропустить какую-либо важную информацию или новости. А мы с вами увидимся в других статьях. Удачи вам и пока-пока!

С уважением, Дмитрий Костин.

koskomp.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *