Как создать таблицу в html - урок первый и простой

» »

Как создать таблицу в html - урок первый и простой (картинка, фото)
Как создать таблицу в html - урок первый и простой
Статья создана: , обновлена:

Содержание

Введение

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

Создание таблицы

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

Сделайте новый текстовый файл и вводим главные теги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа без помощи других изберите такими, чтоб ссылки были отлично видны:

<html>
<head>
<title>Меню</title>
</head>
<body>
</body>
</html>

Любая таблица начинается тегом <table> и завершается тегом </table>. Строчки таблицы образуются парой тегов <tr></tr>, меж которыми размещаются пары тегов <td></td>. Любая пара этих тегов образует один столбец. Меж открывающим <td> и закрывающим </td> тегами помещается текст либо хоть какое другое содержимое ячейки.

Беря во внимание произнесенное, код HTML, описывающий нашу таблицу, состоящую из 1-го столбца и содержащую пункты меню с наименованиями страничек web сайта, обязан иметь последующий вид:

<table>
<tr><td>Основная страничка</td></tr>
<tr><td>Чем мы увлечены?</td></tr>
<tr><td>О нашей компании</td></tr>
<tr><td>Анонсы</td></tr>
<tr><td>Оборудование</td></tr>
<tr><td>Спец. ПО</td></tr>
<tr><td>Наши партнеры</td></tr>
<tr><td>Прайс-лист</td></tr>
<tr><td>Связь с компанией</td></tr>
</table>

Воткните пустую строчку меж открывающим <body> и закрывающим </body> тегами и, начиная с нее, введите обозначенный код.

Сохраните документ в папке web под именованием menu.html, после откройте в окне браузера файл menu.html.

Сделанная нами таблица размещается у левого края экрана. Это положение можно поменять, использовав в открывающем теге <table>

Пункты меню размещены один под другим, а края таблицы и ячеек не заметны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтоб включить их отображение, следует использовать в теге <table> атрибут border, указав в качестве его значения толщину рамки в пикселах.

Добавьте в тег <table> атрибут border-width:1px, чтоб показать рамку и ячейки таблицы шириной 1 пиксел:

<table style="border-width:1px;">

Сейчас таблица отображается с рельефными границами.

Размер таблицы

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

Установите для таблицы ширину 140 пикселов, добавив атрибут width в открывающий тег <table> так, чтоб он принял вид:

<table style="border-width:1px; width140px;">

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

При использовании для формирования столбцов таблицы тегов <td></td> данные в ячейках представляются шрифтом обычного текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, к примеру, заглавия столбцов либо строк таблицы, то заместо тегов <td></td> комфортно использовать теги <th></th>. Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.

Наше меню будет смотреться лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Потому заменим в HTML коде элементы <td></td> элементами <th></th>.

Отредактируйте файл menu.html, заменив теги <td> и </td> соответственно тегами <th> и </th>.

В тегах <td> и <th> вы сможете использовать старенькые атрибуты:

align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;

width - для указания ширины ячейки в пикселах;

height - для определения высоты ячейки;

valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign="middle".

Но! данные атрибуты в таком в виде категорически не рекомендуется использовать.

Проверьте, как работают эти атрибуты, после этого возвратите таблицу в прежнее состояние.

Как раскрашивать таблицу в различные цвета

Вы сможете также поменять цвет хоть какой ячейки, столбца, строчки либо всей таблицы, вставив старенькый атрибут bgcolor соответственно в тег <th>, <tr> либо <table> или через style="background-color:#666;".

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

Нам осталось сейчас сделать ссылки из двух первых пт меню на надлежащие странички нашего web сайта. Потому что другие странички еще не сделаны, то ограничимся этими 2-мя ссылками. Как и до этого, воспользуемся тегами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пт меню - Основная страничка - следует указать файл other.html, другими словами href="other.html, а для второго - Чем мы увлечены? - файл list.html, другими словами href ="list.html".

В последующем опыте мы разделим экран по вертикали на два окна так, чтоб у левого края экрана повсевременно отображалась таблица с меню, а справа от нее - странички нашего web сайта, которые пользователь сумеет выбирать из меню. Обычно при переходе по ссылке новый документ отображается в том же окне, что и начальный, в каком была ссылка. Чтоб показать его в другом окне, нужно в открывающем теге <а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. В последующем опыте мы подробнее побеседуем об этом и присвоим соответственному окну имя "frame", а на данный момент укажем это имя как значение атрибута target в ссылке: target="frame". Снова подчеркнем, что в этом опыте web страничка будет загружаться в то же окно браузера, в каком находится ссылка, а атрибут target дозволит загружать документ в другое окно, которое мы сделаем в последующем опыте.

Пример формирования меню и ссылки в таблице

Отредактируйте в файле menu.html строчки кода, содержащие наименования пт меню Основная страничка и Чем мы увлечены?, вставив вышеуказанные ссылки соответственно на файлы other.html и list.html так, чтоб эти строчки приняли последующий вид:

<tr><th><a href="other.html" target="frame">Основная страничка</a></th></tr>

<tr><th><a href="list.html" target="frame">Чем мы увлечены?</a> </th></tr>

Сейчас 1-ые два пт меню выделены цветом и подчеркнуты как ссылки. Проверим, как работают эти ссылки.

Щелкните мышью на первой ссылке - Основная страничка. Зависимо от версии браузера, файл other.html будет загружен или в новое отдельное, или в то же самое окно браузера.

Если файл был загружен в то же самое окно браузера, то нажмите кнопку Вспять (Back) на панели инструментов либо просто закройте окно, если файл был загружен в новое окно. На дисплее опять отобразится файл menu.html.

Щелкните мышью на второй ссылке - Чем мы увлечены? В окне браузера появится файл list.html.

Итак, на базе таблицы мы сделали меню и удостоверились, что ссылки в нем работают.

Есть вопросы, замечания, дополнения? Пишите в комментариях.
создание таблиц, html таблица

Страница: Как создать таблицу в html - урок первый и простой

Дата публикации: 2010.11.23 11:40.Обновление: 2013.10.22 03:57

Следующая статья:

Полезные темы:

Как создать страницу с фреймами
Как создать страницу с фреймами
Описание создания и настройки web-страницы содержащей фреймы в редакторе Microsoft FrontPage 2003
Как сделать свой первый баннер
Как сделать свой первый баннер
Описание элементарных действия, которые требуется произвести и понимать для изготовления своего первого баннера для web страниц
Как создать таблицу
Как создать таблицу
В данной статье содержится описание создания и работы с таблицами в программе FrontPage
Как создать собственный блог
Как создать собственный блог
Как создать собственный блог, вопрос который сейчас интересует многих, так давайте научимся его создавать. Статья о том как создать собственный блог
Как создать список на web странице
Как создать список на web странице
Описание, как просто и правильно делаются списки значений на web (html) страницах
Как спланировать работу над проектом
Как спланировать работу над проектом
План проекта — это один из самых важных инструментов для управления проектом и командой, которая его осуществляет
Как создать декларацию перспективы команды
Как создать декларацию перспективы команды
Статья рассказывает о том, как распределять роли между отдельными членами команды для эффективной работы
наверх