Очень часто возникают проблемы по оформлению таблиц. В данной теме я попытаюсь на доступном и всем понятном языке объяснить, как же это делается.
Представим, вы попросили сделать вам таблицу, и, получив ее скелет (расположение ячеек без оформления их), вы не знаете, как быть. Ну или же сами сделали скелет, чем черт не шутит.
К примеру, таблица у нас будет вот такая:
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200"> <tbody> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>
Это самая что не наесть простая таблица, которая выглядит вот так:
Итак, в ней 2 строки по 2 ячейки в каждой. Давайте запомним, что каждая новая строка начинается с <tr> и заканчивается </tr>. Каждая же ячейка начинается с <td> и заканчивается соответственно </td>.
Давайте пронумеруем все ячейки для большей наглядности.
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200"> <tbody> <tr> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 4 </td> </tr> </tbody> </table>
Вот так это все теперь выглядит
Что мы теперь видим? Мы можем смело определить, какая ячейка и под что у нас пойдет.
К примеру,
ячейка №1 – под картинку,
ячейка №2 пойдет, например, под список администрации вашего форума,
№3 – под объявление,
№4 – под список модераторов.
Но для того, чтобы поставить картинку, надо знать, как же это делается. А делается это постановкой следующего кода
<img src="адрес картинки">
То есть, заливаем картинку на определенном ресурсе, специально предназначенным для этого (например, http://www.radikal.ru/ ), там мы получаем коды к картинке.
Для наглядного примера возьмем вот эту картинку
Итак, заменим слова «адрес картинки» на ее код. У нас получается
<img src="http://s57.radikal.ru/i157/0808/b2/8c5dcdca0585.jpg">
Теперь ставим это на место ячейки номер 1, не забывать вписать и остальные ячейки.
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200"> <tbody> <tr> <td> <img src="http://s57.radikal.ru/i157/0808/b2/8c5dcdca0585.jpg"> </td> <td> Администрация </td> </tr> <tr> <td> Объявление </td> <td> Модераторы </td> </tr> </tbody> </table>
Что же мы видим?
А видим мы то, что теперь нам необходимо выравнить ячейки. А помогут нам этом следующие параметры:
Width - ширина
Height – высота
Данные параметры вписываются в теги ячеек и строк, то есть в <tr> и <td>.
Попробуем сделать ровненькую таблицу и соответственно все ячейки ровными.
Для этого берем значения Width= " 50% ", Height="200px"
Вот как это будет выглядеть:
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200"> <tbody> <tr> <td Width= " 50% "; Height="200px"> <img src="http://s57.radikal.ru/i157/0808/b2/8c5dcdca0585.jpg"> </td> <td Width= " 50% "; Height="200px"> Администрация </td> </tr> <tr> <td Width= " 50% "; Height="200px"> Объявление </td> <td Width= " 50% "; Height="200px"> Модераторы </td> </tr> </tbody> </table>
Вот такая у нас красота пока что получается.
Что еще очень важно:
Сейчас наша таблица имеет прозрачный фон, то есть, по сути, такой фон Объявления, такой фон и у таблицы.
Мы можем поставить однородный фон на нее при помощи следующего кода
bgcolor="#ffffff"
ffffff – соответственно цвет.
Вписывается это в самое начало таблицы, а точнее на нашем варианте это будет выглядить вот так
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200"; bgcolor="#ffffff">
Но мы так же можем поставить и красочный фон на таблицу. Это решается при потановке следующего кода в тег самой таблицы
background="адрес фона"
К примеру, возьмем траву как фон нашей таблицы. 
Ставим ее в предыдущий код и получаем вот такую таблицу
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200" background="http://i051.radikal.ru/0806/bc/2cde3cdeaf33.jpg"> <tbody> <tr> <td Width= " 50% "; Height="200px"> <img src="http://s57.radikal.ru/i157/0808/b2/8c5dcdca0585.jpg"> </td> <td Width= " 50% "; Height="200px"> Администрация </td> </tr> <tr> <td Width= " 50% "; Height="200px"> Объявление </td> <td Width= " 50% "; Height="200px"> Модераторы </td> </tr> </tbody> </table>
Опять сталкиваемся с проблемой, что не видно шрифта. И нам, соответственно, надо его теперь подбирать.
Это можно решить при помощи постановки цветов и размера.
Мы рассмотрим самый простой способ изменения цвета и размера текста
<font color=Цвет size="?"> Текст </font>
За место ? указываем размер от 1 до 7.
За место слова "Цвет" указываем цвет.
Например, цвет слова Администрация у нас будет красный, большими буквами.
<font color=red size="5"> Администрация </font>
А все остальное, то есть, ячейки №3 и №4 сделаем фиолетовым средним.
Посмотрим…
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200" background="http://i051.radikal.ru/0806/bc/2cde3cdeaf33.jpg"> <tbody> <tr> <td Width= " 50% "; Height="200px"> <img src="http://s57.radikal.ru/i157/0808/b2/8c5dcdca0585.jpg"> </td> <td Width= " 50% "; Height="200px"> <font color=red size="5"> Администрация </font> </td> </tr> <tr> <td Width= " 50% "; Height="200px"> <font color=purple size="4">Объявление</font> </td> <td Width= " 50% "; Height="200px"> <font color=purple size="4">Модераторы</font> </td> </tr> </tbody> </table>
Что же нам осталось сделать?
А всего лишь заполнить остальные ячейки!
То есть, вписать администрацию, модераторов и объявление.
Очень важно на данном этапе запомнить такой параметр, как
<br>
Он переносит текст на следующую строчку.
Так же, нам могут понадобится гиперссылки (для того чтобы например кликнув на ник админа мы перешли в его профиль).
<a href="ссылка">Текст</a>
Ссылку заменяем на адрес странички, куда должен осуществляться переход.
Так же, мы можем выровнять наш текст по центру ячеек при помощи:
<center>Текст</center>
Итак, все запомнили? Тогда перейдем к последнему штриху в заполнении нашей таблицы.
<table width="100%" border="1" cellpadding="2" cellspacing="1" height="200" background="http://i051.radikal.ru/0806/bc/2cde3cdeaf33.jpg"> <tbody> <tr> <td Width= " 50% "; Height="200px"> <img src="http://s57.radikal.ru/i157/0808/b2/8c5dcdca0585.jpg"> </td> <td Width= " 50% "; Height="200px"> <font color=red size="5"> <center> Администрация <br> <a href="http://help.forumbb.ru/profile.php?id=2">Admin</a> </center><font> </td> </tr> <tr> <td Width= " 50% "; Height="200px"> <font color=purple size="4"><center> Объявление <br> Таблица готова к работе! </center></font> </td> <td Width= " 50% "; Height="200px"> <font color=purple size="4"><center> Модераторы <br> <a href="http://help.forumbb.ru/profile.php?id=9">DREД</a> <br> <a href="http://help.forumbb.ru/profile.php?id=692">rps</a> </font></center> </td> </tr> </tbody> </table>
Таблица готова!
Но иногда возникают следующие вопросы:
1). Можно ли поставить чат в таблицу?
2). Как поставить в таблицу календарик?
Да, все это возможно, нужно лишь создать чат/календарик и полученный код ставить в ту ячейку таблицы, куда бы вы хотели.
Сегодня, думаю, мы многому научились, и теперь самостоятельно сможем красиво оформлять таблицы.