Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Создание собственного сайта от А до Я. 5 урок Таблицы в HTML


Информационный Канал Subscribe.Ru

Урок 5 - Таблицы в HTML.

Вся информация по рассылке доступна здесь. Вы можете скачать все выпуски рассылки.
Вот и подошло время очередного урока рассылки "HTML это просто". В этом уроке разберем построение таблиц в web-документах. Усвоить этот урок очень важно, тяжело найти ресурс, не использующий в своей структуре таблиц. Перед началом, не сколько новостей:
1. - на объявленный конкурс подали заявки 6 Авторов. Заявки, начиная с выхода этого выпуска, не принимаются. Посмотреть конкурсные работы, проголосовать за понравившуюся кнопку можно тут. Напоминаю Автор, который по результатам голосования (выход урока 6) получит наибольшее количество голосов, будет вознагражден. Кнопка с описанием будет добавлена в раздел Друзья Софт портала SMM (ТИЦ=110, PR=3/10, 500 уникальных посетителей за 24 часа).
2. - как можете видеть в разделе "Создают с нами" добавлено 6 новых ресурсов. Это говорит, что время, потраченное на создание уроков, потрачено не зря.
3. - приходят письма с вопросами по урокам. Часто спрашивают одно и тоже. Принял решение открыть на своем Полезном форуме раздел "HTML это просто". Для каждого вышедшего урока отдельная тема. Просьба свои вопросы оставлять там. Вы получите 100% получите ответы на все вопросы.
4. - Начиная с сегодняшнего дня. Все ссылки из раздела "Создают с нами" будут дублироваться на "Софт портале SMM" на странице рассылки. Будем надеется что это даст веб-мастерам новых посетителей, да и индекс цитирования повлияет (подробнее о ТИЦ будет рассказано позже).
Web Coder, именно на нее ориентируясь, будут написаны уроки. Поэтому все кто желает понять и свободно владеть HTML , качаем по этой ссылке (600 кб).
Ну, все приступаем.

А зачем мне это надо?

Одним из наиболее широко применяемых при создании web-страниц средств являются таблицы. Думаю вам не нужно объяснять о понятии табличного представления данных. В HTML таблицы используются не только традиционно, но и как метод средство форматирования web-страниц.
Пример:
ячейка 1 строка 1 ячейка 2 строка 1
ячейка 1 строка 2 ячейка 2 строка 2
<table border="2">
<tr>
<td>ячейка 1 строка 1</td>
<td>ячейка 2 строка 1</td>
</tr>
<tr>
<td>ячейка 1 строка 2</td>
<td>ячейка 2 строка 2</td>
</tr>
</table>

Простейшие таблицы.

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

Параметры тэга <TABLE>.

Это дополнительные параметры, прописывать их или нет, это вы должны решать сами. Если то или иное значение отображения таблицы не прописано, оно будет отображатся по умолчанию. Возможные параметры:
1. - border = толщина рамки таблицы. Например - <table border="0"> = рамки видно не будет.
ячейка 1 строка 1ячейка 2 строка 1

2. - cellspacing = определяет расстояние между смежными ячейками. Например - <table cellspacing="0"> = рамки смежных ячеек сольются и не будет видно границы между ячейками.
ячейка 1 строка 1ячейка 2 строка 1

3. - cellpadding = размер отступа между рамкой ячейкии данными внутри ячейки. Например - <table cellpadding="17"> = текст будет отстоять от всех рамок на 17 пикселей.
ячейка 1 строка 1ячейка 2 строка 1

4. - width и height = ширина и высота таблицы. Например - <table width="400" height="20"> = ширина таблицы - 400 пикселей, высота - 20.
ячейка 1 строка 1ячейка 2 строка 1

5. - bgcolor = фоновый цвет таблицы. Например - <table bgcolor="#ff0000"> = фоновый цвет красный.
ячейка 1 строка 1ячейка 2 строка 1
Пример совместного использования нескольких параметров:
ячейка 1 строка 1ячейка 2 строка 1
<table border="2" cellpadding="10" width="400" height="20" cellspacing="4" bgcolor="#00ff00">
<tr>
<td bgcolor="#800080">ячейка 1 строка 1</td>
<td bgcolor="#0000ff">ячейка 2 строка 1</td>
</tr>
</table>

Особенности отображения таблиц.

