Табличная верстка html – Таблицы в Html — теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания

табличная верстка. Примеры, описание, применение, советы

Интернет 23 июля 2018

Каждый человек, который когда-либо хотел создать сайт для своего проекта, сталкивался с проблемой его написания. Не всем хочется платить, да и не каждый бюджет может это позволить, за создание сайта профессиональным веб-мастерам, поэтому большинство начинающих свой путь создателей сайтов начинают изучать методы верстки. Потому что качественного контента и наличия купленного места на сервере для хостинга сайта недостаточно, чтобы он существовал. Первым делом, необходимо создать «скелет» страницы.

Что такое табличная верстка в html?

Чтобы ответить на данный вопрос, необходимо дать определение понятию верстка.

Верстка – процесс создания структуры html-страницы, размещения на ней основных элементов.

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

Макеты html-документов, созданные табличной версткой, используются в подавляющем большинстве сайтов и применяются уже более 10 лет. Это связано с простотой формирования структуры, заполнения, а также с универсальностью такой разметки, которая в разных браузерах отображается одинаково.

Первый этап создания сайта

Табличная верстка начинается с создания разметки: пишется html-код страницы с таблицей, состоящей из определенного количества столбцов и строк.

Для создания таблицы в html используется специальный тег <table>, открывающий ее. Внутри нее используются теги <tr> для создания строки, <th> для создания заголовка таблицы и <td> для создания столбца. Столбцы и заголовки создаются внутри тега строки, причем в каждой строчке может быть создано любое количество столбцов.

<table>
<tr>
<th>Первая таблица</th>
</tr>
<tr>
<td>Первый столбец</td>
<td>Второй столбец</td>
</tr>
</table>
 

Умение создавать таблицу позволяет выполнить html-табличную верстку страницы, поэтому необходимо выяснить, какие атрибуты есть у тегов создания и как ими пользоваться.

Основные атрибуты тегов таблицы

Тег <table>

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

• Свойство align используется для выравнивая положения таблицы, может принимать значения “left”, “center” и “right”. То есть выравнивание по левому краю, центру и правому краю, соответственно.
• Атрибут background позволяет установить фоновое изображение для таблицы по ссылке на него.
• Bgcolor задает фоновый цвет таблицы, значением может быть название или код любого цвета.
• Border определяет толщину границ таблицы и указывается в пикселях.
• Bordercolor устанавливает цвет границы.
• Cellpadding позволяет задавать промежутки между текстом и границами ячеек.
• Свойство Frame указывает браузеру на режим отображения границ таблицы, принимая значения void, border, above, below, hsides, vsides, rhs, lhs. Что, соответственно, значит не отображать границу, отображать рамку вокруг таблицы, сделать видимой только верхнюю границу или только нижнюю, не скрывать только горизонтальные границы или только вертикальные, отображать только правую или только левую черту.
• Атрибут rules несет информацию о том, какие границы ячеек нужно отображать. Значение none позволяет скрыть все границы, all указывает на их отображение, cols задает положение линий между колонками, а rows – между строчками.

Тег <tr>

Данный тег создает строку таблицы, отвечает за ее внешний вид. Имеет небольшой набор атрибутов: align для выравнивания текста в строке, bgcolor задает фоновый цвет ячейки, bordercolor устанавливает цвет рамки вокруг строки.

Теги <td> и <th>

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

• Abbr позволяет сделать краткий комментарий к ячейке.
• Align отвечает за выравнивания содержимого относительно трех горизонтальных положений.
• Background используется для заполнения фона ячейки определенным изображением.
• Bgcolor применяется для установки фонового цвета в ячейке.
• А bordercolor определяет цвет границ ячейки.
• Height служит для задания высоты ячейки.
• Nowrap необходим для запрета переноса строки.
• Weight задает ширину ячейки.

Пример html-макета сайта

