Таблицы

**Encoder** » 21 фев 2011, 16:43

<html>

<head>

<title>Верстка</title>

</head>

<body bgcolor="8e8e8e">
<!-- Основная таблица --!>
<table align="center" cellspacing="5" bscolor="8e8e8e" border="5">
<!-- Шапка --!>
<tr>
<td background="img/head.jpg" height="270" width="1078" colspan="3"> 
</td>
</tr>
<!-- Меню шапки --!>
<tr>
<td background="img/menu_head.jpg" height="35" width="1078" colspan="3"> Главная | Новости | Скачать
</td>
</tr>
<!-- Левый верхний бордер блока1 --!>
<tr>
<td background="img/menu_top_left.jpg" height="52" width="274" align="left">Меню
</td>
<!-- Контент верхний бордер --!>
<td height="41" width="548" align="center"> 
<table valign="top">
<tr>
<td background="img/new_top.jpg" height="41" width="503">
</td>
</tr>
</table>
<!-- правый верхний бордер блока2 --!>
<td background="img/menu_top_right.jpg" height="52" width="274" alegn="right">Инфа
</td>
</tr>
<tr>
<td background="img/menu_meddle_left.jpg" height="295" width="274">
</td>
<td width="530">
</td>
<td background="img/menu_meddle_right.jpg" height="295" width="274">
</td>
</tr>
<!-- футер --!>
<tr>
<td background="img/footer.jpg" height="68" width="1078" colspan="3" align="center"> By Encoder
</td>
</tr>

</body>

</html>

Вот мне нужно чтоб верхний бордер меню был сверху что я не так делаю прописываю valign="top" не работает
Что делать ?

**Encoder** » 21 фев 2011, 16:55

http://i048.radikal.ru/1102/72/d0111ae8aaaa.jpg

Вот ссылка на макет который верстаю

я хочу чтобы например в контенте можно было добавлять по 10 новостей допустим

а блоки чтоб не расширялись при этом

Ну как допустим тут читаешь статьи идешь вниз а меню не двигается и не расширяется.

http://i063.radikal.ru/1102/2a/132e5d77bd21.jpg

Вот названия картин как их обрезал чтоб было понятно .

Вот что получается по коду который я показал выше

http://s009.radikal.ru/i307/1102/5e/584a23c2d0eb.bmp

**Encoder** » 21 фев 2011, 18:37

Вот я посмотрел по урокам
Возьмем допустим:
1 строка
в строке 3 ячейки
то ширину можно задать допустим 1 ячейка-100 пикселей 2 ячейка-200 пикселей 3 ячейка-300 пикселей они выровнятся как я написал по ширине

А вот допустим я в этом ряду хочу задать высоту 1 ячейка-100 пикселей, 2 ячейка-200 пикселей, 3 ячейка-300 пикселей то ячейки выровняться только 300 пикселей !

А как сделать чтоб допустим 1 ячейка-100 пикселей 2 ячейка-200 пикселей 3 ячейка-300 пикселей чтоб была такая высота !!!
Написать только на HTML без css

**Алексей** » 21 фев 2011, 19:57

Я так всё таки до конца и не понял чего конкретно Вы хотите достичь, но вот Ваш код где кое что исправлено:

Код: Выделить всё: <html> <head> <title>Верстка</title> </head> <body bgcolor="8e8e8e">   <table align="center" cellspacing="5" bscolor="8e8e8e" border="5">  <tr> <td background="img/head.jpg" height="270" width="1078" colspan="3"> </td> </tr>  <tr> <td background="img/menu_head.jpg" height="35" width="1078" colspan="3"> Главная | Новости | Скачать</td> </tr>  <tr> <td background="img/menu_top_left.jpg" height="52" width="274" align="left">Меню</td>  <td height="41" width="548" align="center" valign="top"> <table valign="top"> <tr> <td background="img/new_top.jpg" height="41" width="503"></td> </tr> </table> </td>   <td background="img/menu_top_right.jpg" height="52" width="274" alegn="right">Инфа</td> </tr> <tr> <td background="img/menu_meddle_left.jpg" height="295" width="274"> </td>  <td width="530"> </td>  <td background="img/menu_meddle_right.jpg" height="295" width="274"> </td>  </tr>  <tr> <td background="img/footer.jpg" height="68" width="1078" colspan="3" align="center"> By Encoder</td> </tr> </table>  </body> </html>

