Главная » Статьи » Программирование » Уроки HTML

Разбираемся с таблицами


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

Для того что-бы создать таблицу используются следующие теги :

<table> — создает таблицу

<tr> — создает строку

<td> — создает столбец





Атрибуты применяемые к таблицам
align определяет выравнивание в таблице
background задает фон таблицы
bgcolor Задает цвет таблицы
Border задает толщину границ таблицы
bordercolor задает цвет границ таблицы
cellpadding Отступ от рамки до содержимого ячейки.
cellspacing Расстояние между ячейками.
cols ЗАДАЕТ КОЛИЧЕСТВО СТОЛБЦОВ В ТАБЛИЦЕ, ПОМОГАЯ БРАУЗЕРУ В ПОДГОТОВКЕ К ЕЕ ОТОБРАЖЕНИЮ.
frame СООБЩАЕТ БРАУЗЕРУ, КАК ОТОБРАЖАТЬ ГРАНИЦЫ ВОКРУГ ТАБЛИЦЫ.
height ширина таблицы
width Высота таблицы
summary Атрибут summary предназначен для краткого описания таблицы или указания ее предназначения.никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами.
Давайте сделаем что-то похожее на лист бумаги с фоном новогодних игрушек.

для этого нам понадобиться текстура бумаги

Я скачал вот такую :

Затем в коде из прошлой статьи я создал таблицу ну и немного дописал письмо , оно казалось не завершенным.

Так же для наглядности использования таблиц разукрасил бумагу картинками.

Вот как теперь выглядит письмо :))

А вот так это выглядит изнутри :

<html>

<head> <title> Письмо Деду морозу ! </title></head>

<body link=»white» alink=»black» vlink=»red» background=»fon.jpg» bgproperties=»fixed» text=»brown» topmargin=»100px» rightmargin=»20%» leftmargin=»20%»>

<table cellpadding=»30px» width=»89%» height=»761PX» background=»texture.jpg»>
<tr>
<td><h2> <b>Дрогой дедушка мороз,я понимаю что иногда был плохим парнем. И делал не хорошие поступки , но ведь я сделал и не мало хороших. И я прошу обратить тебя на них внимание в этом году. Не стоит вычеркивать меня из списка , как ты сделал это в позапрошлом. Потому что , ты знаешь , это очень обидно. Спасибо тебе за подарок , который ты дал мне в прошлом. Вот уже год, как я бросил курить. Все таки , не зря я в прошлом году вел себя хорошо) В общем не буду отвлекать тебя своей болтовней , потому что знаю сколько забот у тебя. Сразу перейду к просьбе , подари мне в следующем году <a href=»https://www.youtube.com/watch?v=wrzB5xpguvI»> такую штуку </a>. <br>
<br>Я знаю ты делаешь чудеса, поэтому хотелось бы еще попросить у тебя здоровья моим близким. И пусть они в следующем году станут счастливее чем в этом. С наступающим тебя Новым Годом ! <br><br>
<!———————————>
<table align=»center»>
<tr>
<td><img width=»200px» src=»noski.png»></td>
<td><img src=»thank.gif»></td>
<td><img width=»200px» src=»noski2.png»></td>
</tr>
</table>
<!———————————>
</td>
</tr>
</table>
</h2>

</body>

Категория: Уроки HTML | Добавил: Nikitos (2017-11-05)
Просмотров: 150 | Теги: Таблица, урок, на сайте | Рейтинг: 0.0/0

Поддержите проэкт комментариями, покажите что мы не зря стараемся. Добавив нам мотивации писать больше и чаще. Мы тратим средства на содержание ресурса,но ничего с этого не имеем. У вас есть возможность поучаствовать в финансировании проэкта ;)

Имя *:
Email *:
Код *:
Всего комментариев: 0