Как создать таблицу html в блокноте. Уральский государственный педагогический университет

Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

Теги, используемые для построения таблицы в html

table - обязательный тег, открывающий и закрывающий таблицу
caption - необязательный тег, обозначающий заголовок таблицы
th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr - обязательный тег, с которого открывается и закрывается строка
td - обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

Название таблицы

Стобец 1	Стобец 2
Текст в первой ячейке	Текст во второй ячейке

В браузере отобразится

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width - ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor - цвет фона ячеек таблицы
background - заливает фон таблицы рисунком
border - рамка и границы в таблице. Толщина указывается в пикселях
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th ) и зададим параметр атрибуту border (граница) , width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

В результате в браузере будет выведена таблица следующего вида

frame - атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.

rules - атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.

Рассмотрим пример кода

Стобец 1	Стобец 2

Результат

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

align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

В браузере отобразится выравненная по центру таблица следующего вида

Строки tr и ячейки td в таблицах HTML

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

Для тегов tr и td есть следующие

align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor - задает цвет строки
width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height - высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца
Стобец 1	Стобец 2

Результат

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

Спасибо за внимание! Надеюсь материал был полезен!

Таблица c рамками

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

Имя	Фамилия
Лариса	Исаева
Дмитрий	Колесников

РЕЗУЛЬТАТ:

Таблица без рамок

Таблица c рамками

Атрибуты тегов и для объединения ячеек

Пример

	хорьки
	вес	размер
самцы	1.2 – 2.5 кг	до 70см
самки	0.7 – 1.0 кг	до 40см

РЕЗУЛЬТАТ:

	хорьки
	вес	размер
самцы	1.2 – 2.5 кг	до 70см
самки	0.7 – 1.0 кг	до 40см

По стандарту HTML5 все ранее используемые атрибуты таблицы, такие как border , cellspacing , cellpadding и др. больше не поддерживаются и их использование валидатор считает ошибками в коде. Для оформления таблиц нужно использовать CSS-стили, с помощью которых можно заменить все устаревшие атрибуты таблиц . Например, вместо атрибута cellspacing для изменения расстояния между ячейками таблицы используется свойство border-spacing , а для выравнивания содержимого в ячейках таблицы – свойства text-align и vertical-aling . CSS-стили для оформления таблиц

Теги группирования строк html таблицы

Для создания более сложных таблиц можно использовать теги:

Пример

Потребление пива

Ф.И.О.	литров
Итого	250
Иванов Иван Иванович	133
Петров Петр Петрович	117

РЕЗУЛЬТАТ:

Теги группирования столбцов html таблицы

Атрибут тегов и

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

Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:

или

Пример

желтый		красный

РЕЗУЛЬТАТ:

Не пытайтесь установить стиль text-align для тегов и . Текст, размещенный между тегами ..., не наследует этот стиль, поскольку тег не является потомком ни тега , ни тега .

Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align для псевдокласса td:nth-child(n) , где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan .

Пример

Наименование	Цена (руб.)
Поминутная оплата солярия (от 4 минут)	15
50 минут солярия (14 руб/мин, 1 мес.)	700
100 минут солярия (13 руб/мин, 2 мес.)	1300
200 минут солярия (12 руб/мин, 3 мес.)	2400

РЕЗУЛЬТАТ:

Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan .

находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.

Каждый тег создает новую строку. Далее во вложенных создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.

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

Приведем пример, html код:

Пример таблицы

Столбец 1

Столбец 2