Изучив теорию по работе с таблицами в html, можно приступить к созданию собственной разметки страницы. Для этого следует определиться с тем, какие функциональные блоки будут на вашем сайте. Это могут быть шапка, подвал, контент-блок, боковые блоки. В html-табличной верстке необходимо только создать таблицу.

На самом деле на данном этапе можно создать уже полностью готовый макет, задав внешний вид каждого элемента через свойства тегов, которые описаны выше. И тогда будет нужно лишь скопировать код таблицы на каждую новую страницу сайта, чтобы он имел один стиль. Но это достаточно неудобно, так как стиль страницы будет сохранен только в ее файле, а значит, если появится необходимость что-либо поменять, придется изрядно постараться, чтобы найти необходимый атрибут стиля в каждом документе и изменить его значение. Но существует вариант оптимизации этого процесса посредством использования метода CSS-табличной верстки. Поэтому во время создания html-таблицы нет необходимости использовать атрибуты стилей в документе. Единственный атрибут, который применять придется, это id, позволяющий затем обращаться к стилю только отдельного элемента. Это универсальный атрибут, который применяется с любыми тегами. Он принимает значения, состоящие из латинских букв и символов.

Создавая таблицу, необходимо задать id для тега <table>, например, со значением “document”. Затем для ячейки (тег <td> или <th>), отведенной под шапку, атрибут id может принять значение “header”. Ячейка левого меню может быть названа “left_side”, а правого – “right_side”. Блок контента, допустим, будет назван “content”, а подвал сайта – “footer”.

Так будет отображаться страница в браузере.

Второй этап верстки

Созданный документ нужно подключить к стилевому файлу CSS, для того чтобы управлять внешним видом объектов страницы. Для этого необходимо создать CSS-документ, назвать его, к примеру, mystyle.css. А теперь внутри тега <head> в основном документе страницы нужно прописать следующее: <link rel=»stylesheet» href=»page_style.css» type=»text/css» />.

После этого, прописывая в mystyle.css условия отображения элементов, вы сможете изменять внешний вид страницы так, как вам это будет угодно. Например, свойство color задает цвет текста, а background определяет, как будет выглядеть фон элемента. Существует около 20 основных свойств, применяя которые, можно изменять положение элементов, их размеры, цвет и выделение. Поэтому такая верстка не является очень сложной и может быть выполнена даже новичком, а насколько креативно и интересно получится, зависит только от вас.

CSS-верстка

Как известно, сейчас между табличной и блочной версткой в html большинство веб-мастеров выбирает именно вторую. Это связано прежде всего с тем, что код табличной верстки получается очень громоздким, и это тормозит загрузку сайта. Объемность кода объясняется наличием сложной структуры тегов таблицы (3 уровня: <table>, затем <tr>, и только после <th>.) Данное обстоятельство перекрывает даже такие очевидные преимущества табличной верстки, как четкая иерархия элементов, фиксированное положение, кроссбраузерность и простота верстки. Но существует решение этой проблемы именно в языке каскадных таблиц стилей (CSS).

Табличная верстка через CSS может быть осуществлена, если, например, в документе присутствуют только отдельные элементы, заключенные в тег <div>, которые не являются таблицей. Чтобы оптимизировать код, можно создавать табличные документы прямо через свойства стилей. Для этого используется свойство display, которое указывает браузеру на то, как воспринимать тот или иной элемент в документе. Так, например, если значение table, то элемент отображается как таблица, а если table-row или table-cell – строка таблицы и ячейка соответственно. Таким образом, пропадает необходимость в использовании тегов таблицы в html наборе.

Адаптивная табличная верстка

Адаптивная верстка предполагает изменение отображения сайта на разных экранах в зависимости от разрешения и размера дисплея. Это достаточно непростая задача для разработчика, так как требует тщательных расчетов и тестирования на многих платформах. Тем не менее любой популярный современный ресурс невозможно представить без использования адаптации под разные устройства. И для решения данной задачи применяется CSS.

