В языке html весь код представляет собой набор элементов. Каждый элемент открывается специальным буквенным обозначением (открывающим тегом) и, обычно, закрывается аналогичным обозначением со слеш чертой / (закрывающим тегом). Пример: <table> и </table>.
Существуют и такие теги, которым не нужен закрывающим парный тег. Обычно это такие теги, в которые нельзя ничего внутри поместить. Например перенос строки <br>. В таблицу мы можем поместить текст или картинку, а в <br> мы не поместим уже ничего.
Запомните:
___
Если вы что-то открыли - закройте!
___
Почти у каждого тега есть набор атрибутов, которые ему можно приписать. Атрибуты пишутся всегда только открывающему тегу. Это может быть ширина, высота, цвет фона, размер шрифта и др. Все названия тегов и атрибутов идут с английского языка, потому назначение большинства из них можно понять, как только переведете.

Итак, таблица. Тег table. Как она строится?
-Сначала создается сама таблица.
<table>
</table>

-Потом у таблицы прописывается элемент "тела" tbody, который хранит наши строки.

<table>
<tbody>
</tbody>
</table>

Обратите внимание, раз tbody прописан внутри тега таблицы, то и закрываться он должен раньше, чем тег таблицы. Точно также со всеми другими элементами.

После тела прописывается тег строки tr.

<table>
<tbody>
<tr>
</tr>
</tbody>
</table>

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

<table>
<tbody>
<tr>
<td>
А тут мы можем написать наш текст
</td>
</tr>
</tbody>
</table>

У этой простой таблицы нет понятия ширины или высоты, она будет растягиваться от нашего текста бесконечно долго. Попробуем написать для неё атрибут ширины. Например, ширина будет 100 пикселей.
<table width="100px">
<tbody>
<tr>
<td>
А тут мы можем написать наш текст
</td>
</tr>
</tbody>
</table>

Обратите внимание на то, как записывается атрибут. Сначала его название, потом знак равно (=), а потом кавычки, внутри которых наше значение с указанием размерности. Чаще всего это пиксели, но позже мы познакомимся с другими видами. Также между тегом и его атрибутом нужно поставить пробел, чтобы они не слились в единое целое.
Чтобы таблица была нагляднее, я припишу ей еще один атрибут - границу (border). И вам советую в первое время всегда его писать, чтобы работать было нагляднее.

<table width="100px" border="1px">
<tbody>
<tr>
<td>
А тут мы можем написать наш текст
</td>
</tr>
</tbody>
</table>

С одним столбцом работать неинтересно. Если мы хотим добавить еще один столбец, нам нужно просто написать его рядом с нашим тегом столбца, но внутри тега строки.

<table width="100px" border="1px">
<tbody>
<tr>
<td>
Тут текст первого столбца
</td>
<td>
А тут текст второго
</td>
</tr>
</tbody>
</table>

Если не указывать никаких атрибутам самим столбцам, они автоматически поделят ширину таблицы пополам. Но мы можем заставить один из них стать больше или меньше, добавив уже ему самому атрибут ширины width. Ширина может измеряться в пикселях, а может в процентах от общей доступной ширины всей таблицы.

<table width="300px" border="1px">
<tbody>
<tr>
<td width="70px">
Тут текст первого столбца
</td>
<td>
А тут текст второго
</td>
</tr>
</tbody>
</table>

Если указать ширину только одному столбцу, второй автоматически подстроится под него и сам рассчитает свою ширину. Но если вы неправильно пропишете ширину обеим столбцам, так, что она в сумме будет меньше или больше таблицы, ячейки постараются сами подстроиться под ширину таблицы, пытаясь сохранить соотношение сторон между собой.

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

Точно также, как добавляются столбцы, добавляются и новые строки. Как только вы закрыли строку, можете начинать открывать новую и для неё вновь прописывать столбцы. На первое время запомните, что прописывать в строках нужно одинаковое количество столбцов. Иначе в них могут образоваться "черные дыры". Строки также делят между собой высоту таблицы, как и столбцы ширину. Кстати, пора бы прописать таблице эту самую высоту height! Возьмем пикселей 200.

