BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2013-12-29 / Вр:19:50 / просмотров: 4505

Если использовать 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"
"http://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"
"http://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"
"http://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"
"http://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"
"http://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"
"http://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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" width="300" height="200">
<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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" width="300" height="200">
<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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" width="300" height="200" 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"
"http://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"
"http://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

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

Получай обновления блога!!! Подпишись:

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

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

  1. Юлия

    Спасибо Вам за подробные и главное понятные разъяснения!!!)))) Если можно вопрос по теме – а как выровнить таблицу по центру страницы? А то она все время находится слева

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Юлия! Вы можете вставить таблицу между

    <center><table>........</table></center>

    Например:

     
    <center>
    <table border="1" width="300" height="200">
    <tr>
    <td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
    </tr>
    <tr>
    <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
    </tr>
    </table>
    </center>
    

    Ответить

    Юлия отвечает:

    Спасибо ;-) ;-) ;-)

    Ответить

  2. Тамара Полякова

    Спасибо Степан за твой подробный и понятный урок! Все мне понятно! И в голове начинает укладываться на полочки. Урок большой, но я его прошла до конца. У меня все получилось! Благодарю тебя! Удачи тебе!

    Ответить

  3. павел

    Степан, скажите, а можно ли применить параметры ширины/высоты в пикселях не только для всей таблицы, а отдельно для какой-нибудь ячейки? Заранее благодарен.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Да, можно! Вот пример:

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

    Ответить

    Павел отвечает:

    Большое спасибо! Вы очень помогли.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663