среда, 20 марта 2013 г.

Таблица в HTML

Как красиво установить несколько счетчиков на сайт? Сколько счетчиков у вас на сайте?  У меня получается два. Счетчик Яндекса- наиболее наглядный, но глюкавый. Счетчик LiveInternet неудобный, но есть ряд плюсов. Есть еще рамблеровская иконка Top100, mail.ru рейтинг и так далее. Если ставить их в один блок в Joomla! или Wordpress получается криво и коряво, если разносить по разным блокам- тоже не комильфо. В результате я решил вспомнить старый добрый HTML и сделать таблицу с одинаковыми ячейками, в которых собственно и разместить прямоугольники счетчиков.

Таблица в HTML начинается с тега <table> и заканчивается тегом </table>. Описание таблицы размещается в открывающем теге. Что можно и нужно описать- ширина таблицы width с синтаксисом width="123" (ширина будет 123 пикселя), выравнивание относительно края окна браузера- align="left или center или right", границы таблицы border="1", т.е. 1 пиксель, хотите без границ- поставьте 0 и последний нужный параметр- цвет границы bordercolor="цвет".
Далее теги <tr> и </tr> формируют ряды таблицы, а <td> и </td>- ячейки.Внутри этих тегов тоже можно использовать описания рядов и ячеек.
Теперь для примера таблица.

<table border="1" width="600"  align="center">
 <tr>
<td width="300"><p>Код счетчика 1</p></td>
<td width="300" align="right"><p>Код счетчика 2</p></td>
</tr>
 <tr>
<td width="300"><p>Код счетчика 3</p></td>
<td width="300" align="right"><p>Код счетчика 4</p></td>
</tr>
</table>

Код счетчика 1 Код счетчика 2
Код счетчика 3 Код счетчика 4


Не нужны границы- меняем 1 в border на 0


<table border="0" width="600"  align="center">
 <tr>
<td width="300"><p>Код счетчика 1</p></td>
<td width="300" align="right"><p>Код счетчика 2</p></td>
</tr>
 <tr>
<td width="300"><p>Код счетчика 3</p></td>
<td width="300" align="right"><p>Код счетчика 4</p></td>
</tr>
</table>

Получаем:

Код счетчика 1 Код счетчика 2
Код счетчика 3 Код счетчика 4

Вместо кода счетчика можно вставить рисунок, текст или оставить пустой с перспективой на будущее.

Комментариев нет:

Отправить комментарий