<table width="300px" height="200px" border="1px">
<tbody>
<tr>
<td>
1 строка 1 столбец
</td>
<td>
1 строка 2 столбец
</td>
</tr>
<tr>
<td>
2 строка 1 столбец
</td>
<td>
2 строка 2 столбец
</td>
</tr>
</tbody>
</table>

Если мы хотим поменять высоту строки, прописывать эту самую высоту надо столбцам внутри неё. Достаточно написать одному столбцу, как все столбцы этой строки станут такими же по высоте, а вторая строка станет рассчитывать свою высоту самостоятельно.

<table width="300px" height="200px" border="1px">
<tbody>
<tr>
<td height="150px">
1 строка 1 столбец
</td>
<td>
1 строка 2 столбец
</td>
</tr>
<tr>
<td>
2 строка 1 столбец
</td>
<td>
2 строка 2 столбец
</td>
</tr>
</tbody>
</table>

С этим, надеюсь, разобрались.
∎Попробуйте сами написать таблицу шириной 600 пикселей, высотой 500 пикселей. С 3 строками по 4 столбца в каждой. Последняя строка должна занимать 50% высоты. Вторые столбцы таблицы должны быть 200 пикселей, а последние 70. В каждый столбец поместите текст с номером строки и номером самого столбца.
Я верю, что у вас всё получится)

Теперь поговорим о других атрибутах, которые вы можете приписать своим тегам.

Первый - цвет фона bgcolor. Его можно применить и к таблице, и к ячейке. Если мы применим его к таблице, покрасится она вся. Если мы напишем его у ячейки, она отдельно будет иметь свой собственный цвет.
Выглядит так: bgcolor="цвет".
Цвет мы можем задать названием (black, white, green и т.д.), а можем с помощью шестизначного кода. В нем белый #ffffff, черный #000000. Все значения цвета можно взять в том же фотошопе или в интернете, как тут: . Также, если вы забыли какую-то информацию по тегу или атрибуту, вы можете прочитать дополнительно статьи в интернете. Я иногда обращаюсь вот в[url=http://htmlbook.ru/html/td/bgcolor]этот справочник, при переходе в который вы сейчас как раз попадете на атрибут bgcolor.
∎Попробуйте созданной на предыдущем этапе таблице (или любой другой, что есть у вас под рукой) приписать один любой фон, а некоторым ячейкам другой.

Теперь попытаемся задать таблице не однотонный фон, а картинку. За это отвечает атрибут background. Есть несколько способов его добавить к таблице.
Самый простой, когда мы таблице просто прописываем атрибут background="прямая_ссылка_на_картинку" и на этом успокаиваемся. Но, что, если размера нашей картинки не хватает на нашу таблицу? Тогда нам придется использовать еще дополнительные атрибут background-repeat, который отвечает за повтор картинки по ширине и высоте, если её размеры меньше размера таблицы. Значения у этого атрибута могут быть такие:
repeat - картинка будет повторяться, если её размеров не хватает на всю таблицу
no-repeat - не повторять ни в коем случае, даже если картинки не хватает.
repeat-x - картинке разрешено повторяться только горизонтально
repeat-y - картинке разрешено повторяться только вертикально.

Писать каждый раз два отдельных атрибута жутко неудобно. И мы ленивые. А потому мы будем облегчать себе жизнь. И потому мы познакомимся с атрибутом style. Он прописывается также, как и другие атрибуты, но его значением могут быть абсолютно любые свойства объекта.
Пример:
мы можем указать таблице
<table width="100px" height="200px" background="тут ссылка" bacground-repeat="no-repeat">...
а можем использовать атрибут style и прописать всё него в виде свойств
<table style="width:100px; height:200px; background: url(тут ссылка) no-repeat">...

