<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2russianfull.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>2Coders - блог web-разработчика</title>
	
	<link>http://2coders.ru</link>
	<description>Web - программирование и SEO</description>
	<lastBuildDate>Mon, 16 Apr 2012 18:05:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/2coders" /><feedburner:info uri="2coders" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>2coders</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><feedburner:feedFlare href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Ffeeds.feedburner.com%2F2coders" src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif">Subscribe with My Yahoo!</feedburner:feedFlare><feedburner:feedFlare href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2F2coders" src="http://www.newsgator.com/images/ngsub1.gif">Subscribe with NewsGator</feedburner:feedFlare><feedburner:feedFlare href="http://feeds.my.aol.com/add.jsp?url=http%3A%2F%2Ffeeds.feedburner.com%2F2coders" src="http://o.aolcdn.com/favorites.my.aol.com/webmaster/ffclient/webroot/locale/en-US/images/myAOLButtonSmall.gif">Subscribe with My AOL</feedburner:feedFlare><feedburner:feedFlare href="http://www.bloglines.com/sub/http://feeds.feedburner.com/2coders" src="http://www.bloglines.com/images/sub_modern11.gif">Subscribe with Bloglines</feedburner:feedFlare><feedburner:feedFlare href="http://www.netvibes.com/subscribe.php?url=http%3A%2F%2Ffeeds.feedburner.com%2F2coders" src="http://www.netvibes.com/img/add2netvibes.gif">Subscribe with Netvibes</feedburner:feedFlare><feedburner:feedFlare href="http://fusion.google.com/add?feedurl=http%3A%2F%2Ffeeds.feedburner.com%2F2coders" src="http://buttons.googlesyndication.com/fusion/add.gif">Subscribe with Google</feedburner:feedFlare><feedburner:feedFlare href="http://www.pageflakes.com/subscribe.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2F2coders" src="http://www.pageflakes.com/ImageFile.ashx?instanceId=Static_4&amp;fileName=ATP_blu_91x17.gif">Subscribe with Pageflakes</feedburner:feedFlare><feedburner:feedFlare href="http://lenta.yandex.ru/settings.xml?name=feed&amp;url=http%3A%2F%2Ffeeds.feedburner.com%2F2coders" src="http://lenta.yandex.ru/i/addfeed.gif">?????? ? ??????.?????</feedburner:feedFlare><item>
		<title>Примеры работы с миграциями в Yii framework</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/KmTsLaoW4xI/</link>
		<comments>http://2coders.ru/primery-raboty-s-migraciyami-v-yii-framework/#comments</comments>
		<pubDate>Fri, 02 Mar 2012 19:05:01 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[Yii]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=2103</guid>
		<description><![CDATA[Миграции &#8211; это очень полезный и удобный инструмент для управления структурой бд, значительно упрощающий командную разработку. В этом посте, я покажу примеры часто используемых миграций: create table, insert, update и add column. В качестве примера будем использовать таблицу tbl_news: Создание таблицы с помощью миграции 1. Управлениями миграциями в Yii производится с помощью консольной команды yiic [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Миграции</strong> &#8211; это очень полезный и удобный инструмент для управления структурой бд, значительно упрощающий командную разработку. В этом посте, я покажу примеры часто используемых миграций: create table, insert, update и add column.<br />
<span id="more-2103"></span><br />
В качестве примера будем использовать таблицу <strong>tbl_news</strong>:</p>
<pre class="brush: sql; title: ; notranslate">
CREATE TABLE IF NOT EXISTS `tbl_news` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(200) CHARACTER SET utf8 NOT NULL,
  `content` text CHARACTER SET utf8,
  `created_at` date DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;
</pre>
<h3>Создание таблицы с помощью миграции</h3>
<p>1. Управлениями миграциями в Yii производится с помощью консольной команды yiic migrate. Для того, чтобы создать нашу первую миграцию, выполним в консоли команду: <strong>yiic migrate create create_tbl_news</strong>. При вопросе &laquo;Create new migration &raquo;%path_to_migration%&raquo;, отвечаем yes. Если все прошло правильно, то в директории protected/migrations должен появиться файл, с примерно таким названием m120302_172329_create_tbl_news.php. Первая часть названия файла это timestamp, вторая это название миграции, которое мы задали. </p>
<p>2. Редактируем созданный файл, в нем будет два метода <strong>up()</strong> и <strong>down()</strong>. Для создания таблицы нам нужен будет метод up(). Изменим его содержимое, дописав следующий код:</p>
<pre class="brush: php; title: ; notranslate">
            $this-&gt;createTable('tbl_news', array(
                  'id' =&gt; 'pk',
                  'title' =&gt; 'VARCHAR(200) NOT NULL',
                  'content' =&gt; 'text',
            ));
</pre>
<p>Полностью файл миграции должен выглядеть так (не забываем, что timestamp у вас будет другой):</p>
<pre class="brush: php; title: ; notranslate">
class m120302_172329_create_tbl_news extends CDbMigration
{
	public function up()
	{
		$this-&gt;createTable('tbl_news', array(
                  'id' =&gt; 'pk',
                  'title' =&gt; 'VARCHAR(200) NOT NULL',
                  'content' =&gt; 'text',
            ));
	}

	public function down()
	{
		echo &quot;m120302_172329_create_tbl_news does not support migration down.\n&quot;;
		return false;
	}

	/*
	// Use safeUp/safeDown to do migration with transaction
	public function safeUp()
	{
	}

	public function safeDown()
	{
	}
	*/
</pre>
<p>3. Теперь, выполним в консоли  команду yiic migrate, если все прошло удачно, то видим надпись Migrated up Scuccessfully! В бд должна появиться таблица <strong>tbl_news</strong> и <strong>tbl_migration</strong>. Двигаемся дальше.</p>
<h3>Добавление записи в таблицу с помощью миграции</h3>
<p>1. Выполняем команду: <strong>yiic migrate create insert_tbl_news</strong>.<br />
2. Редактируем сгенерированный файл с миграцией. Добавляем в метод up() следующий код:</p>
<pre class="brush: php; title: ; notranslate">
$this-&gt;insert('tbl_news', array(
                   'title' =&gt; 'Title 1',
                   'content' =&gt; 'Content 1',
));
</pre>
<p>3.Выполняем команду yiic migrate.</p>
<h3>Изменение записи в таблице с помощью миграции</h3>
<p>1. Выполняем команду: <strong>yiic migrate create update_tbl_news</strong>.<br />
2. Редактируем сгенерированный файл с миграцией. Добавляем в метод up():</p>
<pre class="brush: php; title: ; notranslate">
$this-&gt;update('tbl_news', array(
              'title' =&gt; 'Updated title'),
              'id=1'
);
</pre>
<p>3.Выполняем команду yiic migrate.</p>
<h3>Добавление колонки в таблицу с помощью миграции</h3>
<p>1. Выполняем команду: <strong>yiic migrate create add_column_tbl_news</strong>.<br />
Редактируем сгенерированный файл с миграцией. Добавляем в метод up():</p>
<pre class="brush: php; title: ; notranslate">
$this-&gt;addColumn('tbl_news', 'created_at', 'date');
</pre>
<p>3. Выполняем команду yiic migrate.</p>
<h3>Удаление колонки</h3>
<p>1. Выполняем команду: <strong>yiic migrate create drop_column_tbl_news</strong>.<br />
Редактируем сгенерированный файл с миграцией. Добавляем в метод up():</p>
<pre class="brush: php; title: ; notranslate">
$this-&gt;dropColumn('tbl_news', 'created_at');
</pre>
<p>3. Выполняем команду yiic migrate.</p>
<p>Вот собственно и все. Подробнее об остальных миграциях можно почитать на официальном <a href="http://www.yiiframework.com/doc/guide/1.1/ru/database.migration">сайте</a>.</p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/KmTsLaoW4xI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/primery-raboty-s-migraciyami-v-yii-framework/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://2coders.ru/primery-raboty-s-migraciyami-v-yii-framework/</feedburner:origLink></item>
		<item>
		<title>12 jQuery плагинов для проигрывания видео и аудио файлов</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/CJWjZguZIZE/</link>
		<comments>http://2coders.ru/12-jquery-plugins-for-playing-video-audio/#comments</comments>
		<pubDate>Thu, 01 Sep 2011 18:48:18 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery плагины]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1946</guid>
		<description><![CDATA[Я уже делал несколько раз подборки jquery плагинов здесь и здесь. Сегодняшние плагины посвящены проигрыванию видео и аудио файлов на сайте. jPlayer Этот плеер поддерживает следующие форматы в HTML5-версии: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*. При использовании flash: mp3, m4a (AAC), m4v (H.264). По заверению автора, плеер работает в Chrome, Opera, Safari, [...]]]></description>
			<content:encoded><![CDATA[<p>Я уже делал несколько раз подборки jquery плагинов <a href="http://2coders.ru/25-poleznyx-plaginov-na-jquery/">здесь</a> и <a href="http://2coders.ru/10-poleznyx-plaginov-na-jquery/">здесь</a>. Сегодняшние плагины посвящены проигрыванию видео и аудио файлов на сайте.</p>
<p><strong>jPlayer</strong><br />
Этот плеер поддерживает следующие форматы в HTML5-версии: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*. При использовании flash: mp3, m4a (AAC), m4v (H.264). По заверению автора, плеер работает в Chrome, Opera, Safari, IE6, IE7, IE8, IE9, iPad, iPhone, iPod.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/08/jplayer3.jpg" alt="jplayer" title="jplayer" width="593" height="411" class="aligncenter size-full wp-image-1992" /><a href="http://www.jplayer.org/latest/demos/" rel='nofollow'>Перейти на сайт</a></p>
<p><span id="more-1946"></span><br />
<strong>Video JS</strong><br />
Честно говоря, для использования Video JS необязательно использовать jquery, но автор любезно предоставил <a href="http://videojs.com/jquery/" rel="nofollow">jquery-версию</a>.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/Video-JS.jpg" alt="Video JS" title="Video JS" width="593" height="245" class="aligncenter size-full wp-image-2016" /><a href="http://videojs.com/jquery/" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>Acorn Media Player</strong><br />
Этот проигрыватель использует HTML5 video  тег и делает акцент на количестве настроек.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/acorn_media_player.jpg" alt="" title="acorn_media_player" width="593" height="288" class="size-full wp-image-2019" /><a href="http://ghinda.net/acornmediaplayer/demos.html" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>Media Element</strong><br />
Воспроизводит аудио и видео файлы. Есть специальные версии для: WordPress, Drupal и для RoR.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/media_element.jpg" alt="Media Element" title="media_element" width="538" height="303" class="aligncenter size-full wp-image-2036" /><a href="http://mediaelementjs.com/" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>Flare Video</strong><br />
По функционалу похож на ранее рассмотренные плееры. Можно использовать разные темы оформления.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/flare_video_player.jpg" alt="Flare Video" title="flare_video_player" width="593" height="296" class="aligncenter size-full wp-image-2058" /><a href="http://flarevideo.com/" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>Open Standard Media</strong><br />
Плеер с кучей настроек, но с неудобным интерфейсом.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/open_standard_media.jpg" alt="Open Standard Media" title="open_standard_media" width="593" height="394" class="aligncenter size-full wp-image-2061" /><a href="http://www.mediafront.org/" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>jMP3</strong><br />
jMP3 (javaScript MP3 player) поможет воспроизвести mp3 файлы на вашем сайте. Поддерживает только mp3 формат.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/jmp3.jpg" alt="jMp3" title="jmp3" width="313" height="232" class="aligncenter size-full wp-image-2063" /><a href="http://www.sean-o.com/jquery/jmp3/" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>Malsup jquery media plugin</strong><br />
Поддерживает следующие видео форматы: asx, asf, avi, flv, mov, mpg, mpeg, mp4, qt, ra, smil, swf, wmv, 3g2, 3gp.<br />
И может воспроизводить такие аудио-файлы: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, ra, ram, rm, wav, wma.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/malsup_jquery.jpg" alt="malsup jquery" title="malsup_jquery" width="250" height="249" class="aligncenter size-full wp-image-2066" /><a href="http://malsup.com/jquery/media/#demos" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>Oiplayer</strong><br />
Основан на <a rel='nofollow' href="http://flowplayer.org/">flowplayer</a>&#8216;е. Работает на Safari, Google Chrome, Firefox, Internet Explorer.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/oiplayer_jquery_plugin.jpg" alt="OIPlayer jQuery plugin" title="oiplayer_jquery_plugin" width="488" height="277" class="aligncenter size-full wp-image-2069" /><a href="http://www.openbeelden.nl/oiplayer/" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>Simple Player</strong><br />
Проигрывает mp3-файлы. Работает во всех браузерах поддерживающих audio тег HTML5.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/simple_player.jpg" alt="Simple Player" title="simple_player" width="243" height="28" class="aligncenter size-full wp-image-2072" /><a href="http://jay-notes.blogspot.com/2010/06/simple-player-very-simple-html5-audio.html" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>IWishQuery</strong><br />
Делает все тоже самое, что и Simple Player.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/iwishquery.jpg" alt="IWishQuery" title="iwishquery" width="300" height="33" class="aligncenter size-full wp-image-2074" /><a href="http://code.internuts.se/jquery/iwish/" rel='nofollow'>Перейти на сайт</a></p>
<div style='margin-top:30px'></div>
<p><strong>JQuery Sound Plugin</strong><br />
Не слишком удобный плеер. К тому же, без <a rel="nofollow" href="http://www.apple.com/quicktime/download/">Quicktime</a> плагина не запускается.<br />
<img src="http://2coders.ru/2coders.ru/wp-content/uploads/2011/09/jquery_sound_plugin.png" alt="JQuery Sound Plugin" title="jquery_sound_plugin" width="276" height="94" class="aligncenter size-full wp-image-2076" /><a href="http://esblog.in/sound_plugin_demo/" rel='nofollow'>Перейти на сайт</a></p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/CJWjZguZIZE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/12-jquery-plugins-for-playing-video-audio/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://2coders.ru/12-jquery-plugins-for-playing-video-audio/</feedburner:origLink></item>
		<item>
		<title>Полезные .htaccess правила</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/3nx86raZU0g/</link>
		<comments>http://2coders.ru/useful-rules-htaccess/#comments</comments>
		<pubDate>Fri, 26 Aug 2011 20:03:55 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[Разное]]></category>
		<category><![CDATA[.htaccess]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1908</guid>
		<description><![CDATA[Иногда, при создании/редактировании .htaccess&#8217;a возникает необходимость изменить/добавить какое-либо правило. Но, не всегда помнишь точный синтаксис. И для того, чтобы не спрашивать каждый раз гугл, я собрал небольшую подборку чрезвычайно полезных и часто используемых правил и решений. Убрать www из урла Для удобства или для SEO, вы можете захотеть убрать (или использовать) www в адресе вашего [...]]]></description>
			<content:encoded><![CDATA[<p>Иногда, при создании/редактировании .htaccess&#8217;a возникает необходимость изменить/добавить какое-либо правило. Но, не всегда помнишь точный синтаксис. И для того, чтобы не спрашивать каждый раз гугл, я собрал небольшую подборку чрезвычайно полезных и часто используемых правил и решений.</p>
<p><strong>Убрать www из урла </strong><br />
Для удобства или для SEO, вы можете захотеть убрать (или использовать) www в адресе вашего сайта. Приведенный код убирает www из урла сайта и перенаправляет на адрес вида http://mysite.ru.</p>
<pre class="brush: php; title: ; notranslate">
RewriteEngine On
RewriteCond %{HTTP_HOST} !^mysite.ru$ [NC]
RewriteRule ^(.*)$ http://mysite.ru/$1 [L,R=301]
</pre>
<p><strong>Автоматически устанавливать файлам кодировку utf-8  </strong><br />
Один из вариантов избежать проблем с кодировкой &#8211; это создать .htaccess с таким содержанием: </p>
<pre class="brush: php; title: ; notranslate">
&lt;FilesMatch &quot;\.(htm|html|css|js)$&quot;&gt;
AddDefaultCharset UTF-8
&lt;/FilesMatch&gt;
</pre>
<p><span id="more-1908"></span><br />
<strong>Убрать расширение файла</strong><br />
Расширения файлов могут быть полезны для разработчиков, но они абсолютно не нужны обычным посетителям вашего сайта. Приведенный ниже код удаляет .html расширение у всех html-файлов.</p>
<pre class="brush: php; title: ; notranslate">
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
# Вместь html может быть любое другое расширение: php, htm, asp
</pre>
<p><strong>Запись php ошибок в лог-файл</strong><br />
Интересный способ записи ошибок выполнения скрипта. Просто создайте файл php_error.log у вас на сервере и укажите до него путь в последней строке кода.</p>
<pre class="brush: php; title: ; notranslate">
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log
</pre>
<p><strong>Перенаправление со старого домена на новый</strong><br />
Перенаправляем посетителей со своего старого сайта на новый, используя 301 редирект.</p>
<pre class="brush: php; title: ; notranslate">
RewriteEngine On
RewriteRule ^(.*)$ http://www.newsite.ru/$1 [R=301,L]
</pre>
<p><strong>Изменяем некоторые системные значения</strong><br />
Данный трюк может срабатывать не всегда. </p>
<pre class="brush: php; title: ; notranslate">
#Увеличиваем максимальный размер загружаемого файла
php_value upload_max_filesize 100M
#Увеличиваем максимальный размер файла передаваемого пост-запросом
php_value post_max_size 100M
#Увеличиваем время выполнения скрипта
php_value max_execution_time 700
</pre>
<p><strong>Удалить подраздел/категорию из урла</strong><br />
Для того, чтобы изменить урл вида: http://site.ru/category/seo на http://site.ru/seo, дописываем в .htaccess следующий код.</p>
<pre class="brush: php; title: ; notranslate">
RewriteRule ^category/(.+)$ http://www.yourdomain.com/$1 [R=301,L]
</pre>
<p><strong>Свои страницы с ошибками (404, 403, 500, etc.)</strong><br />
Не нравятся дефолтные страницы с ошибками? Просто создайте для каждой ошибки свой html-файл и пропишите в .htaccess следующий код.</p>
<pre class="brush: php; title: ; notranslate">
ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authrequest.html
ErrorDocument 403 /errors/forbidden.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/servererror.html
</pre>
<p><strong>Запрет выполнения php-скриптов</strong><br />
Данный код может быть очень быть полезен там, где вы храните файлы или картинки.  Только,  нужно запретить перезаписывать .htaccess.</p>
<pre class="brush: php; title: ; notranslate">
php_flag engine off
</pre>
<p><strong>Защита от хотлинкинга</strong><br />
Хотлинк  — это включение в веб-страницу файлов-изображений или других ресурсов с чужого сервера. Для избежания этого злостного деяния используем следующий код.</p>
<pre class="brush: php; title: ; notranslate">
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.ru/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]
</pre>
<img src="http://feeds.feedburner.com/~r/2coders/~4/3nx86raZU0g" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/useful-rules-htaccess/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://2coders.ru/useful-rules-htaccess/</feedburner:origLink></item>
		<item>
		<title>I’m back!</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/rmx29uCDe3Y/</link>
		<comments>http://2coders.ru/im-back/#comments</comments>
		<pubDate>Wed, 27 Apr 2011 18:03:28 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[Новости]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1898</guid>
		<description><![CDATA[Блог восстановлен после аварии у хостера. Правда восстановить удалось, из очень старого бекапа и на новом хостинге. Но, я вернулся и это уже хорошо.]]></description>
			<content:encoded><![CDATA[<p>Блог восстановлен после аварии у хостера. Правда восстановить удалось, из очень старого бекапа и на новом хостинге. Но, я вернулся и это уже хорошо.</p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/rmx29uCDe3Y" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/im-back/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://2coders.ru/im-back/</feedburner:origLink></item>
		<item>
		<title>Обфускатор javascript-кода</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/yhTmTLVB4hk/</link>
		<comments>http://2coders.ru/obfuskator-javascript-koda/#comments</comments>
		<pubDate>Sat, 04 Sep 2010 17:31:10 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Полезные скрипты]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1867</guid>
		<description><![CDATA[Что?! При слове обфускация к тебе на ум приходят неприличные слова? Если да, то тогда тебе сюда. В обратном случае, продолжаем дальше читать статью. Обфусцировать (язык можно сломать), мы будем с целью затруднения изучения/понимания javascript-кода. Для примера, обфускации подвергнется следующий код: 1 alert&#40;'2coders.ru'&#41; В результате обфускации мы получим: 1 2 3 4 5 &#60;script&#62; &#40;function&#40;O,o&#41;&#123;o&#40;O&#40;97,108,101,114,116,40,39, [...]]]></description>
			<content:encoded><![CDATA[<p>Что?! При слове обфускация к тебе на ум приходят неприличные слова? Если да, то тогда тебе <a  rel='nofollow' href="http://ru.wikipedia.org/wiki/Обфускация">сюда</a>. В обратном случае, продолжаем дальше читать статью. Обфусцировать (язык можно сломать), мы будем с целью затруднения изучения/понимания javascript-кода.<br />
Для примера, обфускации подвергнется следующий код:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'2coders.ru'</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>В результате обфускации мы получим:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>O<span style="color: #339933;">,</span>o<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>o<span style="color: #009900;">&#40;</span>O<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">97</span><span style="color: #339933;">,</span><span style="color: #CC0000;">108</span><span style="color: #339933;">,</span><span style="color: #CC0000;">101</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">116</span><span style="color: #339933;">,</span><span style="color: #CC0000;">40</span><span style="color: #339933;">,</span><span style="color: #CC0000;">39</span><span style="color: #339933;">,</span>
<span style="color: #CC0000;">50</span><span style="color: #339933;">,</span><span style="color: #CC0000;">99</span><span style="color: #339933;">,</span><span style="color: #CC0000;">111</span><span style="color: #339933;">,</span><span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><span style="color: #CC0000;">101</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">115</span><span style="color: #339933;">,</span>
<span style="color: #CC0000;">46</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">117</span><span style="color: #339933;">,</span><span style="color: #CC0000;">39</span><span style="color: #339933;">,</span><span style="color: #CC0000;">41</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>String.<span style="color: #660066;">fromCharCode</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#41;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p><span id="more-1867"></span><br />
Но, это в конце, а пока что у нас все еще предельно понятный alert(&#8217;2coders.ru&#8217;). Первым делом, переведем символы в их ASCII эквивалент:</p>
<p><strong>a</strong> &#8211; 97<br />
<strong>l </strong> &#8211; 108<br />
<strong>e</strong> &#8211; 101<br />
<strong>r </strong> &#8211; 114<br />
<strong>t</strong>  &#8211; 116<br />
Ну и т.д.</p>
<p>После преобразования, <strong>alert(&#8217;2coders.ru&#8217;)</strong> будет выглядить вот так:<br />
97,108,101,114,116,40,39,50,99,111,100,101,114,115,46,114,117,39,41<br />
Уже лучше, но нам нужно как-то перевести ASCII значения обратно, и запустить код. В этом нам помогут: функция <strong>eval()</strong> и метод <strong>fromCharCode()</strong>.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">97</span><span style="color: #339933;">,</span><span style="color: #CC0000;">108</span><span style="color: #339933;">,</span><span style="color: #CC0000;">101</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">116</span><span style="color: #339933;">,</span><span style="color: #CC0000;">40</span><span style="color: #339933;">,</span><span style="color: #CC0000;">39</span><span style="color: #339933;">,</span><span style="color: #CC0000;">50</span><span style="color: #339933;">,</span><span style="color: #CC0000;">99</span><span style="color: #339933;">,</span><span style="color: #CC0000;">111</span><span style="color: #339933;">,</span>
<span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><span style="color: #CC0000;">101</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">115</span><span style="color: #339933;">,</span><span style="color: #CC0000;">46</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">117</span><span style="color: #339933;">,</span><span style="color: #CC0000;">39</span><span style="color: #339933;">,</span><span style="color: #CC0000;">41</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Приведенный код, эквивалентен alert() c сообщением 2coders.ru. Попробуйте протестировать его у себя, если непонятно. Идем дальше и еще усложняем код:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>O<span style="color: #339933;">,</span>o<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>o<span style="color: #009900;">&#40;</span>O<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">97</span><span style="color: #339933;">,</span><span style="color: #CC0000;">108</span><span style="color: #339933;">,</span><span style="color: #CC0000;">101</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">116</span><span style="color: #339933;">,</span><span style="color: #CC0000;">40</span><span style="color: #339933;">,</span><span style="color: #CC0000;">39</span><span style="color: #339933;">,</span><span style="color: #CC0000;">50</span><span style="color: #339933;">,</span><span style="color: #CC0000;">99</span><span style="color: #339933;">,</span><span style="color: #CC0000;">111</span><span style="color: #339933;">,</span><span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><span style="color: #CC0000;">101</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">115</span><span style="color: #339933;">,</span><span style="color: #CC0000;">46</span><span style="color: #339933;">,</span><span style="color: #CC0000;">114</span><span style="color: #339933;">,</span><span style="color: #CC0000;">117</span><span style="color: #339933;">,</span><span style="color: #CC0000;">39</span><span style="color: #339933;">,</span><span style="color: #CC0000;">41</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>String.<span style="color: #660066;">fromCharCode</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Опять у нас все тот же alert(&#8217;2coders.ru&#8217;), но уже в менее понятном виде. Создадим, небольшую форму и функцию, чтобы не пришлось все преобразовывать ручками.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">function</span> obf<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #339933;">+</span>str<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/./g</span> <span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>b<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>a.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>b.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'container'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'&amp;lt;script&gt;(function(O,o){o(O('</span><span style="color: #339933;">+</span>a.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'))})(String.fromCharCode,eval)&amp;lt;/script&gt;'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
&lt;div id=&quot;container&quot;&gt;
&lt;/div&gt;
&lt;textarea cols=&quot;50&quot; rows=&quot;10&quot; name=&quot;text&quot; id=&quot;text&quot;&gt;&lt;/textarea&gt; &lt;br /&gt;
&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Поехали!&quot; onclick=&quot;obf()&quot;/&gt;</pre></td></tr></table></div>

<p>Вводим в форму наш javascript код, и после <del datetime="2010-09-04T15:51:21+00:00">магии</del> обфускации получаем, что-то мало понятное и непохожее на то, что мы вводили ранее. Качаем готовую версию <a href='http://2coders.ru/wp-content/uploads/2010/09/obfuscator.zip'>отсюда</a>.</p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/yhTmTLVB4hk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/obfuskator-javascript-koda/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://2coders.ru/obfuskator-javascript-koda/</feedburner:origLink></item>
		<item>
		<title>jQuery прелоадер</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/FzBGKTqxG9o/</link>
		<comments>http://2coders.ru/jquery-preloader/#comments</comments>
		<pubDate>Fri, 03 Sep 2010 06:34:47 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Полезные скрипты]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1833</guid>
		<description><![CDATA[Сегодня, мы рассмотрим, как можно сделать прелоадер. Прелоадер будет появляться, при отправке данных из формы. Для работы нам понадобятся: jQuery и собственно, сама картинка прелоадера. Картинку можно взять осюда &#8211; http://preloaders.net/. Мне понравилась вот такая: Ок, картинку выбрали и даже не забыли, что нужно будет подключить jQuery. Теперь, можно приступать к созданию формы и кода, [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://2coders.ru/wp-content/uploads/2010/09/preloader.gif" rel="lightbox[pics1833]" title="preloader-pic"><img src="http://2coders.ru/wp-content/uploads/2010/09/preloader.gif" alt="preloader-pic" width="149" height="129" class="attachment wp-att-1862 alignleft" /></a>Сегодня, мы рассмотрим, как можно сделать <strong>прелоадер</strong>. Прелоадер будет появляться, при отправке данных из формы. Для работы нам понадобятся: <strong>jQuery</strong> и собственно, сама <strong>картинка прелоадера</strong>. Картинку можно взять осюда &#8211; <a href="http://preloaders.net/" rel="nofollow">http://preloaders.net/</a>.<br />
<span id="more-1833"></span><br />
<br />
Мне понравилась вот такая:  </p>
<p><img src="http://2coders.ru/wp-content/uploads/2010/09/jquery-preloader1.gif" alt="jquery preloader" width="32" height="32" class="attachment wp-att-1837 " /><br />
Ок, картинку выбрали и даже не забыли, что нужно будет подключить jQuery. Теперь, можно приступать к созданию формы и кода, отвечающего за работу прелоадера. Форма будет простая, с 3 полями: Имя, Почта и Комментарии. Данные из формы будут передаваться в файл <strong>ajax.php</strong>.</p>
<p>Создаем файл <strong>index.php</strong>, с таким содержанием:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;http://code.jquery.com/jquery-latest.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#submit'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">//Добавляем нашу картинку в &lt;div  id=&quot;container&quot;&gt;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#container'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;img src=&quot;jquery-preloader.gif&quot; alt=Загрузка...&quot; id=&quot;loading&quot; /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">name</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#name'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> email <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#email'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> comments <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#comments'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                        <span style="color: #006600; font-style: italic;">//Передаем данные в файл ajax.php</span>
			$.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				url<span style="color: #339933;">:</span> <span style="color: #3366CC;">'ajax.php'</span><span style="color: #339933;">,</span>
				type<span style="color: #339933;">:</span> <span style="color: #3366CC;">'POST'</span><span style="color: #339933;">,</span>
				data<span style="color: #339933;">:</span> <span style="color: #3366CC;">'name='</span> <span style="color: #339933;">+</span> <span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;email='</span> <span style="color: #339933;">+</span> email <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;comments='</span> <span style="color: #339933;">+</span> comments<span style="color: #339933;">,</span>
&nbsp;
				success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>result<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#response'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#container'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;p id=&quot;response&quot;&gt;'</span> <span style="color: #339933;">+</span> result <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/p&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#loading'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">500</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>style<span style="color: #339933;">&gt;</span>
label <span style="color: #009900;">&#123;</span>
display<span style="color: #339933;">:</span> block<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>style<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>form action<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;&quot;</span> method<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;post&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;container&quot;</span><span style="color: #339933;">&gt;</span>
        <span style="color: #339933;">&lt;</span>label <span style="color: #000066; font-weight: bold;">for</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;name&quot;</span><span style="color: #339933;">&gt;</span>Имя<span style="color: #339933;">&lt;/</span>label<span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;name&quot;</span> id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;name&quot;</span> <span style="color: #339933;">/&gt;</span>
&nbsp;
		<span style="color: #339933;">&lt;</span>label <span style="color: #000066; font-weight: bold;">for</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;email&quot;</span><span style="color: #339933;">&gt;</span>Почта<span style="color: #339933;">&lt;/</span>label<span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;email&quot;</span> id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;email&quot;</span> <span style="color: #339933;">/&gt;</span>
&nbsp;
		<span style="color: #339933;">&lt;</span>label <span style="color: #000066; font-weight: bold;">for</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;comments&quot;</span><span style="color: #339933;">&gt;</span>Комментарии<span style="color: #339933;">&lt;/</span>label<span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span>textarea rows<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;5&quot;</span> cols<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;30&quot;</span> <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;comments&quot;</span> id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;comments&quot;</span><span style="color: #339933;">&gt;&lt;/</span>textarea<span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span>br <span style="color: #339933;">/&gt;</span>
		<span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;submit&quot;</span> <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;submit&quot;</span> id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;submit&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;Отправить&quot;</span> <span style="color: #339933;">/&gt;</span>
&nbsp;
	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>form<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Давайте разберем более подробно некоторые моменты, относительно работы скрипта. После нажатия кнопки, мы добавляем нашу картинку в див с id=&raquo;container&raquo;. После этого передаем данные в файл ajax.php.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				url<span style="color: #339933;">:</span> <span style="color: #3366CC;">'ajax.php'</span><span style="color: #339933;">,</span>
				type<span style="color: #339933;">:</span> <span style="color: #3366CC;">'POST'</span><span style="color: #339933;">,</span>
				data<span style="color: #339933;">:</span> <span style="color: #3366CC;">'name='</span> <span style="color: #339933;">+</span> <span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;email='</span> <span style="color: #339933;">+</span> email <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;comments='</span> <span style="color: #339933;">+</span> comments<span style="color: #339933;">,</span>
&nbsp;
				success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>result<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#response'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#container'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;p id=&quot;response&quot;&gt;'</span> <span style="color: #339933;">+</span> result <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/p&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#loading'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">500</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Ответ, из скрипта <strong>ajax.php</strong>, возвращается в параграф p c id=&raquo;response&raquo;. После того, как получили данные, применяем к нашей картинке прелоадеру эффект fadeOut и удаляем её.</p>
<p>Создадим файл принимающий данные из формы. Содержимое файла <strong>ajax.php</strong> будет следующим:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #666666; font-style: italic;">//Добавляем/извлекаем данные из БД</span>
<span style="color: #666666; font-style: italic;">//Выводим сообщение о том, что комментарий добавлен</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Комментарий добавлен&quot;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>Думаю, с последним скриптом у вас не должно возникнуть осложнений. Скачать готовую версию можно <a href='http://2coders.ru/wp-content/uploads/2010/09/preaploader.zip'>здесь</a>.</p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/FzBGKTqxG9o" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/jquery-preloader/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://2coders.ru/jquery-preloader/</feedburner:origLink></item>
		<item>
		<title>Прокачиваем таблицы с помощью CSS3</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/Aq5E9Rk-sHA/</link>
		<comments>http://2coders.ru/prokachivaem-tablicy-s-pomoshhyu-css3/#comments</comments>
		<pubDate>Thu, 05 Aug 2010 07:57:17 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[Верстка]]></category>
		<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1776</guid>
		<description><![CDATA[Сегодня, мы познакомимся с некоторыми возможностями CSS3, а также изменим до неузнаваемости скучные и надоедливые таблицы. Всего, для таблиц будет создано 3 стиля: table1, table2 и table3. Посмотреть, как выглядят таблицы в готовом виде можно здесь, а скачать тут. Для начала нужно составить таблицу. В качестве данных возьмем тарифы одного из хостеров. 1 2 3 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://2coders.ru/wp-content/uploads/2010/08/tables2.gif" rel="lightbox[pics1776]" title="tables"><img src="http://2coders.ru/wp-content/uploads/2010/08/tables2.gif" alt="tables" width="558" height="429" class="attachment wp-att-1815 " /></a><br />
Сегодня, мы познакомимся с некоторыми возможностями <strong>CSS3</strong>, а также изменим до неузнаваемости скучные и надоедливые таблицы. Всего, для таблиц будет создано 3 стиля: table1, table2 и table3. Посмотреть, как выглядят таблицы в готовом виде можно <a href="http://2coders.ru/demo/tables/">здесь</a>, а скачать <a href="http://2coders.ru/demo/tables/tables.zip">тут</a>.<br />
<span id="more-1776"></span><br />
Для начала нужно составить таблицу. В качестве данных возьмем тарифы одного из хостеров.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;table1&quot;</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">thead</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;col&quot;</span> <span style="color: #000066;">abbr</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Starter&quot;</span>&gt;</span>Lite<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;col&quot;</span> <span style="color: #000066;">abbr</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Medium&quot;</span>&gt;</span>Office<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;col&quot;</span> <span style="color: #000066;">abbr</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Business&quot;</span>&gt;</span>Master<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;col&quot;</span> <span style="color: #000066;">abbr</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Deluxe&quot;</span>&gt;</span>Profy<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">thead</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tfoot</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span>Цена в месяц<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ 2.00<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ 3.50<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ 6.20<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ 10.00<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tfoot</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tbody</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span>Место на диске<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>512 MB<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>1 GB<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>2 GB<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>4 GB<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span>Трафик<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>50 GB<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>100 GB<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>150 GB<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span>MySQL БД<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span>FTP аккаунты<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>Без ограничений<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span>PHP 5<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span> <span style="color: #000066;">scope</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span>POP3 server<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tbody</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span></pre></td></tr></table></div>

<p>Таблица будет оставаться практически без изменений, меняться будет только класс (table1, table 2 и table 3) определяющий стиль элементов.</p>
<p><strong>CSS стиль № 1</strong><br />
<a href="http://2coders.ru/wp-content/uploads/2010/08/table1-css3.gif" rel="lightbox[pics1776]" title="table css3"><img src="http://2coders.ru/wp-content/uploads/2010/08/table1-css3.gif" alt="table css3" width="598" height="390" class="attachment wp-att-1802 " /></a><br />
Давайте начнем с основного стиля таблицы:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="css" style="font-family:monospace;">table.table1<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;Trebuchet MS&quot;</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">16px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1.4em</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span><span style="color: #993333;">separate</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Мы задали шрифт и сделали пространство между ячейками, с помощью border-collapse:separate.</p>
<p>Для элементов в заголовке будет установлен следующий стиль:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table1</span> thead th<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#568F23</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#93CE37</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#9ED929</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#9DD929</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #3333ff;">:-webkit-</span>gradient<span style="color: #00AA00;">&#40;</span>
        linear<span style="color: #00AA00;">,</span>
        <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span>
        <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span>
        color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0.02</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">123</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">192</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">67</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
        color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0.51</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">139</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">66</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
        color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0.87</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">158</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">217</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span>
        <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">&#40;</span>
        <span style="color: #993333;">center</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span>
        <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">123</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">192</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">67</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">2%</span><span style="color: #00AA00;">,</span>
        <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">139</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">66</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">51%</span><span style="color: #00AA00;">,</span>
        <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">158</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">217</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">87%</span>
        <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    -webkit-border-top-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    -webkit-border-top-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span> <span style="color: #933;">5px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
    border-top-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    border-top-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Мы создаем градиент и закругляем углы у ячеек. Как вы наверное заметили, первая ячейка таблицы пустая. Как это сделать? Да очень просто, зададим стиль для первой ячейки (th):</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table1</span> thead th<span style="color: #3333ff;">:empty</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Применим для футера таблицы следующий стиль:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table1</span> tfoot td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#9CD009</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">32px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table1</span> tfoot th<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Ничего особенного здесь нет, мы просто создали тень для текста.<br />
Во внутренних ячейках таблицы будет светло-зеленый фон и текст белого цвета.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table1</span> tbody td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#DEF3CA</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#E7EFE0</span><span style="color: #00AA00;">;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>
    -webkit-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>
    border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Так же, для каждого из тарифов, нам нужно добавить изображение галочки, напротив <strong>PHP 5</strong> и <strong>POP3 server</strong>.<br />
Галочка располагается в элементе span с классом &laquo;check&raquo;.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table1</span> tbody span<span style="color: #6666ff;">.check</span><span style="color: #00AA00;">:</span><span style="color: #3333ff;">:before</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">content</span> <span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>../images/check0.png<span style="color: #00AA00;">&#41;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>С первым стилем для нашей таблицы мы разобрались, теперь можно приступать к стилю под номером 2.</p>
<p><strong>CSS стиль № 2</strong><br />
<a href="http://2coders.ru/wp-content/uploads/2010/08/table2-css3.gif" rel="lightbox[pics1776]" title="css3 tables"><img src="http://2coders.ru/wp-content/uploads/2010/08/table2-css3.gif" alt="css3 tables" width="598" height="458" class="attachment wp-att-1804 " /></a><br />
Вторая таблица будет выглять более элегантно, по сравнению с первой. Зададим для нее основной стиль:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="css" style="font-family:monospace;">table.table2<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;Trebuchet MS&quot;</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">18px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">letter-spacing</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-1px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1.2em</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span><span style="color: #993333;">collapse</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Футер и хедер таблицы будут в одном стиле, по этому зададим для них такой стиль:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> thead th<span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.table2</span> tfoot td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span> <span style="color: #933;">10px</span> <span style="color: #933;">40px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">26px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#222</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">dotted</span> <span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span>
    -moz-box-shadow<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">-1px</span> <span style="color: #933;">4px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
    -webkit-box-shadow<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">-1px</span> <span style="color: #933;">4px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
    box-shadow<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">-1px</span> <span style="color: #933;">4px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Для th в футере зададим следующий стиль:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> tfoot th<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">18px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-transform</span><span style="color: #00AA00;">:</span><span style="color: #993333;">uppercase</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#888</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Теперь зададим стиль, для ячеек в нижней части таблицы.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> tfoot td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">36px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#EF870E</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-top</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span>
    -moz-box-shadow<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">1px</span> <span style="color: #933;">4px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
    -webkit-box-shadow<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">1px</span> <span style="color: #933;">4px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
    box-shadow<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">1px</span> <span style="color: #933;">4px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Так же, как и в первом стиле, нам нужно сделать пустой первую ячейку.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> thead th<span style="color: #3333ff;">:empty</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
    -moz-box-shadow<span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
    -webkit-box-shadow<span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
    box-shadow<span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>С помощью селектора :nth-last-child выбираем последнюю ячейку в заголовке таблицы и удаляем границу справа.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> thead <span style="color: #3333ff;">:nth-last-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Так же удаляем границы у первой ячейки в заголовке и последней ячейки в теле таблицы.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> thead <span style="color: #3333ff;">:first-child</span><span style="color: #00AA00;">,</span>
<span style="color: #6666ff;">.table2</span> tbody <span style="color: #3333ff;">:nth-last-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Зададим стиль, для описаний расположенных в левой части таблицы:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> tbody th<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f9f9f9</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Следующий стиль будет задан, для остальных ячеек:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> tbody td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f0f0f0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">dotted</span> <span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">-1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-transform</span><span style="color: #00AA00;">:</span><span style="color: #993333;">uppercase</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Теперь нам только осталось добавить галочку:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table2</span> tbody span<span style="color: #6666ff;">.check</span><span style="color: #00AA00;">:</span><span style="color: #3333ff;">:before</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">content</span> <span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>../images/check1.png<span style="color: #00AA00;">&#41;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p><strong>CSS стиль № 3</strong><br />
<a href="http://2coders.ru/wp-content/uploads/2010/08/table31-css3.gif" rel="lightbox[pics1776]" title="css3 tables"><img src="http://2coders.ru/wp-content/uploads/2010/08/table31-css3.gif" alt="css3 tables" width="598" height="434" class="attachment wp-att-1808 " /></a><br />
Третья таблица будет сложнее предыдущих. Чем дороже тариф, тем темнее цвет ячейки.<br />
Основной стиль:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="css" style="font-family:monospace;">table.table3<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span>Arial<span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">18px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-transform</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">uppercase</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">letter-spacing</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-1px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1.7em</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span><span style="color: #993333;">collapse</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Стиль для ячеек, в заголовке будет таким:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> thead th<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">6px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-transform</span><span style="color: #00AA00;">:</span><span style="color: #993333;">uppercase</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Стиль для пустых ячеек:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> thead th<span style="color: #3333ff;">:empty</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Теперь нам нужно задать цвет для ячеек в хедере и футере таблицы:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> thead <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">2</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
<span style="color: #6666ff;">.table3</span> tfoot <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">2</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#7FD2FF</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> tfoot <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">2</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    -webkit-border-bottom-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    border-bottom-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> thead <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">2</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
    -webkit-border-top-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    border-top-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> thead <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
<span style="color: #6666ff;">.table3</span> tfoot <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#45A8DF</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> thead <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">4</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
<span style="color: #6666ff;">.table3</span> tfoot <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">4</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#2388BF</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> thead <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">5</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
<span style="color: #6666ff;">.table3</span> tfoot <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">5</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#096A9F</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> thead <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">5</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">5px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
    -webkit-border-top-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    border-top-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> tfoot <span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">5</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">5px</span> <span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
    -webkit-border-bottom-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    border-bottom-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Общий стиль для всех td ячеек в футере будет таким:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> tfoot td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">38px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">15px</span> <span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Зададим немного отступов:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> tbody td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Стиль для ячеек в которых указывается цена:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> tbody tr<span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">4</span><span style="color: #00AA00;">&#41;</span> td<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">18px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Зададим стиль для ячеек в теле таблицы:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> tbody td<span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span>even<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #3333ff;">:-webkit-</span>gradient<span style="color: #00AA00;">&#40;</span>
        linear<span style="color: #00AA00;">,</span>
        <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span>
        <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span>
        color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0.39</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">189</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">189</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">189</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
        color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0.7</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">224</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">224</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">224</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span>
        <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #3333ff;">:-moz-linear-</span>gradient<span style="color: #00AA00;">&#40;</span>
        <span style="color: #993333;">center</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span>
        <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">189</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">189</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">189</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">39%</span><span style="color: #00AA00;">,</span>
        <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">224</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">224</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">224</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">70%</span>
        <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.table3</span> tbody td<span style="color: #3333ff;">:nth-</span>child<span style="color: #00AA00;">&#40;</span>odd<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#555</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f0f0f0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #3333ff;">:-webkit-</span>gradient<span style="color: #00AA00;">&#40;</span>
        linear<span style="color: #00AA00;">,</span>
        <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span>
        <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span>
        color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0.39</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">85</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">85</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">85</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span>
        color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0.7</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">105</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">105</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">105</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span>
        <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #3333ff;">:-moz-linear-</span>gradient<span style="color: #00AA00;">&#40;</span>
        <span style="color: #993333;">center</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span>
        <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">85</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">85</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">85</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">39%</span><span style="color: #00AA00;">,</span>
        <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">105</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">105</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">105</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">70%</span>
        <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Так же зададим границу для последних ячеек:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> tbody td<span style="color: #3333ff;">:nth-last-</span>child<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#222</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Описание слева, будет с таким стилем:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> tbody th<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#696969</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#aaa</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Не забываем про нашу галочку:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.table3</span> tbody span<span style="color: #6666ff;">.check</span><span style="color: #00AA00;">:</span><span style="color: #3333ff;">:before</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">content</span> <span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>../images/check2.png<span style="color: #00AA00;">&#41;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Так же советую вам ознакомиться, с приведенными ниже ссылками:</p>
<p>Градиенты в CSS3        &#8211; <a href="http://gradients.glrzad.com/">http://gradients.glrzad.com/</a><br />
W3C Selectors Level 3   &#8211; <a href="http://www.w3.org/TR/css3-selectors/">http://www.w3.org/TR/css3-selectors/</a></p>
<p>Напомню, что <strong>демо</strong> можно псомотреть <a href="http://2coders.ru/demo/tables/">здесь</a>, а скачать <a href="http://2coders.ru/demo/tables/tables.zip">тут</a>.</p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/Aq5E9Rk-sHA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/prokachivaem-tablicy-s-pomoshhyu-css3/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://2coders.ru/prokachivaem-tablicy-s-pomoshhyu-css3/</feedburner:origLink></item>
		<item>
		<title>Работа с cookies в jQuery и JavaScript</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/6baXAN3r_Ng/</link>
		<comments>http://2coders.ru/rabota-s-cookies-v-jquery-i-javascript/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 10:08:07 +0000</pubDate>
		<dc:creator>Max</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1688</guid>
		<description><![CDATA[Я не буду вдаваться в подробности, что из себя представляют cookies. Подробнее об этом вы сможете прочитать в википедии. Перейдем сразу к делу. Для начала, рассмотрим работу с cookies в JavaScript. Для этого напишем 3 простые функции: установки, получения и удаления cookies. Установка cookies В функцию установки cookies будут передаваться следующие параметры: name &#8211; имя [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://2coders.ru/wp-content/uploads/2010/07/jquery-cookies.gif" rel="lightbox[pics1688]" title="jquery-cookies"><img src="http://2coders.ru/wp-content/uploads/2010/07/jquery-cookies.gif" alt="jquery-cookies" width="200" height="133" class="attachment wp-att-1738 alignleft" /></a>Я не буду вдаваться в подробности, что из себя представляют cookies. Подробнее об этом вы сможете прочитать  в <a rel='nofollow' href="http://www.google.ru/url?sa=t&#038;source=web&#038;cd=1&#038;ved=0CBwQFjAA&#038;url=http%3A%2F%2Fru.wikipedia.org%2Fwiki%2FHTTP_cookie&#038;ei=JXRFTLncEZOMOPn3kaUE&#038;usg=AFQjCNGD3t6AYixn6Dk3IySL6XBje7cjFA&#038;sig2=dXKwbxVYTAN5p9TBg-IuHA">википедии</a>. Перейдем сразу к делу. Для начала, рассмотрим работу с <strong>cookies в JavaScript</strong>. Для этого напишем 3 простые функции: установки, получения и удаления cookies.</p>
<p><span id="more-1688"></span><br />
<strong>Установка cookies</strong></p>
<p>В функцию установки cookies будут передаваться следующие параметры:</p>
<p><strong>name</strong>  &#8211; имя куки (обязательный параметр).</p>
<p><strong>value</strong> &#8211; значение куки (необязательный параметр).</p>
<p><strong>expires</strong> &#8211; дата, когда истекает срок действия куки (необязательный параметр). </p>
<p><strong>path</strong> &#8211; устанавливает путь до куки (необязательный параметр).</p>
<p><strong>domain</strong> &#8211; домен (необязательный параметр).</p>
<p><strong>secure</strong> &#8211; указывает на то, что браузер должен использовать SSL, когда отсылает cookies серверу (необязательный параметр).</p>
<p>Обязательно нужно передать <strong>name</strong>, остальные параметры можно не трогать.</p>
<p>Функция установки cookies:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> set_cookie <span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> value<span style="color: #339933;">,</span> expires_year<span style="color: #339933;">,</span> expires_month<span style="color: #339933;">,</span> expires_day<span style="color: #339933;">,</span> path<span style="color: #339933;">,</span> domain<span style="color: #339933;">,</span> secure<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> cookie_string <span style="color: #339933;">=</span> <span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;=&quot;</span> <span style="color: #339933;">+</span> escape<span style="color: #009900;">&#40;</span>value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>expires_year<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> expires <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date <span style="color: #009900;">&#40;</span>expires_year<span style="color: #339933;">,</span> expires_month<span style="color: #339933;">,</span> expires_day<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; expires=&quot;</span> <span style="color: #339933;">+</span> expires.<span style="color: #660066;">toGMTString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>path<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; path=&quot;</span> <span style="color: #339933;">+</span> escape<span style="color: #009900;">&#40;</span>path<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>domain<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; domain=&quot;</span> <span style="color: #339933;">+</span> escape<span style="color: #009900;">&#40;</span>domain<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>secure<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; secure&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> cookie_string<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><strong>Получение cookies</strong></p>
<p>Для получения куки необходимо знать ее имя, заранее установленное с помощью функции set_cookie().</p>
<p>Функция получения cookies:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> get_cookie <span style="color: #009900;">&#40;</span>cookie_name<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">else</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Не удалось получить cookies&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><strong>Удаления cookies</strong></p>
<p>Для удаления cookies, устанавливаем срок действия куки на 1 секунду назад, от текущего времени.</p>
<p>Функция удаления cookies:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> delete_cookie <span style="color: #009900;">&#40;</span>cookie_name<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> cookie_date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	cookie_date.<span style="color: #660066;">setTime</span> <span style="color: #009900;">&#40;</span>cookie_date.<span style="color: #660066;">getTime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> cookie_name <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;=; expires=&quot;</span> <span style="color: #339933;">+</span> cookie_date.<span style="color: #660066;">toGMTString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Ниже приведен полный код примера.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>html<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>head<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>title<span style="color: #339933;">&gt;</span>2Coders.<span style="color: #660066;">ru</span><span style="color: #339933;">&lt;/</span>title<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>head<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>body<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script language<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;JavaScript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">function</span> set_cookie <span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> value<span style="color: #339933;">,</span> expires_year<span style="color: #339933;">,</span> expires_month<span style="color: #339933;">,</span> expires_day<span style="color: #339933;">,</span> path<span style="color: #339933;">,</span> domain<span style="color: #339933;">,</span> secure<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> cookie_string <span style="color: #339933;">=</span> <span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;=&quot;</span> <span style="color: #339933;">+</span> escape <span style="color: #009900;">&#40;</span>value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>expires_year<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> expires <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date <span style="color: #009900;">&#40;</span>expires_year<span style="color: #339933;">,</span> expires_month<span style="color: #339933;">,</span> expires_day<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; expires=&quot;</span> <span style="color: #339933;">+</span> expires.<span style="color: #660066;">toGMTString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>path<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; path=&quot;</span> <span style="color: #339933;">+</span> escape<span style="color: #009900;">&#40;</span>path<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>domain<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; domain=&quot;</span> <span style="color: #339933;">+</span> escape<span style="color: #009900;">&#40;</span>domain<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>secure<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		cookie_string <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;; secure&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> cookie_string<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> delete_cookie <span style="color: #009900;">&#40;</span>cookie_name<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> cookie_date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	cookie_date.<span style="color: #660066;">setTime</span> <span style="color: #009900;">&#40;</span>cookie_date.<span style="color: #660066;">getTime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> cookie_name <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;=; expires=&quot;</span> <span style="color: #339933;">+</span> cookie_date.<span style="color: #660066;">toGMTString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> get_cookie <span style="color: #009900;">&#40;</span>cookie_name<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">else</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Не удалось получить cookies&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript:set_cookie('2coders', 1)&quot;</span><span style="color: #339933;">&gt;</span>Set Cookie<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript:get_cookie('2coders')&quot;</span><span style="color: #339933;">&gt;</span>Get Cookie<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript:delete_cookie('2coders')&quot;</span><span style="color: #339933;">&gt;</span>Delete Cookie<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>body<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>html<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Выше, мы рассмотрели работу с<strong> кукис в javascript</strong>, теперь давайте посмотрим, как это реализовано в jQuery. В jQuery нет встроенных методов для работы с cookies, поэтому приходится использовать сторонний <a href="http://plugins.jquery.com/project/cookie">плагин</a>. Я покажу лишь некоторые функции данного плагина, а именно: установка, получение и удаление <strong>cookies</strong>.  Подробнее с возможностями плагина, можно ознакомиться на <a href="http://stilbuero.de/jquery/cookie/">сайте</a> автора.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;http://code.jquery.com/jquery-latest.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;jquery.cookie.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> COOKIE_NAME <span style="color: #339933;">=</span> <span style="color: #3366CC;">'test_cookie'</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span> path<span style="color: #339933;">:</span> <span style="color: #3366CC;">'/'</span><span style="color: #339933;">,</span> expires<span style="color: #339933;">:</span> <span style="color: #CC0000;">10</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// установить cookie</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#setCookies'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#40;</span>COOKIE_NAME<span style="color: #339933;">,</span> <span style="color: #3366CC;">'2coders.ru'</span><span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
         <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// получить cookie</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#getCookies'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#40;</span>COOKIE_NAME<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
         <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// удалить cookie</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#delCookies'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            $.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#40;</span>COOKIE_NAME<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;#&quot;</span> id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;setCookies&quot;</span><span style="color: #339933;">&gt;</span>Установить Cookie<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;#&quot;</span> id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;getCookies&quot;</span><span style="color: #339933;">&gt;</span>Получить Cookie<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;#&quot;</span> id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;delCookies&quot;</span><span style="color: #339933;">&gt;</span>Удалить Cookie<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Будьте внимательны при установке cookies, у пользователя может быть отключен javascript  в браузере, в таком случае ваши <strong>cookies</strong> не установятся.</p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/6baXAN3r_Ng" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/rabota-s-cookies-v-jquery-i-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://2coders.ru/rabota-s-cookies-v-jquery-i-javascript/</feedburner:origLink></item>
		<item>
		<title>Лучшие сайты недели 4</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/kdIplUtI-cg/</link>
		<comments>http://2coders.ru/luchshie-sajty-nedeli-4/#comments</comments>
		<pubDate>Fri, 18 Jun 2010 13:49:23 +0000</pubDate>
		<dc:creator>d4rkr00t</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Обзоры]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1700</guid>
		<description><![CDATA[Здравствуйте! Дорогие читатели. Представляем вашему вниманию очередную подборку лучших сайтов недели. Jameslaicreative.com Zacharypulman.com Virtualskystudio.com Mint.com Bythreads.com Shoeguru.ca Paul-rand.com]]></description>
			<content:encoded><![CDATA[<p>Здравствуйте! Дорогие читатели. Представляем вашему вниманию очередную подборку лучших сайтов недели.</p>
<p><strong>Jameslaicreative.com</strong></p>
<p style="text-align: center;"><a rel='nofollow' title="www.jameslaicreative.com" href="http://www.jameslaicreative.com/"><img class="attachment wp-att-1701 centered" src="http://2coders.ru/wp-content/uploads/2010/06/www.jameslaicreative.com_.png" alt="www.jameslaicreative.com" width="598" height="469" /></a></p>
<p><span id="more-1700"></span></p>
<p><strong>Zacharypulman.com</strong></p>
<p style="text-align: center;"><a rel='nofollow' title="zacharypulman.com" href="http://zacharypulman.com"><img class="attachment wp-att-1704 centered" src="http://2coders.ru/wp-content/uploads/2010/06/zacharypulman.com_.png" alt="zacharypulman.com" width="600" height="761" /></a></p>
<p><strong>Virtualskystudio.com</strong></p>
<p style="text-align: center;"><a rel='nofollow' title="virtualskystudio.com" href="http://virtualskystudio.com/"><img class="attachment wp-att-1706 centered" src="http://2coders.ru/wp-content/uploads/2010/06/virtualskystudio.com_.png" alt="virtualskystudio.com" width="600" height="866" /></a></p>
<p><strong>Mint.com</strong></p>
<p style="text-align: center;"><a rel='nofollow' title="www.mint.com" href="http://www.mint.com"><img class="attachment wp-att-1707 centered" src="http://2coders.ru/wp-content/uploads/2010/06/www.mint_.com_.png" alt="www.mint.com" width="600" height="747" /></a></p>
<p><strong>Bythreads.com</strong></p>
<p style="text-align: center;"><a rel='nofollow' title="bythreads.com" href="http://www.bythreads.com/"><img class="attachment wp-att-1709 centered" src="http://2coders.ru/wp-content/uploads/2010/06/bythreads.com_.png" alt="bythreads.com" width="600" height="475" /></a></p>
<p><strong>Shoeguru.ca</strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong></p>
<p style="text-align: center;"><a rel='nofollow' title="shoeguru.ca" href="http://shoeguru.ca/"><img class="attachment wp-att-1710 centered" src="http://2coders.ru/wp-content/uploads/2010/06/shoeguru.ca_.png" alt="shoeguru.ca" width="600" height="445" /></a></p>
<p></strong></p>
<p><strong>Paul-rand.com</strong></p>
<p><strong><span style="font-weight: normal;"> </span></strong></p>
<p><strong></p>
<p style="text-align: center;"><a rel='nofollow' title="paul-rand.com" href="http://www.paul-rand.com/"><img class="attachment wp-att-1711 centered" src="http://2coders.ru/wp-content/uploads/2010/06/paul-rand.com_.png" alt="paul-rand.com" width="600" height="411" /></a></p>
<p></strong></p>
<p><strong><br />
</strong></p>
<p><strong><br />
</strong></p>
<img src="http://feeds.feedburner.com/~r/2coders/~4/kdIplUtI-cg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/luchshie-sajty-nedeli-4/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://2coders.ru/luchshie-sajty-nedeli-4/</feedburner:origLink></item>
		<item>
		<title>Лучшие сайты недели 3</title>
		<link>http://feedproxy.google.com/~r/2coders/~3/PL-3hbBZvuA/</link>
		<comments>http://2coders.ru/luchshie-sajty-nedeli-3/#comments</comments>
		<pubDate>Thu, 13 May 2010 08:36:23 +0000</pubDate>
		<dc:creator>d4rkr00t</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[Обзоры]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Вдохновение]]></category>
		<category><![CDATA[Лучшие сайты недели]]></category>

		<guid isPermaLink="false">http://2coders.ru/?p=1668</guid>
		<description><![CDATA[С небольшой задержкой(праздники ) выпускаем очередную подборку &#171;Лучших сайтов недели&#187;. www.emotionslive.co.uk wwwinabox.com mattdempsey.com divvoted.com thigpendesigns.com level2d.com visitcascadia.com Ждите следующего выпуска&#8230;]]></description>
			<content:encoded><![CDATA[<p>С небольшой задержкой(праздники <img src='http://2coders.ru/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ) выпускаем очередную подборку &laquo;Лучших сайтов недели&raquo;.</p>
<p><strong>www.emotionslive.co.uk</strong></p>
<p><a rel='nofollow' href="http://www.emotionslive.co.uk/" target="_blank"><img src="http://2coders.ru/wp-content/uploads/2010/05/www.emotionslive.co_.uk_.png" alt="www.emotionslive.co.uk" width="600" height="433" /></a></p>
<p><strong><span id="more-1668"></span><a rel='nofollow' href="http://www.wwwinabox.com/">wwwinabox.com</a></strong></p>
<p><a rel='nofollow'  title="wwwinabox" href="http://www.wwwinabox.com/"><img src="http://2coders.ru/wp-content/uploads/2010/05/wwwinabox.png" alt="wwwinabox" width="600" height="368" /></a></p>
<p><a  rel='nofollow'  href="http://www.mattdempsey.com/"><strong>mattdempsey.com</strong></a></p>
<p><strong><span style="font-weight: normal;"><a  rel='nofollow' title="doodle" href="http://www.mattdempsey.com/"><img class="attachment wp-att-1674 alignleft" src="http://2coders.ru/wp-content/uploads/2010/05/doodle.png" alt="doodle" width="600" height="373" /></a><br />
</span></strong></p>
<p><strong><br />
</strong></p>
<p><a  rel='nofollow' href="http://www.divvoted.com/"><strong>divvoted.com</strong></a></p>
<p><img src="http://2coders.ru/wp-content/uploads/2010/05/www.divvoted.png" alt="www.divvoted" width="600" height="396" /></p>
<p><a  rel='nofollow' href="http://www.thigpendesigns.com/"><strong>thigpendesigns.com</strong></a></p>
<p><img src="http://2coders.ru/wp-content/uploads/2010/05/www.thigpendesigns.com_.png" alt="www.thigpendesigns.com" width="600" height="440" /></p>
<p><strong><a href="http://www.level2d.com" target="_blank">level2d.com</a></strong></p>
<p><a rel='nofollow'  title="www.level2d.com" href="http://www.level2d.com"><img src="http://2coders.ru/wp-content/uploads/2010/05/www.level2d.com_.png" alt="www.level2d.com" width="600" height="363" /></a></p>
<p><a  rel='nofollow' href="http://www.visitcascadia.com/"><strong>visitcascadia.com</strong></a></p>
<p><strong><a title="visitcascadia.com" href="http://visitcascadia.com"></a><img src="http://2coders.ru/wp-content/uploads/2010/05/visitcascadia.com_.png" alt="visitcascadia.com" width="600" height="394" /></strong></p>
<p>Ждите следующего выпуска&#8230; <img src='http://2coders.ru/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p><strong><br />
</strong></p>
<p><strong><br />
</strong></p>
<p><strong><br />
</strong></p>
<div><strong><br />
</strong></div>
<div><strong><br />
</strong></div>
<div><strong><br />
</strong></div>
<div><strong><br />
</strong></div>
<img src="http://feeds.feedburner.com/~r/2coders/~4/PL-3hbBZvuA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://2coders.ru/luchshie-sajty-nedeli-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://2coders.ru/luchshie-sajty-nedeli-3/</feedburner:origLink></item>
	</channel>
</rss>

