|
Не пора ли заняться таблицами?
Конечно же пора! Итак, запоминайте:
Любая таблица начинается с тега table.
Любая строка в таблице начинается с тега tr.
Любая ячейка таблицы начинается с тега td.
Один столбец:
<table border=7>
<tr>
<td>100</td>
</tr>
</table>
|
результат:
|
Одна строка и три столбца:
<table border=5>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
|
результат:
|
Две строки и три столбца:
<table border=10>
<tr>
<td>♣</td>
<td>200</td>
<td>©</td>
</tr>
<tr>
<td>400</td>
<td> </td>
<td>600</td>
</tr>
</table>
|
результат:
|
В ячейках таблицы можно быть что угодно: текст, числа, картинки, смайлики . Их можно объединять, задавать любое выравнивание и отступ внутри и снаружи. Можно изменить фон, размер и задать любые границы...
А если вам нужна пустая ячейка - пропишите в ней символ пробела
Теперь можно поговорить о создании заголовков таблицы. Это важно.
Давайте сначала сделаем набросок таблицы. Хотя бы на бумаге.
Так нам будет удобнее строить ее каркас и выбирать место для заголовка. Например, так:
Тег заголовка обозначается <TH>...</TH> (table heading). По умолчанию heading центрируется относительно клетки таблицы.
Удобно, не правда ли?
Итак,
Вот что у нас получится:
| 100 | Заголовок | 300 |
|---|
| 400 | 500 | 600 | | 700 | 800 | 900 |
Заголовок не только расположен по центру, но еще и выделен жирным шрифтом, так что нам не придется прописывать лишний раз тег <B>.
Заголовки могут располагаться в любой ячейке, а значит, могут быть как горизонтальными, так и вертикальными. Или теми и другими вместе. | Горизонтальные заголовки:
| Имя |
Фамилия |
Телефон |
| Вася |
Пупкин |
123-45-67 |
|
Вертикальные заголовки:
| Имя: |
Вася |
| Фамилия: |
Пупкин |
| Телефон: |
123-45-67 |
|
Смешанные заголовки:
|
|
Заголовок можно разместить и за границей таблицы. Для этого существует тег <CAPTION>, который прописывается, тем не менее, после тега <TABLE>:
|
|
|
Текст заголовка
| 100 |
200 |
300 |
| 400 |
500 |
600 |
| 700 |
800 |
900 |
|
Текст заголовка может быть и под таблицей
| 100 |
200 |
300 |
| 400 |
500 |
600 |
| 700 |
800 |
900 |
Для этого достаточно прописать <caption valign="bottom">
|
Вы еще не забыли основные теги таблицы? <table>, <tr>,<td> и, соответственно, </td>, </tr>,</table>.
Давайте учиться дальше. Сегодня мы будем раскрашивать наши таблицы.
Можно закрасить всю таблицу целиком: для этого внутри тега <table> напишем
<table bgcolor="номер или название цвета">:
<table bgcolor="#84FF80" border="1">
<tr>
<td>Это</td>
<td>таблица</td>
</tr>
<tr>
<td>с зеленым</td>
<td> фоном</td>
</tr>
</table> | | Это | таблица | | с зеленым | фоном |
|
А если атрибут bgcolor прописать для тега <tr>, мы получим цветную строку:
<table border="1">
<tr bgcolor="#84FF80">
<td>Эта строка</td>
<td>зеленая,</td>
</tr>
<tr bgcolor="#FFF180">
<td>а эта - </td>
<td>желтая</td>
</tr>
</table> | | Эта строка | зеленая, | | а эта - | желтая |
|
Таким образом можно "нарисовать" компьютерную радугу:
Вы уже догадались, что получится, если прописать bgcolor для ячейки <td>?
<table border="1">
<tr>
<td bgcolor="#FFFF99">Желтая ячейка</td>
<td bgcolor="#00FFFF">Голубая ячейка</td>
</tr>
<tr>
<td bgcolor="#C0C0C0">Серая ячейка</td>
<td>А эта ячейка не закрашена</td>
</tr>
</table> | | Желтая ячейка | Голубая ячейка | | Серая ячейка | А эта ячейка не закрашена |
|
Теперь попробуем замостить таблицу фоновой картинкой. Вместо цвета пропишем в стиле ссылку на картинку. Вот сама картинка:
 .
Скопируем в ее свойствах адрес и вставим его в код.
<table style="background:url('http://img.liveinternet.ru/images/attach/1/4339/4339870_545.jpg')"><tr><td>Текст на фоне картинки</td></tr></table>
Вот такая получается таблица.
В этой только одна ячейка,
но вы можете сделать сколько угодно,
прописывая фон для всех
или для отдельных.
Позаботьтесь о том,
чтобы текст был читабельным
на выбранном фоне! |
|
|