Выглядит короче, но обратите внимание на то, как поменялась запись наших атрибутов, когда они стали стилями! Знак равенства ( = ) заменяется на двоеточие ( : ), кавычки убираются, а вместо них в конце свойства ставится точка с запятой ( ; ). Но почему так произошло? Когда мы прописывали атрибуты отдельно, мы писали на языке html. Как только мы внесли их в атрибут стиля (style) они стали писаться на языке css (Cascading Style Sheets — каскадные таблицы стилей). Они используются как раз для описания веб-элементов, написанных на языке html.
Обычно страницы в интернете не содержат в своих тегах атрибутов, вроде ширины и высоты. Они бы заняли слишком много места. Вместо этого каждому элементу дается какое-то имя (id-уникальное, или class-для группы одинаковых элементов) и создается отдельный файл, в котором пишется для каждого id и для каждого class перечень свойств, как мы это только что сделали в атрибуте style. Таким образом компьютер считывает имя элемента, находит его в этом файле таблицы стилей и сам автоматически применяет этому элементу указанные свойства.

Но мы отвлеклись. Нам важно знать то, что через стили мы можем иногда настроить параметры нашего элемента немного точнее, хотя не всегда эти параметры работают одинаково при записи атрибутом и при записи свойством в стиле.

Вернемся к background.

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

<table width="400px" height="500px" style="background: url(http://rusforumz.com/library/template/f … o/15-1.jpg) no-repeat;">
<tr>
<td>
Большой текст первого столбца, которого хватит на довольно большие строчки </td>
<td>
Большой текст второго столбца, которого хватит на довольно большие строчки</td>
</tr>
</table>

∎Выше у нас таблица с размерами 400х500, а размер фоновой картинки, если её открыть, всего 256х256. Стоит параметр no-repeat, т.е. картинки не хватает, но она не повторяется. Попробуйте заменить этот параметр на те, что прописаны выше и посмотрите, как меняется фон таблицы.

Побаловались? Идем дальше. И сейчас вновь вернемся к нашей рамке. Помните, мы её прописывали у таблицы в виде атрибута? Теперь попробуем прописать её уже в виде стиля.

<table width="400px" height="200px" style="border: 1px;">
<tr>
<td>
Большой текст первого столбца, которого хватит на довольно большие строчки </td>
<td>
Большой текст второго столбца, которого хватит на довольно большие строчки</td>
</tr>
</table>

И, скопировав код выше вы увидите...абсолютно ничего! Этот атрибут перестал работать в виде свойства!
А всё дело в том, что в виде свойства этот атрибут очень хочет знать, а какой же формы ему сделать эту самую границу? А форма бывает такой: ссылка на учебник.
Возьмем мы, например, самую простую сплошную solid.

<table width="400px" height="200px" style="border: 1px solid;">
<tr>
<td>
Большой текст первого столбца, которого хватит на довольно большие строчки </td>
<td>
Большой текст второго столбца, которого хватит на довольно большие строчки</td>
</tr>
</table>

Теперь мы увидим границу. Но она исчезла между столбцов! И всё дело в том, что если атрибут border применялся на все "внутренности" таблицы, то свойство border создает границу только самому тегу, т.е. делает обводку. И видим мы на примере, что он создал нам сплошную обводку шириной в 1 пиксель стандартного черного цвета. Но ведь мы и его можем поменять! Возьмем какой-нибудь #fdf4e3! Или #5e344e! Или самый простой red! И увеличим ширину обводки!

<table width="400px" height="200px" style="border: 3px solid #5e344e;">
<tr>
<td>
Большой текст первого столбца, которого хватит на довольно большие строчки </td>
<td>
Большой текст второго столбца, которого хватит на довольно большие строчки</td>
</tr>
</table>

Обратите внимание на порядок записи. Сначала толщина, потом тип, потом цвет. Цвет можете задавать так, как вам удобно. Хоть #ffffff, хоть white.

∎Попробуйте заменить тип обводки, ширину, цвет. Поиграйтесь с ней, она это любит^^

Поговорим о других атрибутах столбцов, которые нам могут облегчить жизнь.

