РАЗДЕЛ II. Форматирование таблицы в HTML
Шаг 1. Фон таблицы, строк, ячеек
Фон таблицы задается при помощи тегов bgcolor и background
bgcolor используется для цветовых значений (когда вы назначаете таблице или элементу таблицы цвет) и принимает вид:
background используется для фоновых изображений (установка картинки в качестве фона) и принимает вид:
background="ссылка_на_картинку"
Для того, чтобы задать фон всей таблицы, необходимо вписать подходящий элемент в тег начала таблицы: <table>
Для того, чтобы задать фон строки, необходимо вписать подходящий элемент в тег начала строки: <tr>
Для того, чтобы задать фон ячейки, необходимо вписать подходящий элемент в тег начала ячейки: <td>
Важно отметить, что в html-"раскрашивании" имеется иерархия расставления цветов.
В первую очередь отображаются цвета ячеек, во вторую очередь - строк, а фон, вписанный в код всей таблицы - в самую последнюю очередь.
Например, если в тег <table> вписать красный цвет, что задаст фоновый цвет для ВСЕЙ таблицы, а в одну из ее строк (<tr>) вписать синий цвет, то весть фон таблицы будет красным, но фон отмеченной строки будет синим.
Примеры
Пример 1: Фоновое изображение в таблице
Осуществим следующую задачу:
Для этого необходимо дописать в уже существующий код таблицы ссылку на изображение:
<table background="https://forumupload.ru/uploads/0007/e3/ … /20406.jpg">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Итоговая таблица не будет отображаться аналогично рисунку, т.к. таблица форматирование таблицы еще не закончено.
Если все же терзает любопытство и вы хотели бы посмотреть, как должна выглядеть таблица, используйте этот код:
Такой же принцип можно использовать, встраивая картинки в строки и ячейки.
Для наглядности.
Строка:
<tr background="https://forumupload.ru/uploads/0007/e3/ … /20406.jpg"> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr>
Ячейка:
<tr> <td background="https://forumupload.ru/uploads/0007/e3/ … /20406.jpg">ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr>
Пример 2: Фоновый цвет в таблице
Для наглядности зададим фон сразу нескольким элементам таблицы и добьемся следующего:
Сначала определим цвета.
Желтый цвет у нас имеет код f3f167 и оранжевый - f3ca67
(определить цвет можно в помощью photoshop или воспользоваться таблицей html-цветов)
Сначала окрашиваем ячейку 1-3. для этого, находим ее в коде:
<table background="https://forumupload.ru/uploads/0007/e3/f7/6822/632652.gif">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Как мы видим, благодаря тегу colspan, у нас только 1 ячейка в строке, поэтому нам все равно, куда ставить тег bgcolor: можно в строчку (tr), можно в ячейку(td) - без разницы. Я решила вписать код в строку:
<table background="https://forumupload.ru/uploads/0007/e3/f7/6822/632652.gif">
<tr bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
теперь расставим тег bgcolor="#f3ca67" по ячейкам 4+7, 6 и 9.
Находим их в коде:
<table background="https://forumupload.ru/uploads/0007/e3/f7/6822/632652.gif">
<tr bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
а теперь приписываем в тег начала ячейки <td> наш цвет:
<table background="https://forumupload.ru/uploads/0007/e3/f7/6822/632652.gif">
<tr bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" bgcolor="#f3ca67">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td bgcolor="#f3ca67">ячейка 6</td> </tr>
<tr> <td bgcolor="#f3ca67">ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
готово. =)
Итоговая таблица не будет отображаться аналогично рисунку, т.к. таблица форматирование таблицы еще не закончено.
Если все же терзает любопытство и вы хотели бы посмотреть, как должна выглядеть таблица, используйте этот код:
Отредактировано Герда (28.11.12 11:08)