Во-первых, чтобы во всех браузерах стиль сайта был единым, нужно обнулить все браузерные стандарты отображения с помощью css reset, чтобы избавиться от нестандартных отступов, выделений и подобного.

Во-вторых, необходимо получать медиа-запросы от устройств, подключающихся к ресурсу, для того чтобы получить информацию о разрешении экрана и применить адаптацию. Для этого в основном используются свойства min-width, max-width и display. Первые два определяют границы расширения блока, а свойство display со значением none позволяет скрывать большие и нефункциональные блоки на дисплеях с небольшим разрешением.

Примеры

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

Еще один пример.

А можно оформить и так.

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

Источник: fb.ru

Табличная верстка страниц

  Верстка страниц таблицами

Откройте блокнот и скопируйте в него:

<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<html lang=»ru»>
<head>
<title>Заголовок страницы</title>
<meta name=»description» content=»текст о странице»>
<meta name=»keywords» content=»ключевые слова»>
<meta name=»author» content=»имя автора»>
<meta name=»robots» content=»all»>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
</head>
<body>
Здесь будут таблицы, блоки, фото и т.д.
</body>
</html>

Теперь нажмите в верхнем левом углу ФАЙЛ => «СОХРАНИТЬ КАК» впишите в название файла index.html и сохраните его в основной директории. Сделайте несколько копий страниц для таблиц, текста, и т.д. Это будут те страницы, на которых Вы можете попробовать все то, что узнаете здесь. Нужный Вам HTML код сохраняйте в «Блокноте» (расширение “.txt”) и используйте, как шпаргалку. Имена страницам лучше давать информативные, то есть, например страницу о музыке назвать music.html, а страницу с фотографиями photo.html и т.д.

Основные теги страницы

<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»> объявление типа документа
<html lang=»ru»> начало html кода

<head> начало блока информации для браузеров
<title>учебная страница</title>— это название страницы
<meta…> подробнее о мета тегах здесь
<link rel=»stylesheet» type=»text/css» href=»ссылка на файл css»>

Тег <link> определяет ссылку. В отличие от тега A, тег LINK может располагаться только в части заголовка HEAD документа. Информация, указанная в элементе LINK, может по-разному обрабатываться броузерами, в зависимости от указанных атрибутов.

<link rel=»icon» href=»ссылка на картинку ico» type=»image/x-icon»> иконка
</head> конец блока информации для браузеров

<body> начало тела страницы
содержимое страницы
</body> конец тела страницы

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

Таблицы

Для большинства страниц достаточно совсем небольшого количества тегов.

Теги таблиц

<table> открывающий тег таблицы
<tr>тег — начало строки
<th> открывающий тег ячейки
содержимое ячейки — table header (заголовок таблицы)
текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован
</th> закрывающий тег ячейки
</tr> тег — конец строки
эти теги создают новый ряд (строку) ячеек
<tr> тег — начало строки
<td> открывающий тег ячейки
содержимое ячейки
</td> закрывающий тег ячейки
</tr> тег — конец строки
</table> закрывающий тег таблицы

Атрибуты

width — ширина таблицы указывается в «%» или в пикселях «800»

border — толщина рамки

cellspacing — расстояние между ячейками

cellpadding — расстояние между рамкой ячейки и текстом

align — выравнивание по горизонтали ( по умолчанию слева=»left» центр=»center» справа=»right» )

valign — выравнивание по вертикали ( верх=»top» середина=»middle» низ=»bottom» )

colspan=x — количество ячеек по горизонтали

rowspan=x — количество ячеек по вертикали

Примеры таблиц

<table border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<th width=»25%»>навигация</th>
<th width=»75%»>заголовок</th>
</tr>
<tr>
<td width=»25%» valign=»top»>меню</td>
<td valign=»top»>контент</td>
</tr>
</table>

