Шпаргалка по HTML тэгам (часть 5)

[arietty]

09.06.2014 в 17:05

Пишет  La mignonne:

Таблицы

Делаем таблицу из 4 столбиков:

Столбик 1 А В

Столбик 2 А В

Столбик 3 А В

Столбик 4 А В

<table border=1 cellpadding=8> <td> Столбик 1 А В</td><td> Столбик 2 А В</td><td> Столбик 3 А В</td><td> Столбик 4 А В</td></table>
border=1 — ширина рамки 1 пиксель
cellpadding=8 — расстояние между рамкой и текстом 8 пикселей
Размер таблицы автоматически подстраивается под текст

Чтоб записи в таблице были по центру используем:
align="center"

Столбик 1 А В

Столбик 2 А В

<table border=1 cellpadding=8> <td align="center"> Столбик 1 А В</td><td align="center"> Столбик 2 А В</td></table>

Пишем в ячейках:

Первая строка - первая ячейка	Первая строка - вторая ячейка
Вторая строка - первая ячейка	Вторая строка - вторая ячейка

Ставим ширину рамки 3 пикселя
<table border=3 cellpadding=8> <tr> <td>Первая строка - первая ячейка</td> <td>Первая строка - вторая ячейка</td> </tr> <tr> <td>Вторая строка - первая ячейка</td> <td>Вторая строка - вторая ячейка</td> </tr></table>

Делаем таблицу без рамки:

1	1	1	1	1
2	2	2	2	2
3	3	3	3	3

Убираем border=
<table cellpadding=4> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> </table>

Делаем цветную таблицу :

ячейка 1	ячейка 2	ячейка 3	ячейка 4
ячейка 5	ячейка 6	ячейка 7	ячейка 8

<table border=1 cellpadding=4 bgcolor="#b2a5e8"> <tr> <td>ячейка 1</td> <td>ячейка 2</td> <td>ячейка 3</td> <td>ячейка 4</td> </tr> <tr> <td>ячейка 5</td> <td>ячейка 6</td> <td>ячейка 7</td> <td>ячейка 8</td> </tr></table>

Делаем цветными отдельные ячейки:

ячейка 1	ячейка 2	ячейка 3	ячейка 4
ячейка 5	ячейка 6	ячейка 7	ячейка 8

<table cellpadding=4 border=1> <tr> <td bgcolor="#b2a5e8">ячейка 1</td> <td>ячейка 2</td> <td bgcolor="#b2a5e8">ячейка 3</td> <td>ячейка 4</td> </tr> <tr> <td>ячейка 5</td> <td bgcolor="#b2a5e8">ячейка 6</td> <td>ячейка 7</td> <td bgcolor="#b2a5e8">ячейка 8</td> </tr></table>

Соединяем ячейки:

Времена года
Лето	Осень	Зима	Весна

<table border=2 cellpadding=6 width=50%> <tr> <td colspan=4 align=center><b>Времена года</b></td> </tr> <tr> <td>Лето</td> <td>Осень</td> <td>Зима</td> <td>Весна</td> </tr> </table>
width=50% — ширина таблицы 50% от всей страницы
colspan=4 — надпись Времена года занимает 4 ячейки по горизонтали

или так:

Времена года	Лето	Весна
	Осень	Зима

<table border=2 cellpadding=6 width=30%> <tr> <td rowspan=2 align=center><b>Времена года</b></td> <td>Лето</td> <td>Весна</td> </tr> <tr> <td>Осень</td> <td>Зима</td> </tr> </table>
rowspan=2 — надпись Времена года занимает 2 ячейки по вертикали

Делаем таблицу обтекаемую текстом:

Столбик 1

Столбик 2

Столбик 3

Столбик 4

Карл у Клары украл кораллы,
Клара у Карла украла кларнет

<table border=1 cellpadding=8 style="float: left; margin:4px 20"> <td> Столбик 1 </td><td> Столбик 2 </td><td> Столбик 3 </td><td> Столбик 4 </td></table>
Добавляем: style="float: left; margin:4px 20"
float: left; — таблица слева; соответственно float: right; — таблица справа
margin:4px 20 — отступ по вертикале 4 пикселя, а по вертикале 20 пикселей

С помощью табличного кода пишем в 2 столбика:

В нашем классе все ребята Любят отличиться. Кто рисует, кто поет, Лишь бы не учиться.

Маленький мальчик по крыше шагал крыша закончилась, мальчик упал в воздухе сделал он три раза сальто долго его соскребали с асфальта.

<table width="60%" cellpadding="10"> <tr> <td> В нашем классе все ребята Любят отличиться. Кто рисует, кто поет, Лишь бы не учиться.</td> <td></td> <td> Маленький мальчик по крыше шагал крыша закончилась, мальчик упал в воздухе сделал он три раза сальто долго его соскребали с асфальта.</td> </tr> </table>

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

Щелкают по кнопкам дети, Что-то ищут в Интернете. Помнится, и мы искали Это в папином журнале.

Насмотрелся дед порнухи, Начал дед дурачиться, Деревенские бабульки По чуланам прячутся.

<table width="60%" cellpadding="0"> <tr> <td> Щелкают по кнопкам дети, Что-то ищут в Интернете. Помнится, и мы искали Это в папином журнале.</td> <td width="2" bgcolor="#000000"></td> <td><blockquote> Насмотрелся дед порнухи, Начал дед дурачиться, Деревенские бабульки По чуланам прячутся.</blockquote></td> </tr> </table>
width="2" — ширина полосочки
bgcolor="#000000" — цвет полосочки
Тэг: <blockquote> </blockquote> делает отступ в правой колоночке
Тэгом width="..." можно сделать фиксированную ширину любого столбика

Делаем галерею картинок

<table cellpadding=8> <tr> <td><img src=""></td> <td><img src=""></td> <td><img src=""></td> </tr> <tr> <td><img src=""></td> <td><img src=""></td> <td><img src=""></td> </tr> </table>

Делаем рамку для картинки:

<table border="20"> <tr><td><table border="12"> <tr><td><img src="http://s56.radikal.ru/i153/0906/cd/66a5ec635518.jpg"></td></tr></table> </td></tr> </table>