Таблица для прайс-листа

страница

<html>
<head>
<title>Прайс-лист</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Здесь будут таблицы
</body>
</html>


Пояснение

<html> начало html кода

<head> начало блока информации для браузеров

<title>страница</title> название страницы
<meta...> подробнее о мета тегах здесь

</head> конец блока информации для браузеров

<body> начало тела страницы
Здесь будут таблицы
</body> конец тела страницы

</html> конец html кода

Таблица с одной ячейкой

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="100%">Это ячейка</td>
</tr>
</table>


Результат

Это ячейка

Таблица с тремя ячейками

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="100%">Это ячейка № 1</td>
</tr>
<tr>
<td width="100%">Это ячейка № 2</td>
</tr>
<tr>
<td width="100%">Это ячейка № 3</td>
</tr>
</table>


Результат

Это ячейка № 1
Это ячейка № 2
Это ячейка № 3

Если между ячейками

между тегами <td> </td> не ставить теги <tr> </tr> ячейки будут располагаться горизонтально

Пример

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="33%">Это ячейка № 1</td>
<td width="33%">Это ячейка № 2</td>
<td width="34%">Это ячейка № 3</td>
</table>


Результат

Это ячейка № 1 Это ячейка № 2 Это ячейка № 3

Пример таблицы для прайс-листа

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="33%">Товар</td>
<td width="33%">Описание</td>
<td width="34%">Цена</td>
</tr>
<tr>
<td width="33%">Книга</td>
<td width="33%">Бумажная</td>
<td width="34%">100 руб</td>
</tr>
<tr>
<td width="33%">Творог</td>
<td width="33%">Вкусный</td>
<td width="34%">50 руб</td>
</tr>
</table>


Результат

Товар Описание Цена
Книга Бумажная 100 руб
Творог Вкусный 50 руб

Отступ

Чтобы текст не касался границ ячеек изменяйте значение параметра cellpadding

Пример

<table border="1" cellpadding="5" cellspacing="0" width="50%">
<tr>
<td width="33%">Товар</td>
<td width="33%">Описание</td>
<td width="34%">Цена</td>
</tr>
<tr>
<td width="33%">Книга</td>
<td width="33%">Бумажная</td>
<td width="34%">100 руб</td>
</tr>
<tr>
<td width="33%">Творог</td>
<td width="33%">Вкусный</td>
<td width="34%">50 руб</td>
</tr>
</table>


Результат

Товар Описание Цена
Книга Бумажная 100 руб
Творог Вкусный 50 руб

Тег <th>

Чтобы текст заголовков выделялся в таблице и был отцентрирован применяйте тег <th>

Пример

<table border="1" cellpadding="5" cellspacing="0" width="50%">
<tr>
<th width="33%">Товар</th>
<th width="33%">Описание</th>
<th width="34%">Цена</th>
</tr>
<tr>
<td width="33%">Книга</td>
<td width="33%">Бумажная</td>
<td width="34%">100 руб</td>
</tr>
<tr>
<td width="33%">Творог</td>
<td width="33%">Вкусный</td>
<td width="34%">50 руб</td>
</tr>
</table>


Результат

Товар Описание Цена
Книга Бумажная 100 руб
Творог Вкусный 50 руб

Цвет фона и текста ячеек

Чтобы изменить фон ячейки и текст в ней воспользуемся CSS, для этого присвоим трем верхним ячейкам класс class="color" , добавим Глобальные Таблицы Стилей (<style type="text/css"> ... </style>) в заголовок страницы (между тегами <head> и </head> ) где укажем - цвет фона ячейки, шрифт, его размер и цвет

Пример

<html>
<head>
<title>Прайс-лист</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
.color{
background-color:#ccc; <!-- цвет фона ячейки -->
font:16px verdana, arial, helvetica, sans-serif; color : #fff;font-weight:700; <!-- шрифт, его размер и цвет -->
}
</style>

</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="50%">
<tr>
<th width="33%" class="color">Товар</th>
<th width="33%" class="color">Описание</th>
<th width="34%" class="color">Цена</th>
</tr>
<tr>
<td width="33%">Книга</td>
<td width="33%">Бумажная</td>
<td width="34%">100 руб</td>
</tr>
<tr>
<td width="33%">Творог</td>
<td width="33%">Вкусный</td>
<td width="34%">50 руб</td>
</tr>
</table>
</body>
</html>


Результат

Товар Описание Цена
Книга Бумажная 100 руб
Творог Вкусный 50 руб

Ссылки

Ссылки в прайс-лист вставляются так же, как и везде они вставляются. Ссылка из ячейки должна вести на страницу с описанием и фотографией товара.

Пример

<table border="1" cellpadding="5" cellspacing="0" width="50%">
<tr>
<th width="33%" class="color">Товар</th>
<th width="33%" class="color">Описание</th>
<th width="34%" class="color">Цена</th>
</tr>
<tr>
<td width="33%"><a href="photo.html">Книга</a></td>
<td width="33%">Бумажная</td>
<td width="34%">100 руб</td>
</tr>
<tr>
<td width="33%"><a href="photo.html">Творог</a></td>
<td width="33%">Вкусный</td>
<td width="34%">50 руб</td>
</tr>
</table>


Результат

Товар Описание Цена
Книга Бумажная 100 руб
Творог Вкусный 50 руб

Конец мучениям

В результате мы получим примерно такой ПРАЙС-ЛИСТ


Товар Описание Цена
Книга Бумажная 100 руб
Творог Вкусный 50 руб
Стол Деревянный 5000 руб
Стул Пластмассовый 2000 руб
Шкаф Славянский 15000 руб
Полка книжная Деревянная 2500 руб
Кресло Директорское 20000 руб
Лампа Настольная 1200 руб
Диван Для посетителей, кожанный 25000 руб

Вернуться

На главную


Hosted by uCoz