Психология Интернет-Продаж - содержание

Часть №1

Часть №2

Часть №3

Часть №4

Часть №5

Часть №6

Часть №7

Microsoft Office Word

HTML с нуля

css с нуля

Статья 2. Как установить стили css для всех тегов параграфов <p>?Глобальное форматирование стилей css тегов параграфов <p>? Как установить стили css для тегов заголовков h? Как объединить стили параграфов <p> и заголовков <h2>?

Статья 1. Что такое каскадные таблицы стилей css? Как создать каскадную таблицу стилей css? Как подключить каскадную таблицу стилей css?

Статья 16. Что такое тег <div>? Как теги <div> используются для размещения текстов, изображений и ссылок на html странице? Тег <div> и стили css.

Статья 15. Что такое спецсимволы html? Как пишутся спецсимволы html?

Статья 14. Все об html таблицах. Что такое таблицы html, зачем они нужны, какие теги и атрибуты у таблиц html и многое другое

Каталог видео курсов

Заработок от uzeron.com

Каталог курсов

Дом знаний

Домашний доктор

Журналов в базе: 11
Статей в базе: 21
Комментариев в базе: 185

На сайте человек: 2



Статья 14. Все об html таблицах. Что такое таблицы html, зачем они нужны, какие теги и атрибуты у таблиц html и многое другое

Автор: Сергей Сукманюк

Дата создния: 2010-07-27

столбец 1
столбец 2
столбец 3
1.1
1.2
1.3
СТРОКА 1
2.1
2.2
2.3
СТРОКА 2

<table>
<tr></tr>
<tr></tr>
</table>

Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:

<table>
<tr>
<td></td> - ячейка 1.1
<td></td> - ячейка 1.2
<td></td> - ячейка 1.3
</tr>
<tr>
<td></td> - ячейка 2.1
<td></td> - ячейка 2.2
<td></td> - ячейка 2.3
</tr>
</table>

На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).

 

<table bgcolor="#FFFF00">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
1.1 1.2 1.3
2.1 2.2 2.3

Если нужно задать фоновый цвет ряду html таблицы, то тогда атрибут bgcolor="цвет_фона" применяем к тегу <tr>:

<table bgcolor="#FFFF00">
<tr bgcolor="#0000FF">
<td><font color="#FFFFFF">1.1</font></td>
<td><font color="#FFFFFF">1.2</font></td>
<td><font color="#FFFFFF">1.3</font></td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>

1.1 1.2 1.3
2.1 2.2 2.3

В этом случае, атрибут <font color="#FFFFFF">номер ячейки</font> задает белый цвет тексту, расположенному внутри тега.

 

<table bgcolor="#FFFF00">
<tr>
<td>1.1</td>
<td bgcolor="#0000FF"><font color="#FFFFFF">1.2</font></td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
1.1 1.2 1.3
2.1 2.2 2.3
<table>
<tr>
<td height="36" width="80" bgcolor="#FFFF00"> 1x1 </td>
<td width="80" bgcolor="#0000FF"><font color="#FFFFFF">1.2</font></td>
<td width="80" bgcolor="#FFFF00"> 1x3 </td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00"> 2x2 </td>
<td width="80" bgcolor="#0000FF"><font color="#FFFFFF">2.3</font></td>
</tr>
</table>
1x1 1.2 1x3
2.1 2x2 2.3
<table align="center">
<tr>
<td height="36" width="80" bgcolor="#FFFF00" align="left"> 1x1 </td>
<td width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">1.2</font></td>
<td width="80" bgcolor="#FFFF00" align="right"> 1x3 </td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF" align="left"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00" align="center"> 2x2 </td>
<td width="80" bgcolor="#0000FF" align="right"><font color="#FFFFFF">2.3</font></td>
</tr>
</table>
1x1 1.2 1x3
2.1 2x2 2.3

 

<table align="center">
<tr>
<td height="36" width="80" bgcolor="#FFFF00" align="center" valign="top"> 1x1 </td>
<td width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">1.2</font></td>
<td width="80" bgcolor="#FFFF00" align="center" valign="top"> 1x3 </td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF" align="center" valign="bottom"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00" align="center"> 2x2 </td>
<td width="80" bgcolor="#0000FF" align="center" valign="bottom"><font color="#FFFFFF">2.3</font></td>
</tr>
</table>
1x1 1.2 1x3
2.1 2x2 2.3

 

<table align="center">
<tr>
<td height="36" bgcolor="#FFFF00" align="center" colspan="2"> 1.1 </td>
<td width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">1.2</font></td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00" align="center"> 2.2 </td>
<td width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">1.3</font></td>
</tr>
</table>
1.1 1.2
2.1 2.2 1.3

Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.

С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».

А теперь, когда мы разобрались с параметром colspan, давайте разберемся с параметром rowspan. Принцип действия тут тот же:

<table align="center">
<tr>
<td height="36" bgcolor="#FFFF00" align="center" colspan="2"> 1.1 </td>
<td width="80" bgcolor="#0000FF" align="center" rowspan="2"> <font color="#FFFFFF">1.2</font></td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00" align="center"> 2.2 </td>
</tr>
</table>
1.1 1.2
2.1 2.2
 

