ТвойWeb :: Версия для печати :: Помогите с таблицей!

1. SuperWatch - 24 Ноября, 2008 - 08:24:13 - перейти к сообщению

Всем добрый день! Подскажите, как сделать таблицу слева от основного содержимого сайта, но так, чтобы текст не сливался с таблицей? То есть, допустим, как сделать таблицу, например, с красным фоном в левой части страницы (на ней как бы ссылки), а сам фон страницы желтого цвета и на нем текст, но так чтобы он с таблицей не сливался? То есть если я после закрытия тэга </table> дальше начинаю писать текст, он появляется СРАЗУ за правой границей таблицы. Как сделать чтобы расстояние между таблицей и текстом было не таким маленьким? Заранее спасибо.

2. Furax - 24 Ноября, 2008 - 08:43:56 - перейти к сообщению

Для таблицы прописать CSS-аттрибут margin, отличный от нуля.

3. SuperWatch - 24 Ноября, 2008 - 09:04:06 - перейти к сообщению

Furax
А где его прописывать?
В самом коде или в CSS-файле?
Вот у меня, например, такой код:

CODE:

<html>
<head>
<title>Example</title>
</head>
<body bgcolor="yellow">
<table bgcolor="red" align="left" border="4">
<tr align="center">
<td width="200" height="30">
Link1</td>
</tr>
<tr align="center">
<td width="200" height="30">
Link2</td>
</tr>
<tr align="center">
<td width="200" height="30">
Link3</td>
</tr>
<tr align="center">
<td width="200" height="30">
Link4</td>
</tr>
<tr align="center">
<td width="200" height="30">
Link5</td>
</tr>
</table>
<h1>Welcome!!!</h1>
</body>
</html>

Да, и еще, как создать несколько одинаковых по форме строк, не повторяя постоянно код для каждой строки?

4. Furax - 25 Ноября, 2008 - 09:16:02 - перейти к сообщению

Нужно прописать класс для таблицы:

CODE:

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

CODE:

table.marginTable
{
margin: 10px;
}

table.marginTable td
{
width: 200px;
height: 30px;
}

5. SuperWatch - 25 Ноября, 2008 - 10:21:40 - перейти к сообщению

Furax
А если, допустим, у меня простая (примитивная) страница и никакого CSS-файла мне не нужно?

6. Furax - 25 Ноября, 2008 - 10:29:30 - перейти к сообщению

Тогда объявления стилей можно разместить в шапке между тегов <style>:

CODE:

...
<head>
...
<style type="text/css">
Здесь...
</style>
</head>
...

7. SuperWatch - 25 Ноября, 2008 - 17:14:05 - перейти к сообщению

Furax
А можно ли сделать так, чтобы верхний левый угол страницы был уже, чем расстояние между таблицей и текстом?

8. Furax - 25 Ноября, 2008 - 21:52:21 - перейти к сообщению

Можно отдельно задать отступы со всех четырёх сторон таблицы параметрами, соответственно, margin-left, margin-right, margin-top и margin-bottom.

9. Barsuk - 27 Ноября, 2008 - 12:42:38 - перейти к сообщению

SuperWatch
Странно, что никто не предложил банального варианта...
Вот тебе код ... Или я туплю?

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
</head>

<body>
ВОТ ТЕБЕ ТАБЛА...<br>
<br>
<table width="100%" height="500" border="1" cellpadding="5" cellspacing="0">
<tr>
<td width="20%" valign="top" bgcolor="#FF0000">ВОТ ТЕБЕ ЯЧЕЯ №1</td>
<td width="80%" valign="top" bgcolor="#FFFF00">ВОТ ТЕБЕ ЯЧЕЯ №2 </td>
</tr>
</table>
</body>
</html>

Или только к тексту, ...но енто странно...

CODE:

<div style="padding: 10px 10px 10px 10px; /* Либо так...*/ padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">Куча........... текста........</div>