<table border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<th colspan=2>логотип</th>
</tr>
<tr>
<th>навигация</th>
<th>заголовок</th>
</tr>
<tr>
<td valign=»top»>
<ul>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
</ul>
</td>
<td valign=»top»>контент</td>
</tr>
<tr>
<td colspan=3>подвал (банеры, счетчики)</td>
</tr>
</table>

<table border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<th colspan=3>логотип</th>
</tr>
<tr>
<th>навигация</th>
<th>заголовок 1</th>
<th>заголовок 2</th>
</tr>
<tr>
<td valign=»top»>
<ul>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
</ul>
</td>
<td valign=»top»>контент</td>
<td valign=»top»>суб-контент</td>
</tr>
<tr>
<td colspan=3>подвал (банеры, счетчики)</td>
</tr>
</table>

Копируйте код любой из таблиц вставляйте в HTML код страницы между <body> и </body> и пробуйте изменять атрибуты самостоятельно. Используя табличную верстку можно вставлять в таблицу еще одну, две и т.д. таблицы

Пример

<table border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td>логотип</td>
</tr>
<tr>
<td>
<table border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td valign=»top»>>
<ul>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
<li><a href=»index.html» title=»Ссылка»>Ссылка</a></li>
</ul>

</td>
<td valign=»top»>контент-верх</td>
<td valign=»top»>суб-контент-верх</td>
</tr>
<tr>
<td>текст</td>
<td >контент-низ</td>
<td>суб-контент-низ</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>подвал</td>
</tr>
</table>

Таблицы от А до Я

Собственно это почти все, что нужно знать о таблицах. Чтобы быстрее понять, что к чему, сделаем одну страничку вместе

 

 

 

 

Как верстать таблицы, теги tr, td

Мы уже знаем, что самое важное, что есть на любом сайте — это информация. Для грамотного представляю данных часто возникает нужда в таблицах. У тех, кто только начинает знакомиться с версткой, часто возникают трудности с версткой именно таблиц. Иногда нужно оформлять большие и сложные таблицы, их верстка сопряжена с использованием различных тегов, структура которых не всегда понятна.

Основным тегом для верстки таблиц является тег <table>. Он оборачивает все содержимое и закрывается по окончанию. Все мы знаем, что у таблицы есть строки и столбцы. Для обозначения строк используем тег <tr>, а для столбцов тег <td>. Содержимое каждого столбца оборачиваем тегом td. Теги td находятся внутри тегов tr. В случае с простейшей таблицей число тегов td в каждой строке(tr) одинаково.

Иногда в процессе верстки таблиц возникает необходимость создать заголовки столбца, для этого мы используем тег th. Этот тег аналогичен тегу td, тоже расположен внутри tr, но идеологически и стилистически отличается. По умолчанию он выделен жирно, и текст в нем выравнивается по центру.

Не совесем понятно? Рассмотрим таблицу из 4 строк и 2х столбцов с заголовками:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Простая таблица</title>
</head>
<body>
<table border="1">
<tr>
<th>Заголовок 1</td>
<th>Заголовок 2</td>
</tr>
<tr>
<td>Пример столбца 1</td>
<td>Пример столбца 2</td>
</tr>
<tr>
<td>Пример столбца 3</td>
<td>Пример столбца 4</td>
</tr>
<tr>
<td>Пример столбца 5</td>
<td>Пример столбца 6</td>
</tr>
<tr>
<td>Пример 7</td>
<td>Длинный текст 8</td>
</tr>
</table> 
</body> 
</html>

В итоге получаем:

Заголовок 1	Заголовок 2
Пример столбца 1	Пример столбца 2
Пример столбца 3	Пример столбца 4
Пример столбца 5	Пример столбца 6
Пример 7	Длинный текст 8

Объединение ячеек в таблице по вертикали и горизонтали, верстка

