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

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

Хостинг сайтов
от выбора хорошего хостинга зависит «светлое» будущее созданного тобой сайта.

Основы HTML
язык html это основа Интернета, без этих знаний популярный сайт не сделаешь.

Свойства CSS
с применением стилевых таблиц значительно проще разрабатывать web-страницы и управлять сайтом.

Оптимизация
необходимые меры, предпринимаемые вебмастерами, для поднятия сайта на более высокие позиции.

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

Поисковые системы
принцип работы поисковых систем, алгоритмы, факторы ранжирования.

Интересные статьи
здесь каждый найдёт для себя интересные статьи и ответы на вопросы связанные с созданием сайта.

Словарь терминов
толкование терминов встречающихся при cоздании и раскрутке сайтов.

Таблицы в HTML


Любая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы.

Содержание:


Для создания таблиц в языке HTML применяется элемент table, а весь код (ее содержимое) таблицы располагается между тегами < table > < /table >. Атрибуты этого элемента задают значения для всей таблицы целиком:

  • background - задается изображение (URL), которое может быть фоном для всей таблицы;
  • bgcolor - цвет фона таблицы, задается если не задан фон в виде изображения;
  • border - толщина линий таблицы, если неободимы видимые границы;
  • bordercolor - цвет линий таблицы;
  • cellpadding - расстояние от текста внутри ячеек до границ ячеек;
  • cellspacing - расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);
  • width - задается значение ширины таблицы в px или %.

Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:

< table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >
< /table >

В каждой таблице должна быть хотя бы одна строка, задается она тегами < tr > < /tr >. В следующем примере смотрим пример добавления строки:

< table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >
< tr > < /tr >
< /table >

Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами < td >< /td >. Добавляем к нашей таблице ячейки:

< table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >
< tr >
< td >Ячейка №1< /td >
< td >Ячейка №2< /td >
< td >Ячейка №3< /td >
< /tr >
< /table >

В браузере увидим получившуюся таблицу:

Ячейка №1 Ячейка №2 Ячейка №3

Заголовок таблицы обозначает заголовок столбца или строки, определяется так же открывающим и закрывающим тегами < th > < /th >. Посмотрим на примере:

< table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >
< tr >
< th >Столбец №1< /th >
< th >Столбец №2< /th >
< th >Столбец №3< /th >
< /tr >
< tr >
< td >Ячейка №1< /td >
< td >Ячейка №2< /td >
< td >Ячейка №3< /td >
< /tr >
< /table >

В браузере будет выглядеть так:

Столбец №1 Столбец №2 Столбец №3
Ячейка №1 Ячейка №2 Ячейка №3

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

< table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >
< tr >
< th rowspan="2" >Строки №1 и №2 объединены< /th >
< td >Ячейка№1< /td >
< td >Ячейка№2< /td >
< /tr >
< tr >
< td >Ячейка №3< /td >
< td >Ячейка №4< /td >
< /tr >
< tr >
< th >Строка №3< /th >
< td >Ячейка №5< /td >
< td >Ячейка №6< /td >
< /tr >
< /table >

Браузер отобразит:

Строки №1 и №2 объединены Ячейка№1 Ячейка№2
Ячейка №3 Ячейка №4
Строка №3 Ячейка №5 Ячейка №6

Столбцы объединяются по такому же принципу, только с использованием атрибута colspan. Смотрим пример:

< table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >
< tr >
< th colspan="2" >Столбцы №1 и №2 объединены< /th >
< th >Столбец №3< /th >
< /tr >
< tr >
< td >Ячейка №1< /td >
< td >Ячейка №2< /td >
< td >Ячейка №3< /td >
< /tr >
< tr >
< td >Ячейка №4< /td >
< td >Ячейка №5< /td >
< td >Ячейка №6< /td >
< /tr >
< /table >

Браузер отобразит:

Столбцы №1 и №2 объединены Столбец №3
Ячейка №1 Ячейка №2 Ячейка №3
Строка №4 Ячейка №5 Ячейка №6

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

Заголовок Ячейка
Ячейка
Ячейка Ячейка Ячейка

Или вот так:

Заголовок
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка

А ты попробуй написать код самостоятельно!

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

Выравнивание таблицы по горизонтали задается атрибутом align, значения тебе уже знакомы: left, center, right. А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td. С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign. Он так же имеет свои значения - вертикальное выравнивание по центру middle, по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).

Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки, все зависит от того какие цели ты преследуешь. Задается это - для изображения - атрибутом background, в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона - атрибутом bgcolor, здесь значением является наименование цвета.

Вот вобщем и все, что необходимо для начального уровня. По окончании раздела о построении таблиц в HTML, заканчивается твое первое знакомство с языком HTML. С помощью таблиц в HTML можно создавать несложные шаблоны web-страниц, так что я предлагаю тебе создать свою первую полноценную web-страницу уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!


Назад / К оглавлению

То, без чего не создать сайт:
Доменное имяОсновы htmlХостинг сайтов

Сервисы для вебмастера
сделать и продвинуть свой собственный сайт будет намного проще если использовать специально предназначенные для этого онлайн сервисы.

Психология
интересные статьи по психологии и современным психологическим технологиям, рекламе и PR в интернете.

Transitions и Animations CSS3
как придать индивидуальность веб-странице, используя переходы и анимацию CSS3.
Canvas HTML 5
отличные возможности для создания по настоящему интерактивных веб-приложений.

Полезные книги
книги по созданию, продвижению, поисковой оптимизации сайтов.

Интернет
история возникновения Интернета, психология поисковых запросов и т.п.

Контекстная реклама
на сегодняшний день контекстная реклама является одним из самых популярных способов монетизировать свой сайт или блог.

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