<table align="center" border="1" bordercolor="#000000">
<tr>
<td height="36" bgcolor="#FFFF00" align="center" colspan="2"> 1.1 </td>
<td width="80" bgcolor="#0000FF" align="center" rowspan="2"><font color="#FFFFFF">1.2</font></td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00" align="center"> 2.2 </td>
</tr>
</table>
1.1 1.2
2.1 2.2
<table align="center" border="1" bordercolor="#000000" cellpadding="20" cellspacing="10">
<tr>
<td height="36" bgcolor="#FFFF00" align="center" colspan="2"> 1.1 </td>
<td width="80" bgcolor="#0000FF" align="center" rowspan="2"><font color="#FFFFFF">1.2</font></td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00" align="center"> 2.2 </td>
</tr>
</table>
1.1 1.2
2.1 2.2

<table align="center" border="1" bordercolor="#000000" cellpadding="0" cellspacing="10">
<tr>
<td height="36" bgcolor="#FFFF00" align="center" colspan="2"> 1.1 </td>
<td width="80" rowspan="2" align="center" valign="top" bgcolor="#0000FF">


<table width="100%" border="2" bordercolor="#FF0000" cellspacing="5" cellpadding="0">
<tr>
<td><font color="#FFFFFF">3.1</font></td>
<td><font color="#FFFFFF">3.2</font></td>
</tr>
</table>


</td>
</tr>
<tr>
<td height="36" width="80" bgcolor="#0000FF" align="center"><font color="#FFFFFF">2.1</font></td>
<td width="80" bgcolor="#FFFF00" align="center"> 2.2 </td>
</tr>
</table>

1.1
3.1 3.2
2.1 2.2

Просмотров: 50018



Оцените статью: 1 2 3 4 5 6 7 8 9 10

Коментарии к этой статье:

Комментарий добавил(а): Kores
Дата: 2010-11-29

Круто. Вот как оказывается сайты строятся, в таблицах.

Комментарий добавил(а): xMAJORx
Дата: 2011-01-30

Спасибо тебе все понятно и логично изложено

Комментарий добавил(а): Оля
Дата: 2012-10-02

Подскажите как мне разделить строку на две части, причем они должны быть разных размеров...и эта строка не должна выходить за границы таблицы общей, тоесть вся табличка у меня ровная, но как только разделяю строку, она выходит за пределы таблицы.

Комментарий добавил(а): Сергей
Дата: 2012-10-02

Оля, если честно, то мне не понятен Ваш вопрос. Какую строку Вы делите? В каких тегах Ваша строка? Лучше пришлите код таблицы...

Комментарий добавил(а): Аня
Дата: 2012-10-08

Спасибо, все очень понятно, но есть ли теги для установки цвета между ячейками?

Комментарий добавил(а): Андрей
Дата: 2015-05-20

здрасти опять же повторюсь написано хорошо благодарю за статью

Комментарий добавил(а): Иван
Дата: 2015-09-04

Агромнае спасиба за такой хароший статья, афтар пеши ищо!

Комментарий добавил(а): Swiss rolex watches
Дата: 2016-02-15

Our <a href="http://www.replicawatches4u.net/">Swiss rolex </a>are fitted with Deep-Sea Sealants and unique double core silicone ”O” Rings. These are made from neoprene silicon which is far more resistant to cracking, corrosion and aging that can be a problem with natural rubber. Most Grade One <a href="http://www.uponwatches.net/">Rolex replica watches</a> on the net are fitted with crude rubber sealants which generally offer poor water resistance. These also have to be regularly replaced to avoid moisture and dirt damaging the <a href="http://www.ps2tips.co.uk/">swiss replica watches </a>. Our <a href="http://www.copyluxury.net">swiss rolex watches</a>are professionally sealed to keep out day to day dirt and are pressure tested to 300 meters.

Комментарий добавил(а): Бод
Дата: 2016-05-03

Спасибо, круто. Свой сайт сначала блоками делал, а они съезжают при маленьком экране или окне, вот те блоки в таблицу засунул)

Комментарий добавил(а): юзер
Дата: 2016-12-02

вот пример простого сайта с таблицами

Комментарий добавил(а): Ирина
Дата: 2014-10-11

Здравствуйте. Большое спасибо за статью. Я пытаюсь сделать станицу в dreamwiever. Никак не могу убрать зазор между картинками и таблицей. Все делаю только в HTML. Перепробовала все что вы написали, но ничего не меняется. ПОЖАЛУЙСТА, ПОМОГИТЕ! Наверное, не женское это дело. Вот мой код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-image: url(img/170_097.jpg); } --> </style></head> <body> <div align="center"> <p><img src="img/1a.jpg" width="1000" height="362" alt="1" /></p> <table width="1000" height="1000" border="1" bgcolor="#FFFFFF"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> <p><img src="img/1b.jpg" alt="2" width="1000" height="192" /></p> </div> </body> </html>

Добавить коментарий:

Введите слово с картинки:

Бесплатная подписка на журнал "Психология Интернет-Продаж"!
Получи новые уроки и самые свежие новости интернет-бизнеса!
Более 40 000 подписчиков
Психология Интернет продаж - бесплатный интернет журнал от uzeron.com, автор - Сергей Сукманюк
Хочешь За Час Вывести
Сайт в Лидеры Запросов?
Пройди регистрацию и
Узнай Секреты Раскрутки.
Как быстро раскрутить сайт. Сергей Сукманюк

2011-05

2010-07

2010-02

2010-01

2009-12

2009-11

2009-10

Rambler's Top100