Как задать размеры ячеек в таблице html.

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 - выравнивание по базовой линии

Для тега

Как сделать, чтобы границы ячеек в таблице не склеивались

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

...

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

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

, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом .

Внутри тега

располагаются ячейки таблицы, представленные тегами :

или	. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице. Рамка таблицы По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу , то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов - строчка html таблицы - столбец (ячейка) html таблицы. А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов: Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки): и . Table, th, td { border: 1px solid black; } Попробовать » Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально. Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения: separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку. collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются. Имя Фамилия Гомер Симпсон Мардж Симпсон Имя Фамилия Гомер Симпсон Мардж Симпсон Попробовать » Размер таблицы После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding : Th, td { padding: 7px; } Попробовать » Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам: Table { width: 70%; } th { height: 50px; } Попробовать » Выравнивание текста По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали. CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align: top: текст выравнивается по верхней границе ячейки middle: выравнивает текст по центру (значение по умолчанию) bottom: текст выравнивается по нижней границе ячейки Имя Фамилия Гомер Симпсон Мардж Симпсон Попробовать » Чередование фонового цвета строк таблицы При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class , добавляя его к каждой второй строке таблицы: Имя Фамилия Положение Гомер Симпсон отец Мардж Симпсон мать Барт Симпсон сын Лиза Симпсон дочь Попробовать » Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс:nth-child , позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные): Tr:nth-child(odd) { background-color: #EAF2D3; } Попробовать » Изменение фона строки при наведении курсора Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных. Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс:hover к селектору строки таблицы и задать нужный цвет фона: Tr:hover { background-color: #E0E0FF; } Попробовать » Выравнивание таблицы по центру Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе - за автоматическое выравнивание по центру: Table { margin: 10px auto; } Попробовать » Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу: Table { margin: 10px auto 30px; } Стал популярен, 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 Результат С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!) Спасибо за внимание! Надеюсь материал был полезен! 1. Что такое HTML таблицы и зачем они нужны? html таблицы - это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице). 2. Какие теги у html таблиц? Теги , задающие таблицу html пишутся так: Стобец 1 Стобец 2 Текст в первой ячейке первого столбца Текст во второй ячейке второго столбца Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них: Затем каждую строку разбиваем на ячейки с помощью тегов столбцов: - ячейка 1.1 - ячейка 1.2 - ячейка 1.3 - ячейка 2.1 - ячейка 2.2 - ячейка 2.3 На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.). 3. Как задать фоновый цвет html таблиц? А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно. Итак, для задания фона используется атрибут bgcolor="цвет_фона" . Например, если нам необходимо задать один цвет для всей таблички, то делается это так: bgcolor="цвет_фона" > - ячейка 1.1 - ячейка 1.2 - ячейка 1.3 - ячейка 2.1 - ячейка 2.2 - ячейка 2.3 Например, если необходимо сделать табличку желтого цвета, то мы пишем: Если нужно задать фоновый цвет ряду html таблицы, то тогда атрибут bgcolor="цвет_фона" применяем к тегу

bgcolor="#FFFF00" > bgcolor="#0000FF" > 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

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

Точно так же задается и цвет каждой ячейки отдельно . Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега

4. Как установить размер ширины и высоты ячеек html таблицы?

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

height - атрибут, устанавливающий высоту ячейки

width - атрибут, задающий ширину ячейки

А теперь на примере:

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

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

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

Так же, очень часто приходится задавать высоту height и ширину width в процентах :

Например, код html таблицы, текст которой выровнен по центру, выглядит так:

Прописав атрибут align="center" в открытии

Вот такой результат Вы получите в браузере:

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

Вертикальное выравнивание задается атрибутом:

valign="top" - содержание будет располагаться вверху ячейки

valign="middle" - содержание будет располагаться по центру ячейки

valign="bottom" - содержание будет располагаться внизу ячейки

Давайте рассмотрим данные атрибуты на нашем примере:

Вот что мы получим, если посмотрим в браузере результат работы атрибутов align и valign :

6. Как объединить ячейки и столбцы html таблицы?

В этой части нашей статьи мы поговорим об атрибутах colspan и rowspan .

colspan - определяет количество столбцов, на которые распространяется данная ячейка

rowspan - определяет количество рядов на которые распространяется данная ячейка

Значения colspan и rowspan могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).

Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:

Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.

С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».

А теперь, когда мы разобрались с параметром colspan , давайте разберемся с параметром rowspan. Принцип действия тут тот же:

Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.

7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?

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

border="ширина рамки в пикселях" - устанавливает ширину рамки

bordercolor="цвет рамки" - устанавливает цвет рамки

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

Для этого тегу

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

cellspacing="ширина отступа в пикселях" - отступ между ячейками

cellpadding="ширина отступа в пикселях" - отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)

Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:

Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing ) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.

Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0" и cellspacing="0" .

8. Как одну html таблицу вставить внутрь другой?

Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.

На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.

Делается это очень просто:

Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):

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

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

Кстати, если не знали, то создание сайтов, а вернее HTML-кода, называется версткой, и вы сейчас учитесь именно ей. Вообще существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. До сих пор в интернете идут ожесточенные споры о том, какая же из них лучше, но поверьте, спорят там в основном любители споров или новички, так как любой профессионал вам скажет - лучшая верстка та, которая больше подходит в конкретном случае, вот и все! А спорить о том, что лучше - танк или самолет - пустая трата времени. Но справедливости ради скажу, что по многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее. И это правильно. Но вам об этом задумываться рано, ведь, как я уже сказал, с помощью одного языка HTML можно верстать только таблицами.

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

Для создания простой HTML-таблицы надо использовать три типа тегов, это

Тег

Тег

В качестве значений для ширины ячеек лучше тоже использовать только пиксели (px) и проценты (%). Естественно процентные размеры будут высчитываться исходя из ширины таблицы. Только не забудьте, что при указании размеров в атрибуте style , всегда после чисел пишутся единицы измерения, в том числе и пиксели.

И тоже, если вы укажете ширину ячейки, а содержимое в нее не уместится - браузер проигнорирует вашу ширину и установит свою.

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

Пример изменения ширины HTML-таблиц и ячеек

Результат в браузере

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

Изменение высоты HTML-таблиц и ячеек

В стандартном HTML у тега

А вот для изменения высоты ячеек в HTML у тегов