А вот допустим я в этом ряду хочу задать высоту 1 ячейка-100 пикселей, 2 ячейка-200 пикселей, 3 ячейка-300 пикселей то ячейки выровняться только 300 пикселей !

Ну делаете строку из 3х ячеек без явного указания размера.. В первую ячейку вставляете вложенную таблицу из одной ячейки высотой 100 пикселей, во вторую такая же таблица, но 200 пикселей, 3я- 300..

Только глупости всё это такие вещи дивами (тег <div>) верстаются.. учите CSS..

**Encoder** » 22 фев 2011, 09:33

Алексей , То что вы сделали я это и хотел !

Да а причем тут тэг <div> я лично использую его для выравнивания текста без переноса на новую строку ! Как это делает параграф <p>

**Алексей** » 22 фев 2011, 10:42

Тег <div> многоцелевой и представляет из себя контейнер блочного типа, когда доберётесь до изучения CSS поймете, что все теги можно разделить на строчные и блочное. Так вот <div> - блок- кирпичик которому можно задать свои размеры положение на странице, цвет фона или текстуру и т.д. средствами CSS .. с помощью таких вот кирпичиков можно сверстать сайт не прибегая к таблицам или фреймам.. Да и вообще если "на спор" то можно сверстать сайт используя лишь этот тег и ни какие другие, ну разве что кроме обязательных: <html> <head> <body>..

**Encoder** » 22 фев 2011, 10:45

Я хочу сейчас приступить к изучению CSS только не знаю что и как с чего начать !
Я прошелся по вашему учебнику и многое чего я не могу понять (

**Алексей** » 22 фев 2011, 10:53

Начинайте сначала! а сначала Вам необходимо хорошо разобраться в HTML..
А в "Учебнике CSS" соблюдена последовательность так что начинайте с первой главы и шагайте далее..

**Encoder** » 25 фев 2011, 14:14

Алексей, Помогите мне я не знаю как сверстать подобное http://soft-area.3dn.ru/ с помощью таблиц в html и CSS !
Там я сам верстал шапку блоки футер и новости все по отдельности верстал а он соединил как мне соединить самому с помощью таблиц ? Шапку, меню шапки и футер я сам смогу соединить . А вот блоки и новости не могу (
у блоков фиксированная ширина а высота резиновая у новостей резиновая и ширина и высота !!
Мне надо чтобы левый блок был в верхнем левом углу новости по середине 2 блок в правом верхнем углу
и чтобы блок с новостями расширялся но чтобы не затрагивал блоки и все это в одном ряду должно быть !

http://rghost.ru/4528953

Вот тут ссылка на коды по отдельности

Страницы сайта это код который соединил все блоки

**Алексей** » 26 фев 2011, 12:03

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

Код: Выделить всё: <<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>шаблон</title> </head> <body>  <table border="1" width="100%" cellpadding="5" cellspacing="0">  <tr> <td colspan="3">шапка</td> </tr>   <tr>  <td width="200" valign="top">  <table width="100%" border="1"> <tr> <td>Ячейка-блок с фиксированной шириной и резиновой высотой</td> </tr> </table>  <br>  <table width="100%" border="1"> <tr> <td>2 Ячейка-блок с фиксированной шириной и резиновой высотой</td> </tr> </table>  </td>   <td valign="top">  <table width="100%" border="1"> <tr> <td>Центральная резиновая колонка</td> </tr> </table>  </td>   <td width="200" valign="top">  <table width="100%" border="1"> <tr> <td>Ячейка-блок с фиксированной шириной и резиновой высотой</td> </tr> </table>  </td>  </tr>   <tr> <td colspan="3">подвал</td> </tr>  </table>  </body> </html>

Как заказывали использовал лишь таблицы.. а вот CSS это Вы уж как нибудь сами.. откуда мне знать все нюансы Вашей задумки???

Таблицы

Таблицы

Re: Таблицы

Re: Таблицы

Re: Таблицы

Re: Таблицы

Re: Таблицы

Re: Таблицы

Re: Таблицы

Re: Таблицы

Re: Таблицы

Кто сейчас на конференции