Теперь поговорим об одном достаточно сложном и непонятном моменте в верстке таблиц. Часто нам необходимо объединить ячейки таблицы между собой по вертикали или горизонтали. Для этого используется атрибут colspan для ячеек таблицы td. Значения у этого атрибута в виде чисел. Если ставим цифру 2 в значение, то совмещаем по горизонтали две ячейки, текущую и ту, что справа, но в разметке правой ячейки уже быть не должно, содержимое пишем в тот td, которому задали colspan.

Для совмещения ячеек по вертикали необходимо использовать аналогичный атрибут rowspan для тега td. Например, задаем значение 2, значит совмещаем ячейку с нижней. Не забываем удалить ту ячейку, с которой совмешаем из разметки таблицы, иначе выйдет смещение и появление лишних элементов в таблице. Почему объединение по вертикали сложнее? Ведь в разметки таблицы данных нижняя ячейка лежит в следующем теге tr, поэтому ее удаление не столь очевидно, как при объединении по горизонтали.

Можно объединить ячейки одновременно по вертикали и горизонтали, для это задаем оба атрибута сразу. Наглядно станет понятно в примере:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Простая таблица</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">Объединяем вправо</td>
<td colspan="2" rowspan="2">Объединяем все</td>
</tr>
<tr>
<td>Пример столбца 3</td>
<td rowspan="2">Объединяем вниз</td>
</tr>
<tr>
<td>Пример столбца 5</td>
<td>Пример столбца 6</td>
<td>Текст</td>
</tr>
<tr>
<td>Пример 7</td>
<td>Длинный текст 8</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table> 
</body> 
</html>

Объединяем вправо		Объединяем все
Пример столбца 3	Объединяем вниз
Пример столбца 5		Пример столбца 6	Текст
Пример 7	Длинный текст 8	Текст	Текст

CSS-оформление таблиц

Верстать таблицы научились, теперь можно создавать таблицы с любым количеством столбцов и строк, нужно лишь корректировать необходимым образом html-разметку. Чтобы придать таблицам привычный вид, нужно знать о css-свойствах, которые полезны при верстке таблиц. 

Во-первых, таблицам можно задавать рамки. Рамку можно задать, как самой таблице, так и каждой размеченой ячейке таблицы. Но выглядят такие рамки неэстетично и непривычно, чтобы избежать просветов между рамками, используют свойство border-collapse: collapse; Оно накладывает рамки ячеек и убирает нежелательные расстояния между ними. Рамку задаем с помощью свойства border: 2px solid #000; Этим свойством и его значением задаем размер рамки в два пикселя, черного цвета, простой линией.

С помощью рамок можно придать таблице определенный вид. Допустим, хотим расчертить таблицу только на строки или столбцы. Для этого используем css-свойства border-bottom и border-right. С помощью этих свойств задаем рамку у ячейки только с одной стороны,что расчерчивает таблицу нужным образом.

Еще одним важным моментом в верстке таблиц становятся отступы внутри ячейки, их задаем с помощью свойства padding. Можно задать отступ только с одной стороны, для это используем одно из свойств padding-top, padding-right, padding-bottom или padding-left.

Для выравнивания текста внутри ячейки по горизонтали используем css-свойство text-align со значениями left, center и right. Для выравнивания по вертикали подойдет свойство vertical-align. Оно имеет значения top, middle, bottom. Можно задать для ячеек и строк цвет текст (color), цвет фона (background-color), жирность текста (font-weight) и так далее. Чтобы присвоить определенные стили только для конкретной строки или ячейки целесообразно использовать классы для них, а затем писать css-свойства уже для новых классов.

Пример css-кода для разметки простой таблицы.

table {
border-collapse: collapse;
border: 2px solid black;
}
td {
padding: 5px;
padding-right: 10px;
border-bottom: 1px solid lightgray;
text-align:center;
}
th {
padding: 10px;
border: 1px solid black;
}
tr {
background-color: #eee;
}

Табличная вёрстка VS Блочная вёрстка

Вы здесь: Главная — HTML — HTML Основы — Табличная вёрстка VS Блочная вёрстка