Другое важное свойство таблицы, вернее её ячеек, это то, что во всех строках не обязательно должно быть одинаковое количество столбцов. Т.е. нам не обязательно делать из таблицы вот такие схематичные сетки 2х2, 2х3, 3х3, 7х7 и т.д.

Мы можем сделать так, что в какой-то строке столбец будет один, и он как бы станет шапкой для столбцов снизу

Или любым другим образом соседние столбцы объединятся в один.

Поможет нам в этом атрибут colspan, приписываемый столбцу.
Выглядит так: colspan="количество_занимаемых_столбцов_с_учетом_его_самого"
Вот тут подробно http://htmlbook.ru/html/td/colspan
Обратите внимание на то, как записывать значение для colspan! Оно не может быть равно 0, потому что мы не можем просто взять и куда-то деть в неизвестность наш столбец. Ему бессмысленно писать значение 1, потому что столбец и так занимает своё одно законное место. Значит, если мы хотим, чтобы вместо двух столбцов стал один, приписываем одному из них colspan="2", а второй удаляем из кода. Если мы его удалим без прописанного colspan, у нас получается дырка. Потому что первый столбец есть, он занимает своё место, но еще не знает, что ему нужно растянуться. Именно поэтому ему нужно прописывать тег colspan с таким значением, чтобы он растянулся на два столбца - на себя и на соседний.

<table width="400px" height="500px" border="1px">
<tr>
<td>
Большой текст первого столбца, которого хватит на довольно большие строчки </td>
<td>
Большой текст второго столбца, которого хватит на довольно большие строчки</td>
</tr>
<tr>
<td colspan="2">
Этот столбец занимает нахальным образом всю строчку и равен по своему размеру двум столбцам над ним</td>
</tr>
</table>

У таблицы выше две строки, причем во второй строке столбец занимает всё возможное место. Также следите: если значение colspan будет меньше, чем столбцов в строках выше или ниже, таблица будет вести себя неадекватно. Точно также и с бОльшим числом.
Столбец с colspan не обязательно должен занимать всю строку. Вот еще пример:

<table width="400px" height="200px" border="1px">
<tr>
<td>
Большой текст первого столбца, которого хватит на довольно большие строчки </td>
<td>
Большой текст второго столбца, которого хватит на довольно большие строчки</td>
<td>
А это третий столбец первой строки</td>
</tr>
<tr>
<td colspan="2">
Этот столбец занимает нахальным образом большую часть строки и равен по своему размеру двум столбцам над ним</td>
<td>
Большой текст второго столбца второй строки</td>
</tr>
</table>

Тут всё видно наглядно. В верхней строке 3 столбца, во второй строке один обычный столбец и у одного прописано colspan в значении 2, потому в сумме их также 3.

∎Попробуйте написать код вот к такой схематичной картинке:

В столбиках указано, какие еще параметры надо прописать конкретно этим столбикам. Общая ширина таблицы 550, высота 400.
Чтобы было удобнее работать, в самом начале пропишите для таблицы border="1". Потом, как будете уверены, что закончили, можете его стереть.
Фоновой картинкой таблице укажите вот эту
http://www.lenagold.ru/fon/tkan/tkan/beg/begtkan27.jpg
с параметром повторения.
Верю в вас)

∎Для тех, кто уверен в своих силах, есть еще один пример.
Таблица 600х600px.
Ширину и высоту ячеек, соответственно, надо высчитать самостоятельно и прописать столбцам. Картинки-фона нет, но сделайте каждую ячейку таблицы разного цвета
В верхней и средней строке, соответственно, надо правильно использоваться тег colspan.

Как только мы разобрались с объединением столбцов в горизонтальном направлении, пойдем дальше и начнем объединять их в вертикальном направлении!
Например, почему бы нам не объединить их так?

Если colspan объединят горизонтально, то его брат rowspan объединяет как раз вертикально. Используется он похожим образом и имеет те же правила и ограничения. Только не забывайте, что если вы применили в строке rowspan, конкретно в этой строке столбцов удалять уже не нужно! Потому что наш столбец с rowspan объединится со столбцом в соседней строке, где и нужно провести экзекуцию)

