Time to site

Здесь можно заказать сайт и продвижение в сети

телефоны: +3 8 (095) 818 40 61 или +3 8 (063) 135 02 90

Вы здесь: Главная / Статьи / Создание сайта / Таблицы в HTML. Часть 2

Таблицы в HTML. Часть 2

Таблицы в HTML. Часть 2

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

Задание цвета элементам таблицы HTML

Задание цвета таблице возможно двумя способами – через прописывание атрибутов в HTML или через написание класса в CSS. Для HTML-тегов существует атрибут “bgcolor”, который производит заливку как всей таблице, так и отдельным её частям, смотря к чему его применить. Значения присваиваются как к обычной заливке. Например, если мы напишем:

<table border="1" bgcolor=”red”>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

То вся таблица будет красной, а если:

<table border="1">
<tr bgcolor=”red”>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

только верхняя строка таблицы будет красной.
Для CSS все намного легче: в стилевом файле создаем класс ./* название класса */ {background-color: цвет, который нам подходит;}. И вписываем этот класс в HTML. Неважно куда, в саму таблицу или в ячейку. Пример:

<table class=”/* название класса */”>

Графический фон в таблице

Чтобы задать графический фон таблице - необходимо использовать атрибут “background”, только вместо значения – указать расположение картинки относительно расположения HTML документа. И аналогично, как и с заданием цветов, графический фон можно задать как самой таблице, так и отдельным её частям. Например:

<table background="img/water.jpg">

Здесь мы задали фоновый рисунок “water.jpg” для всей таблицы. Аналогично, если мы такой же зададим тэгу <tr>, то графический фон будет иметь только строка таблицы.

Размеры HTML таблицы

Для задания размеров таблице используют атрибуты “width” и “height”. Причем, значения присваиваются как в абсолютных единицах (width=100), так и в относительных (width=60%) не зависимо от того, высоту мы задаем, или ширину. Абсолютные – пиксели, относительные – проценты относительно разрешения экрана. Если мы зададим очень маленький размер таблицы, то браузер определит минимальное значение, которое будет он будет отображать. Если сильно большую таблицу сделаем – наоборот, браузер покажет максимально допустимую. Задавать размер можно не только таблице, но и отдельным ячейкам или строкам. И для этого не требуется задавать атрибут для всех ячеек или столбцов. Следует задать для одной ячейки или столбца – соседние будут отображаться с учетом нового значения. Пример:

Для задания размеров всей таблице следует набрать:

<table border="1" width="ваше значение">

Обтекание таблицы текстом

Для того, чтобы слова обтекали таблицу обычно используют атрибут “align”. Для таблицы он имеет два значения – “left” и “right”. Left – обтекание слева, а right – справа соответственно. Если мы хотим, чтобы обтекался отдельный текстовый фрагмент – то после него вставляем тэг <br> с атрибутом “clear”. После этого тэга обтекание текста прекращается, а присваиваемые ему значения left, right, all определяют, с какой стороны текст далее будет свободен от таблицы. К примеру:

<table border="1" align="left">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p>Таблица обтекается</p>
<br clear="left">
<p>Таблица не обтекается</p>

Слияние ячеек и строк

Для слияния ячеек и строк используют атрибуты “colspan” и “rowspan” соответственно. Первый объединяет ячейки, второй – строки. Для правильного понимания браузером – их следует записывать таким образом:

<tr rowspan=”количество строк, которые мы хотим объединить”>
<td colspan=”количество ячеек, которые мы хотим объединить”>1</td>
<td>2</td>
</tr>


По сути – ячейки и строки не сливаются. Просто ячейка или столбец, к которому мы присваиваем этот атрибут становятся по размеру как два или более рядом находящиеся элементы, в зависимости от того, какое мы зададим значение. Например – у нас есть 10 строк. Первой мы задаём “rowspan=’2’”. Выходит, первые две строки объединились? Нет! Первая стала по размеру как две. Соответственно, двойная строка вытеснила последнюю. Для удобства её удаляют.

Советы

  • Чтобы делать большое слияние ячеек и строк - начинайте сливать с лева на права, сверху вниз
  • Для того, чтобы не ошибиться пронумеруйте все ячейки и строки, для более быстрого и разборчивого поиска
  • Ещё для более удобного подсчета – начинайте считать построчно, или по ячейкам. Только будьте осторожны – если у нас к примеру одна двойная строка, а ниже 8 одинарных – то всего 10 строк!
Прочитано 178 раз Последнее изменение Четверг, 16 Январь 2014 12:21
Оцените материал
(1 Голосовать)

Комментарии  

0 # Евген 16.01.2014 12:26
Про слияние круто написал) А советы вообще кул!))) Я долго парился, а теперь есть выход - ПОДПИСЫВАТЬ КАЖДУЮ ЯЧЕЙКУ ДЛЯ СЛИЯНИЯ!)))) 8)
Ответить | Ответить с цитатой | Цитировать

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


Защитный код
Обновить

Мы в социальных сетях

Связаться с нами

Веб студия Time To Site
г. Донецк, бул. Шевченко, д. 133
Телефон: +3 (8095) 818-40-61
Мы работаем с 10:00 до 18:00

QR - код