Одной из особенностей представления таблиц различными браузерами являетя отображение пустых ячеек. Кроме того, в любом месте таблицы могут находится ячейки, не содержащие данных. Пример таблицы с пустой ячейкой:
11111222223333344444
6666677777 888889999910000
1234512345 12345
<table border="2" bgcolor="#ffffb7">
<tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td><td></td></tr>
<tr> <td>66666</td><td>77777</td> <td>88888</td><td>99999</td><td>10000</td></tr>
<tr><td>12345</td><td>12345</td> <td>12345</td></tr></table>
1 строка - как видете между тэгами <td></td> никаких данных не указано, такие ячейки будут отбражатся пустыми.
3 строка - прописано только 3 ячейки, а так как наибольшее количество ячеек в строке было 5. 2 ячейки будут отображены браузером пустыми.

Ну и с чем эти таблицы едят?

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

главная
об авторе
гостевая книга
написать автору
Я с каждым уроком покоряю язык гипертекста HTML.
Я создаю полноценный ресурс.
Я точно знаю, что у меня все получится.
Я читаю выпуски рассылки "HTML это просто", и применяю полученную информацию в практике.
Друзья ресурса:
"Софт портал SMM"
"Полезный форум"
"Просто полезный сайт"



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

Письма читателей.

Я подписалась на Вашу рассылку, так как у меня огромное желание научиться писать свои сайт. Вы све рассказываете очень понятно. Но сдесь возникла проблема - у меня не удается скачать по ссылке Web Coder.
Прислала: Ольга.
Во первых благодарю за хорошую оценку моих трудов. Вот официальная страница программы Web Coder. Здесь можно скачать программу, если не удается по ссылке в начале рассылки.
Вообще то когда я подписалась на Вашу рассылку, я даже и не думала что буду изучать HTML. Я подписалась с одной единственной целью меня интересовало Как надо раскрутить сайт? Дело в том, что свой сайт я уже создала с помощью бесплатной программы. Правда при раскрутке сайта возникают трудности: кое что не работает. И еще я не знала: Как надо вставлять счетчики. Но у меня есть статистика в управлении хостингом, по-этому я не растраивалась. Но вчера когда я прочитала Ваши первые три урока я сразу же создала сайт. Ребята это здорово что Вы предосталяете такую информацию! С Вами действительно HTML становиться очень простым. Спасибо что организовали такие уроки! Вчера я создала свой сайт с помощью Ваших уроков: www.mobilepincod.narod.ru . А сегодня он действительно работает!!! Ребята но у меня возникли вопросы. Как разделить страницу на несколько окон? (Чтобы можно было написать несколько текстов на одной странице: как у меня на сайте: www.cashflow-way.org.ua ). Как на веб-странице создать форму для подписки на рассылку? А можно ли создать плавающее окно для подписки на рассылку? Ну и конечно меня интересует раскрутка сайта? Все о расрутке. С нетерпением жду вашего выпуска с ответами на мои вопросы. Еще раз Большое спасибо.Прислала: Ирина
Разделить страницу можно построив страницу на основе таблицы. Как это сделать читайте в этом уроке.
Форму подписки, создайте рассылку в одной служб рассылки, они дадут вам код формы подписки, который вы можете в дальнейшем размещать на странцах вашего ресурса.
Раскрутке будет посвящен отдельный урок, а вероятней всего несколько уроков. Это очень объемная тема.

1. Как заливать сайт на сервер?
2. Я не понимаю как вставляют в текст на HTML - PHP, Java , Perl и т.д конструкции из этих языков.?
Может вы осветите отдельной рассылкой, какие языки и для чего используют при создании сайта?Прислал: Yauhen Shybeka
Ответ на первый вопрос - в 1 уроке.
Ответ на второй вопрос - не торопите события. Как только освоимся с языком HTML обязательно перейдем к другим языкам. Предварительно раберем раскрутку, продвижение созданных ресурсов. Всему свое время.

Свои вопросы, пожелания, замечания можете задать:
Полезная рассылка
Обзор софта с прямыми ссылками; Hi-tech новости; Юмор и многое другое Вы можете получать каждую неделю.
Подписаться через:
Subscribe
  или  Rambler

Создают с нами:

  http://yurasite.narod.ru

  http://brigadir25.narod.ru

  http://u4ilka2005.narod.ru

  http://inyi.narod.ru

  http://electro20.narod.ru

  http://all5mb.narod.ru

  http://tolyattinec.narod.ru

  http://xskernel.narod.ru

  http://comingin.narod.ru

  www.mobilepincod.narod.ru



В этой колонке, будут ссылки на ваши проекты. Которые создаете по моим урокам. Достаточно выслать на softsmm@mail.ru адрес вашего ресурса. Внимание!!! Принимаются только ресурсы, которые создаются по моими урокам, содержание, наполнение значение не имеет.
Вся информация по рассылке доступна здесь. Вы можете скачать все выпуски рассылки.

Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора
Подписан адрес:
Код этой рассылки: inet.webbuild.htmlsmm
Архив рассылки
Отписаться
Вспомнить пароль

В избранное