Одним из самых популярных споров между верстальщиками — это, какая вёрстка лучше: табличная или блочная. Вопрос этот очень спорный и каждый по-своему прав. Хотя я убеждён, что всё зависит от конкретной ситуации, поэтому и блочная вёрстка, и табличная вёрстка имеют право на существование. И в этой статье я постараюсь разобрать преимущества и недостатки каждой из них. Чтобы при выборе типа вёрстки для своего сайта, Вы опирались, в первую очередь, на их особенности.

Начну с преимуществ и недостатков табличной вёрстки:

• Таблицы не перекрываются друг с другом при маленьких разрешениях.
• Легко делать кроссбраузерный дизайн.
• Гораздо проще блочной вёрстки.
• Очень много лишнего кода, ввиду бесконечного создания строк и столбцов.
• Далеко не каждый дизайн можно создать с помощью таблиц.

Теперь о преимуществах и недостаках блочной вёрстки:

• Значительно меньше HTML-кода и, как следствие, уменьшение веса страницы.
• Блоки загружаются быстрее таблиц (особенно больших таблиц).
• В отличии от таблиц, блоки — универсальное средство для создания любого дизайна.
• Гораздо сложнее табличной вёрстки.
• Огромные проблемы с кроссбраузерностью.
• Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана.

Вот все преимущества и недостатки блочной и табличной вёрстки. От себя хочу добавить, что в 99% Вы будете использовать и то, и другое, но сейчас вопрос стоит о создании самого макета сайта в целом. И здесь я хочу дать Вам рекомендацию, какой из типов вёрстки выбрать.

Блочная вёрстка лучше табличной, НО при условии, что Вы добьётесь кроссбраузерности и хорошего отображения сайта при разных разрешениях экрана. Данный сайт свёрстан блоками, однако, добиться кроссбраузерности и хорошего отображения на разрешениях (я добился хорошего отображения на разрешениях от 800 на 600, хотя на практике достаточно от 1024 на 768) очень тяжело. Об этом я предупреждаю заранее, поэтому если у Вас ещё маленький опыт вёрстки, то забудьте о блочной вообще. Лучше делайте табличную вёрстку.

Вывод: если Вы ещё недостаточно опытны, то используйте только табличную вёрстку, иначе принимайте решение в зависимости от конкретного случая. И всегда ответьте себе на вопрос: «Готовы ли Вы к потере огромного количества времени ради совсем небольшой пользы?«.

• Создано 13.04.2011 23:00:30
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Верстка таблицы в HTML — СайтоСтроение

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

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

Начало любой таблицы всегда начинается с тега-контейнера table, который в конце всегда должен быть закрыт. В этом контейнере всегда располагаются строки — тег tr и столбцы (ячейки), которые задаются тегом td. В тегах <tr> </tr> располагаются столбцы <td> </td> между которыми вписывается текст, отображающийся в ячейках таблицы. Попробуйте по примеру создать свою таблицу:

<table>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>ещё одна ячейка</td>
</tr>
</table>

Внешний вид таблицы

Полученную таблицу можно преукрасить, добавив цветов:

<table bgcolor=»#ff9933″> — для изменения фона всей таблицы

<td bgcolor=»#1a8fd9″> — для изменения фона ячейки

Кроме того, фон можно изменить с помощью атрибута background:

<table background=»fon.jpg»>

В случае указания изображения, как в примере, картинка должна располагаться там же где и html-файл.

Для добавления рамки таблицы или ячейки применяют атрибут border, цвет которого можно менять с помощью атрибута bordercolor.

<table border=»0″> — граница таблицы отсутствует

<table border=»2″ bgcolor=»#ff9933″> — цвет границы изменится на указанный и её размер будет 2px

Выравнивание текста и ячеек

Текст в ячейке можно выравнивать по горизонтали и вертикали:

<td align=»center»> — выравнивание текста по центру горизонтали, также можно по левому (left) и правому (right) краям

