Начинающие веб-мастеры довольно часто встречаются с проблемой расположения информации в один ряд. Будь то картинка слева и текст, расположенный справа, или два текстовых блока, представленных в виде колонок.
Существует ряд способов, позволяющих выполнить поставленную задачу, но не каждый способ может решить проблему совместимости разных браузеров. Всё дело в том, что язык HTML интерпретируется многими браузерами неодинаково, т. е один браузер может отобразить информацию как мы и предполагали, а другой — совсем иначе. Вот тут и возникает знакомая многим сайтостроителям проблема. В погоне за кроссбраузерностью сайта, веб-дизайнеры ищут способы, позволяющие разработать страницу сайта так, чтобы она отображалась во всех браузерах одинаково.
Наиболее удачным способом разметки дизайна страницы в языке html является таблица. Помимо своей основной функции таблица позволяет очень удачно служить «каркасом» дизайна сайта.
В нашем «случае», мы будем использовать таблицу для создания колонок с текстом.
Расположение двух таблиц в одной строке
Для начала, давайте создадим таблицу, состоящую из двух столбцов со значением ширины рамки, равной 0 пикселов (border=»0″).
Для тега <td> (тег столбца таблицы) указываем атрибут valign со значением «top», отвечающий за то, чтобы информация располагалась с верхнего края таблицы.
Вот, примерно, какой html-код вы должны были получить:
[box type=»shadow» align=»» class=»» width=»»]<table width=»366″ height=»46″ border=»0″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td valign=»top»> </td>
<td valign=»top»> </td>
</tr>
</table> [/box]
В каждой ячейке (между тегами <td> </td>) нашей таблицы создаем ещё одну таблицу, но c шириной рамки, равной 1 пиксель, и с одним столбцом.
Посмотрите, какая таблица должна получиться у вас:
|
|
|
Если Вы хотите, чтобы видимые таблицы находились на некотором расстоянии друг от друга, тогда измените значение атрибута cellspacing, отвечающего за расстояние в пикселях между двумя ячейками таблицы, тега <table> нашей основной таблицы, т. е той, в которой содержатся 2 наши видимые таблицы.
Вот, что получилось у меня:
|
|
|
Атрибут «cellspace» в основной таблице равен 2.
Привожу весь html-код, разработанный нами в данный момент:
[box type=»shadow» align=»» class=»» width=»»]<table width=»460″ height=»49″ border=»0″ cellpadding=»0″ cellspacing=»2″>
<tr>
<td height=»49″ valign=»top»><table width=»230″ height=»50″ border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td height=»48″ valign=»top»> </td>
</tr>
</table></td>
<td valign=»top»><table width=»230″ height=»50″ border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td height=»48″ valign=»top»> </td>
</tr>
</table></td>
</tr>
</table>[/box]
Видите, ничего сложного. А главное — код читается во всех браузерах.
Колонки с текстом
На основе этого мы можем с Вами создать колонки с текстом.
Для этого в полученных нами таблицах меняем параметр «border» тега <table>.
Во всех таблицах поменяем значение атрибута border с 0 на 1, и в ячейках вложенных таблиц напишем произвольный текст.
Вот, что в результате должно у вас получиться:
|
|
Довольно привлекательно, не правда ли?
Успехов в веб-дизайне!
Спасибо!
Автор статьи: Демьянчук Виталий.