<table width="400px" height="500px" border="1px">
<tr>
<td rowspan="2">
Этот текст находится в общем столбце, занимающем сразу дву строки</td>
<td>
Это текст второго столбца первой строки</td>
</tr>
<tr>
<td>
Это текст второго столбца второй строки</td>
</tr>
</table>

Как видите в примере, во второй строке у нас стоит всего один столбец. Но у столбца первой строки написано rowspan="2", т.е. он растянулся на строку ниже, заменив собой тот самый недостающий столбец. В результате в обеих строчках как бы два столбца.

Атрибуты colspan и rowspan можно использовать для создания более сложных структур. Например таких:

<table width="400px" height="200px" border="1px">
<tr>
<td rowspan="2">
1</td>
<td colspan="2">
2</td>
</tr>
<tr>
<td>
3</td>
<td>
4</td>
</tr>
</table>

Но, как бы мы ни старались, объединить столбец 1 со столбцом 2 в единое целое с помощью этих атрибутов у нас не получится.

∎Попробуем сотворить подобное сами? Вот вам картинка. Таблица 600х600пикселей. Есть и горизонтальное, и вертикальное объединение. Изначальная сетка 3строких4столбца (просто что-то криво нарисовала).

∎Если вы совсем уверены в своих силах, попробуйте заодно сделать такое) Можете за основу взять готовый код предыдущего примера.

Справились? Пожимаю руку и снимаю шляпу.

Для чего мы это изучили? В начале создания презентаций окошки с прокруткой не делались с помощью одних только div-элементов, с которыми мы довольно скоро познакомимся. Нет. Дивы нужны были только для своего свойства прокрутки, а любые отступы, о которых мало кто знал тогда, создавались с помощью сложных конструкций. Таких, чтобы каждая ячейка таблицы попала ровно на созданное на фоне поле для текста. Для примера возьмем простой фон (когда-то это была одна из первых моих презентаций...) и нарисуем на нем вручную схему таблицы, какой она могла бы быть(открывайте, там анимация).

Код этой таблицы соответственно выглядел бы в году 2009-2010 на ловади так:
<table width="500px" height="375px" background="http://savepic.su/5004492.png" border="1px">
<tr>
<td width="60px" height="120px">
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr>
<td>
4</td>
<td width="200px" height="235px">
<div style="overflow:auto;width:200px;height:235px;">тут наш текст, который при добавлении рано или поздно начнет прокручиваться. Циферки в других столбцах стоят, чтобы они были наглядно видны. Сотрите их и таблица будет выглядеть так, как ей положено, без вылезающего снизу фона.</div></td>
<td>
6</td>
</tr>
<tr>
<td>
7</td>
<td>
8</td>
<td>
9</td>
</tr>
</table>

Правда страшно? А ведь это только одно окно. А представьте, что вам надо написать код для вот такой картинки(тоже старая презентация, наверно она была даже раньше предыдущей)? Откройте анимацию и присмотритесь.

Вы только посмотрите на эту схему! 11 столбцов и 5 строчек! А еще в пять ячеек надо вставить div с прокруткой + текст от заказчика. Ну что, вздрогнули?)