<td valign=»middle»> — выравнивание по центру вертикали, кроме того можно по верху (top) и по низу (bottom)

Для того, чтобы назначить отступ от краев внутри ячеек, применяют атрибут cellpadding:

<table cellpadding=»3″>

Чтобы изменить отступ между ячейками в теге table указывается специальный атрибут:

<table cellspacing=»3″> — если указать значение 0, отступа не будет

Для ячейки, как и для всей таблицы, можно указать высоту (height) и ширину (width). Если в строке несколько ячеек, то высоту достаточно указать только для первой, остальные будут той же высоты.

<td> или <td>

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

Объединение ячеек

В случае, если требуется объединить ячейки по горизонтали или вертикали, применяют специальные атрибуты — colspan и rowspan, значениями которых является количество объединяющихся ячеек.

<table border=»1″>
<tr>
<td colspan=»2″>горизонталь</td>
<td>верхняя ячейка</td>
<td rowspan=»2″>вертикаль</td>
</tr>
<tr>
<td>ячеечка</td>
<td>ячейчечка</td>
<td>ячееченьчик</td>
</tr>
</table>

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

Способы HTML верстки | Провёрстка

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

В настоящее время можно выделить 4 способа верстки веб-страниц:

1. Прямая верстка
2. Фреймовая верстка
3. Табличная верстка
4. Блочная верстка

 

Прямая верстка

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

Табличная верстка

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

 

Пример:

1 – показана обычная таблица с ячейками

2 – структурный вид макета, основанного на таблице

3 – с использованием структуры 2 сделана страничка сайта (границы таблицы являются невидимыми, что позволяет использовать таблицу как фундамент страницы)  

 

 

Обычно в готовом html-документе одной таблицей все не заканчивается. Для создания сложных структур приходится определенным образом влаживать и другие таблицы в ячейки существующих таблиц, что приводит к сложности читаемости кода, трудности правки и, кроме того, увеличивается объем такой страниц, такую страницу тяжело затем программировать.

 

Чтобы проще управлять внешним видом документа (жирность слов, подчеркивание, курсив, выравнивание) были разработаны визуальные редакторы – WYSISYG инструменты (What You See Is What You Get, «что видишь, то и получишь»). К сожалению, вместо того, чтобы упростисть ситуацию визуальные редакторы, наоборот, ее усложнили – в документе появилось огромное количество избыточного кода, который стало понять еще труднее. И web-страница стала настолько сложной в понимании, что вручную ее редактировать стало практически невозможно, чтобы не разрушить код WYSISYG. Ситуацию спасла появившаяся на свет технология css (Cascading Style Sheets – каскадные таблицы стилей), при которой все визуальное оформление(жирность и цвет шрифтов и пр.) теперь находится во внешнем файле и который подключается к html странице, т.е. структура(фундамент) страницы находится в одном html файле, а визуальное оформление в другом – css файле. С появлением css появился новый блочный способ html-верстки.

 

Блочная верстка

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

При табличном подходе блок текста опишется так:

 

При блочной верстке тот же самый блок описывается так:

 

Код страницы читается легко и понятно (+ использование css позволяет вынести все оформление во внешний файл, что приводит к сокращению и легкой понимаемости самого html-кода).

Программистам работать с таким кодом очень приятно.

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

Таким образом, настоящее и ближайшее будущее за блочной версткой.

 

Кроме этого, в настоящее время уже вовсю используется язык разметки HTML5, в котором предлагается использование новых тегов для обозначения блочных и инлайновых элементов. Со списком новых тегов и аттрибутов, какая предлагается разметка страницы при использовании html5 можно ознакомиться в этой статье. А как правильно выбрать тот или иной тег и не сделать ошибки рассказывается в этой статье.

 

Фреймовая верстка

Фрейм (от англ. frame — рамка) — это отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.

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

 

Резюме:

– Прямая верстка  – использовалась в начале начал.

– Табличная верстка – громоздкая и неудобная, но простая в реализации.