Обратите внимание на ячейку . Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег (заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.

Теперь рассмотрим подробно все атрибуты тега

.

Атрибуты и свойства тега

К открывающему тегу

можно прописывать различные атрибуты.

1. Свойство align="параметр" - задает выравнивание таблицы. Может принимать следующие значения:

В разобранном выше примере мы выравнивали таблицу по центру align="center" .

Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы

. Таким образом, в разных ячейках выравнивание будет разное.

Например

, , , или

cols - линия отображается между колонками

none - все границы скрываются

rows - граница рисуется между строками таблицы, созданными через тег

12. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class="имя_класса" - можно указать имя класса, которому принадлежит таблица.

14. Свойство style="стили" - стили можно задать индивидуально для каждой таблицы.

Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге

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

Ну а внутри

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

или строкам
...		...	... 2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример Пример таблицы Столбец 1 Столбец 2 Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым. 3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов) 4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель. 5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла. 6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях. 7. Свойство cellspacing="число" - расстояние между ячейками в пикселях. 8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы. 9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения: void - не отрисовывать границы border - граница вокруг таблицы above - граница по верхнему краю таблицы below - граница снизу таблицы hsides - добавить только горизонтальные границы (сверху и снизу таблицы) vsides - рисовать только вертикальные границы (слева и справа от таблицы) rhs - граница только на правой стороне таблицы lhs - граница только на левой стороне таблицы 10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения: all - линия рисуется вокруг каждой ячейки таблицы groups - линия отображается между группами, которые образуются тегами
. Атрибуты и свойства
1. Свойство align="параметр" - задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения: left - выравнивание по левому краю center - выравнивание по центру right - выравнивание по правому краю 2. Свойство background="URL" - задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения. 3. Свойство bgcolor="цвет" - задает цвет фона ячейки. 4. Свойство bordercolor="цвет" - задает цвет рамки ячейки. 5. Свойство char="буква" - задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char. 6. Свойство colspan="число" - задает число объединяемых горизонтальных ячеек. 7. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах %. 8. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах %. 9. Свойство rowspan="число" - задает число объединяемых вертикальных ячеек. 10. Свойство valign="параметр" - выравнивание содержимого ячейки по вертикали. top - выравнивание содержимого ячейки по верхнему краю строки middle - выравнивание по середине bottom - выравнивание по нижнему краю baseline - выравнивание по базовой линии Примечание 1 Для тега
. Параметры для одного тега
внутри него Как сделать, чтобы границы ячеек в таблице не склеивались В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse : ... Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку. Доброго всем времени суток, мои дорогие друзья. Как лето проходит? Я надеюсь, что у всех всё хорошо. Ну а сегодня мы продолжим изучать основы html и сегодня будет наверное последний урок на эту тему, потому что дальше мы окунемся уже в CSS. Так вот, говоря об html, я не могу не рассказать про таблицы, так как они тоже являются довольно значимой темой. Взять хотя бы тот же вордпресс. По умолчанию в этом движке нельзя создать таблицу. Нужен либо специальное дополнение (плагин), либо специальный программный код (скрипт). Но можно просто сделать то, что мы хотим с помощью простых тегов. В общем сегодня я вам расскажу как создать таблицу в html, так как это действительно может очень вас выручить. Помнится мне, как свои первые сайты я верстал с помощью табличной верстки, т.е. шапка, сайдбары, футер и контентный блок были всего лишь элементами таблицы. Об этом я упоминал в своей статье о . Правда сегодня сайты уже вообще не принято делать с помощью таблиц, но это не значит, что они не нужны. Скорее наоборот. Что еще хорошо, так это то, что вам даже не придется ничего чертить. Всё делается в обычном блокноте (ну или другом, типа Notepad++), причем довольно легко. В общем давайте настраиваться на работу. Теги Здесь разметка происходит несколько сложнее, чем в других тегах, но это всё быстро запоминается. Так что смотрим и не отвлекаемся. Любая таблица всегда заключается в парный тег . Т.е. эти знаки дают команду, что здесь будет располагаться таблица. Внутри table ставится парный тег

	Математика	Русский язык	История
Медведев	3	5	5
Смирнов	5	5	5
Соколов	3	2	3

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

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

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

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

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

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

Атрибуты

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

Граница (border)

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

. Сделайте так, как я показал вам в примере ниже, то есть поставьте значение атрибута border="1" .

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

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

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

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

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

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

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

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

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

• Center
• Right

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

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

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

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

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

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

Элемент

служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы .

Элемент

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

Задачи

• Убрать двойную рамку таблицы

  По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.

(от англ. caption – подпись). Элемент

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

Пример: Применение тега

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

Основное содержимое (тело) таблицы должно находиться внутри элемента

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

Пример: Теги

, и

• Попробуй сам »

• Попробуй сам »

Это заголовок таблицы

Ячейка на две строки	Ячейка 1	Ячейка 2
	Ячейка 3	Ячейка 4

Теги группирования элементов таблиц

Для группирования элементов таблиц служат теги

Заголовок 1	Заголовок 2< /th>

Это шапка таблицы
Это подвал таблицы
Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4

Несмотря на то, что мы перед

(сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента	вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом
(сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент	, однако его назначение — создание заголовка строки или столбца. Как правило, элемент	размещают в первой строке таблицы. Браузеры отображают текст в элементе	жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента	помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами. Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки: Пример: Простая HTML-таблица Попробуй сам » Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3 Граница таблицы Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так: Пример: Применение свойства border Попробуй сам » Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3 Одинарная рамка для таблицы По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей: Пример: Применение свойства border-collapse Попробуй сам » Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3 Поля и интервалы таблицы По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding ) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу	или	. Интервал ячеек (border-spacing ) — это расстояние между ними (	или	). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing . Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими. Пример использования padding и border-spacing : Пример: Применение свойств padding и border-spacing Попробуй сам » Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ширина таблицы Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет "растягиваться" или "сжиматься" в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера. Вот пример использования свойства width : Table {width: 100%;} Пример: Применение свойства width Попробуй сам » Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Объединение ячеек (colspan и rowspan) Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки	или ячейки	объединяются посредством добавления атрибутов colspan или rowspan . Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали. Объединение столбцов Объединение столбцов достигается с помощью атрибута colspan в элементах	или	— ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца. Пример: Применение атрибута colspan Попробуй сам » colspan ="2">Ячейка на два столбца Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Объединение строк Строки, объединенные при помощи атрибута rowspan , ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк. В этом примере первая ячейка таблицы растягивается на две строки вниз: Пример: Применение атрибута rowspan Попробуй сам » Ячейка на две строки Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 rowspan ="2">Ячейка на две строки Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Заголовок таблицы Для создания заголовка или подписи таблицы используется парный тег