А потому сделаем огромный шаг вперед и познакомимся с такими загадочными div`ами.
Если мы верстаем таблицами, у нас существует много ограничений. Сами видели в лишний раз не менять не хотят)
И вот, мы начинаем использовать дивы.
Что такое див - описать мне немного сложно. После жестко заданной таблицы, див - это шальной прямоугольник, который может всё, что может таблица, но в то же время гораздо её функциональнее.

Что может див:
-в нем также, как и в ячейке таблицы, можно писать текст. Но, в отличие от нагромождения table tr td, мы пишем только <div></div>. Экономия времени жуткая.
-ему также можно задать фон, ширину и высоту. Причем фон может быть картинкой или цветом.
-Если текст не влезает в див, див может либо растягиваться, как таблица у которой не прописана ширина и высота, либо может непомещающийся текст прокручивать.
-Див умеет отодвигаться от краев ячейки, в которой находится, и отодвигать текст внутри себя.

Если честно, можно создать презентацию на одних только дивах, без использования конструкции таблицы вообще. Она ничем не будет отличаться по функциональности, но, для начинающего верстальщика, она может принести массу проблем, потому что дивы невероятно капризны. Чуть неправильно указали ширину или отступ - ваш текст вылезет даже из тех мест, где бы вы не подумали о его существовании)
Сейчас, чисто для проверки своих навыков, попыталась сверстать презентацию, которую я сегодня же писала в виде таблицы+див, чисто на диве (есть один див, которому прописывается размер и фон и который заменяет тег table, а внутри него второй див, у которого прописана прокрутка и в котором внутри текст). И даже я столкнулась с парой подводных камней, которые пришлось решать буквально на ходу. Но презентация вышла абсолютно такой же.
Потому, предлагаю не забывать о немного устаревших, но всё же безотказный таблицах, и применять дивы на первых парах вместе с ними. Потом, набравшись опыта, вы можете самостоятельно изучить этот вопрос и решить для себя - что вам удобнее.

Итак, див нам нужен для того, чтобы текст прокручивался в нашем окошке. В общем-то это единственное свойство, из-за которого он нам нужен.
Благодаря тому, что люди научились заставлять див отступать от границ таблицы настолько, насколько нам надо, сейчас таблицы не содержат более одной строки и более одного столбца - нет смысла. Не то, что раньше все те выкрутасы с объединением ячеек и расчетом из размера, которые нужны были только для того, чтобы одна единственная ячейка вставала ровно на наше окошко...

Итак, написание кода начинается с задания таблицы с 1 строкой и 1 столбцом. Ширину и высоту столбца можно указывать, а можно и нет, роли не сыграет.
Дальше таблице мы прописываем какой-либо наш фон. Раз уж мы сами этот фон создали (а я верю, что вы сами его можете создать), очень полезно будет прямо в фотошопе линейкой измерить размеры окошка и то, насколько оно сверху, снизу и с боков отступает от границ рисунка. Тренироваться будем на каком-нибудь моем старом заказе.
Например этом (да-да, тоже треш и угар, но все с чего-то начинали^^ )

Я уже прописываю все размеры на глаз, редактируя их по ходу дела. Но будем считать, что я открыла фотошоп, открыла эту картинку и инструментом линейка замерила всё, что описано выше. Размер всей картинки 600х630px.

Теперь я знаю все основные размеры. Пишу основу.
<table width="600" height="630" background="http://savepic.org/6415136m.jpg">
<tr>
<td width="600" height="630">
<div>
мой текст
</div>
</td>
</tr>
</table>

Диву надо прописать высоту и ширину нашего окошка. Прописывать всё лучше через тег стиля. Иначе капризный див может вообще не отреагировать на изменение ширины и высоты. И, заодно, я прописываю ему сейчас красную сплошную рамку, чтобы видеть, где это он болтается на картинке. После написания всего кода рамка обязательно стирается.

<table width="600" height="630" background="http://savepic.org/6415136.jpg">
<tr>
<td width="600" height="630">
<div style="width:270px; height:345px; border: 1px solid red;">
мой текст
</div>
</td>
</tr>
</table>

Если посмотрим сейчас на итог, то будем разочарованы. Наш див, по своей природе, старается занять по высоте самое центральное положение из всех ему доступных(а высота ячейки, в которой он находится, аж 630 пикселей), а по горизонтали жестко привязывается к правому краю. Чтобы его от этого места отлепить и пододвинуть, мы используем новый атрибут margin.
Что делает margin - он отодвигает объект от того места, где тот находится без этого тега ровно на столько пикселей, сколько мы в margin пропишем.
Подробнее тут http://htmlbook.ru/css/margin (надеюсь, вы сюда поглядываете).
Мы можем написать просто
margin: число;
Но тогда див не поймет, с какой стороны ему двигаться и постарается на всякий случай отодвинуться от каждого края ячейки одинаково. Результатом станет то, что он окажется ровно по центру. Но нам этого не надо.
Мы можем написать сразу 4 числа
margin: число число число число;
Первое число будет от верхнего края ячейки, потом от правого, потом снизу, потом от левого края. Жестко так и никак иначе. Но мы же ленивые, нам лень высчитывать сразу 4 числа. Потому мы возьмем наш margin и припишем через дефис направление, откуда сделать отступ:
margin-left: число;
margin-top: число;
Можно еще использовать right и bottom, смотря к какому краю изначально див ближе должен оказаться.

Итак, добавляем отступы. Отступ слева мы измерили по картинке, а вот отступ сверху мы взять не можем, потому что див находится не на самом верху, а практически в середине. Потому прописываем отступ сверху равным 1px, а потом постепенно увеличиваем число, пока не попадем в нужное место.

Вот, что вышло после перебора отступа сверху:

<table width="600" height="630" background="http://savepic.org/6415136.jpg">
<tr>
<td width="600" height="630">
<div style="width:270px; height:345px; border: 1px solid red; margin-left:268px; margin-top:58px;">
мой текст
</div>
</td>
</tr>
</table>

Теперь осталось свойство прокрутки. Итак, дивы и прокрутка.
Нашим дивам можно приписать такое свойство, что весь текст, что вылезает за их ширину и высоту, будет безжалостно обрезаться. Т.е. мы его не увидим, хотя эта вылезшая информация может и существовать. Это свойство звучит как overflow:hidden.
В то же время есть у дивов другой значение этого свойства, которое мы называем прокруткой, т.е. если текст в диве не помещается, он создает для нас полосы прокрутки, благодаря которым мы можем эту информацию пролистнуть и посмотреть. Это свойство звучит как overflow:scroll.
Но значение scroll делает так, что полоса прокрутки будет существовать всегда, даже если наша информация в див влезает полностью. Потому используется свойство overflow:auto. Т.е. див сам смотри, влезает ли в него информация и, если не влезает, автоматически прокрутку добавляет. Но прокрутка всегда помещается в сам див, в его ширину. Т.е. если див был 200px и все 200px занимал текст, то с прокруткой он не станет 217px (примерно 17 пикселей в ширину серая стандартная полоса прокрутки), а тексту будет отдано уже 183px, а оставшееся займет прокрутка. Это важно помнить.
__
Значит, свойство звучит как overflow. http://htmlbook.ru/css/overflow. Нам, для нашей самой простой презентации, понадобится только auto. Пусть сама решает, когда ей появляться. Итого код:

<table width="600" height="630" background="http://savepic.org/6415136.jpg">
<tr>
<td width="600" height="630">
<div style="width:270px; height:345px; border: 1px solid red; margin-left:268px; margin-top:58px; overflow: auto;">
мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст
</div>
</td>
</tr>
</table>
Если текста мало, прокрутки не будет. Если много - она появиться. Можно чисто ради красоты сделать размеры дива чуть меньше в ширину и высоту, чтобы он не казался настолько резко вписанным. Буквально по пикселя 5 с ширины и высоты.
Убираем нашу рамку и код готов.
<table width="600" height="630" background="http://savepic.org/6415136.jpg">
<tr>
<td width="600" height="630">
<div style="width:265px; height:340px; margin-left:268px; margin-top:58px; overflow: auto;">
мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст мой текст
</div>
</td>
</tr>
</table>

∎Итак. Задание моё будет таково. Я дам картинку. Свою. Нужно будет, как я это делала выше, узнать размеры окошка в ней, написать код, написать див, маргинами расположить его в нужном месте и вставить прокрутку. Не бойтесь, у вас всё выйдет отлично.

Да, вот такого древнего динозавра я откопала у себя в папках^^

Теги: Стырено.