– Блочная верстка – простая по структуре кода, но нуждается в определенных правилах исполнения, требует определенных навыков и является самым современным способом верстки веб-страниц.

– Фреймовая верстка – не реккомендуемый к использованию способ.

 

proverstka.local предлагает услуги по верстке сайта. Мы умеем делать любую из вышеописанных версток, но предпочитаем работать только с блочной.

Переход от табличной верстки сайта к блочной.

6 Окт 2015

Автор: Александр Побединский

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

В самом начале своего пути, я прочитал несколько уроков по html (там называлось это учебником), кое-где посмотрел как делают простенький сайт и решил попробовать — это было увлекательно! Как вы уже догадались верстка сайта была табличной . Это было ужасно! Но вопреки этому я думал, что у меня офигенный сайт. В табличной варианте есть свой «плюс». Но минусы перекрывают всё и скоро вы о них узнаете. «Плюс» состоит в том, что данный способ может легко освоить каждый из вас, для этого не нужно усердной практики и т.п.

Табличная вёрстка сайта

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

<table cellspacing="0" cellpadding="5">
  <tbody>
     <tr>
        <td valign="middle">Левая колонка</td>
        <td valign="middle">Правая колонка</td>
     </tr>
  </tbody>
</table>

Как видите здесь всё просто, table отвечает за вывод таблицы, tr-строка, td-столбец в таблице. Здесь думаю понятно, останавливаться не будем.

Блочная верстка сайта

Пора посмотреть, как этот же макет выглядит в блочной варианте:

<div>Левая колонка</div>
<div>Правая колонка</div>

И всё! Как видите код вроде простой, даже проще чем в табличной верстке. Сложность состоит в том, что здесь надо иметь знания по CSS, чтобы правильно оформить эти блоки. Вообще блочную верстку сайта можно по-настоящему назвать «дивной»(от слова div-ная). А освоив каскадные таблицы стилей, вы вообще забудете про таблицы. Добавлю ещё про главный «минус» таблиц — это плохое индексирование поисковиками. Чтобы вам было проще освоиться, приведу пример с резиновой шириной:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Описание странички</title>
<style>
body {
font: 12pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы на странице */
}
h2 {
font-size: 36px; /* Размер шрифта */
margin: 0; /* Убираем отступы */
color: #fc6; /* Цвет текста */
}
h3 {
margin-top: 0; /* Убираем отступ сверху */
}
#header { /* Верхний блок */
background: #20867B; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
#sidebar { /* Левая колонка */
float: left; /* Обтекание справа */
border: 1px solid #ccc; /* Параметры рамки вокруг */
width: 20%; /* Ширина колонки */
padding: 5px; /* Поля вокруг текста */
margin: 10px 10px 20px 10px; /* Значения отступов */
}
#content { /* Правая колонка */
margin: 10px 5px 20px 25%; /* Значения отступов */
padding: 5px; /* Поля вокруг текста */
border: 1px solid #ccc; /* Параметры рамки */
}
#footer { /* Нижний блок */
background: #333; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: left; /* Отменяем действие float */
}
</style>
</head>
<body>
<div><h2>Название сайта</h2></div>
<div>
<p><a href="b_all.html">Пункт №1</a></p>
<p><a href="b_author.html">Пункт №2</a></p>
<p><a href="b_theme.html">Пункт №3</a></p>
<p><a href="b_popular.html">Пункт №4</a></p>
</div>
<div>
<h3>Заголовок текста </h3>
<p>Здесь мы как всегда что-то пишем  бла бла бла бла бла бла бла бла бла бла  бла бла бла бла</p>
<p>бла    бла  бла бла бла бла бла бла бла  бла бла бла  бла бла бла </p>
</div>
<div>&copy; Александр Побединский </div>
</body>
</html>

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

Метки: блочная верстка, табличная верстка Экспорт сайта на хостинг От блочной вёрстки сайта к семантике.