Создание и продвижение сайтов, материалы веб-мастеру!
Способы заработка, свой бизнес в интернете!

Подписка на получение новых публикаций сайта с помощью RSS

Подписка с помощью RSS
(читателей: 3125)

Мой LiveJournal Мой Я.ру Мой FaceBook Мой Twitter

Читать в соц. сетях:

Куда вложить деньги - инвестирование в ПАММ-счетаПассивный доход за счёт инвестирования Куда сегодня можно вложить деньги

Инструкции и методы решения различных задач

Раздел "Инструкции и методы"

Основа данного раздела - это пошаговые описания решений определённых задач в сайтостроении (вёрстка, web-дизайн, программирование и прочее), но не только, а также примеры решения различных трудностей с помощью полезного софта и некоторые другие интересные материалы

Рейтинг инструкций по оценкам пользователей | Все инструкции и методы одним списком

HTML таблица. Основы построения

HTML таблица. Основы построения

Построение таблицы в html не потребует значительных усилий на изучение тегов и основных принципов.

На самом деле их не много и все, что необходимо для получения хорошего результата — это внимательность в написании кода.

Теги html для построения таблицы

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

  • <head></head> - голова или заголовки таблицы;
  • <body></body> - тело таблицы, внутри которых размещается код и данные таблицы.

К слову, для построения именно табличного представления данных нередко используют <thead></thead> и <tbody></tbody>.

Собственно для создания самой таблицы применяют следующие теги:

  • <table></table> - непосредственно формируют таблицу;
  • <th></th>- используются для определения заголовков таблицы;
  • <tr></tr> - для построения рядов таблицы;
  • <td></td> - для построения столбцов таблицы;
  • <caption></caption> - оформление названия таблицы (может располагаться внизу или вверху).

Рассмотрим пример построения простейшей таблицы для каталога абстрактного интернет магазина, размером 3х3.

<html>
<head>
<title>html table</title>
</head>
//переходим к телу таблицы
<body>
//Далее непосредственно сама таблица
<table>
<caption>Таблица №1 Каталог продукции</caption>
<tr><th>товар</th><th>стоимость товара (у.е.)</th><th>возможность заказа</th></tr>
//первый ряд
<tr><td>двери</td><td>1000</td><td>отсутствует</td></tr>
//второй ряд
<tr><td>витраж</td><td>500</td><td>в наличии</td></tr>
//третий ряд
<tr><td>доборы</td><td>300</td><td>под заказ</td></tr>
</table>
</body>
</html>

Получаем простой, но не очень привлекательный результат:

Таблица №1 Каталог продукции
товар стоимость товара (у.е.) возможность заказа
двери 1000 отсутствует
витраж 500 в наличии
доборы 300 под заказ



Помимо основных параметров, при построении таблицы могут быть использованы теги форматирования или оформления. Сюда относятся:

  • width - ширина столбцов и height - высота ячеек
  • background - заливка рисунком или bgcolor - заливка цветом
  • border - создание рамки заданной ширины
  • align- выравнивание таблицы и текста по горизонтали
  • valign - выравнивание текста по вертикали

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

<table width="300" border="2" align="center">
<caption>Таблица №2 Каталог продукции</caption>
<tr align="center" bgcolor="red"><th>товар</th><th>стоимость товара (у.е.)</th><th>возможность заказа</th></tr>
<tr align="center"><td>двери</td><td>1000</td><td>отсутствует</td></tr>
<tr align="center"><td>витраж</td><td>500</td><td>в наличии</td></tr>
<tr align="center"><td>доборы</td><td>300</td><td>под заказ</td></tr>
</table>

Получаем следующий результат:

Таблица №2 Каталог продукции
товар стоимость товара (у.е.) возможность заказа
двери 1000 отсутствует
витраж 500 в наличии
доборы 300 под заказ
 

Инвестируй выгодно...

Инвестиции в ПАММ-счета на рынке Форекс

Если Вам понравился данный материал, подпишитесь на получение новых публикаций сайта с помощью RSS-ленты или E-mail-рассылки:

Подписка на обновления сайта с помощью RSS

Введите свой e-mail:

RSS-подписчиков: 3125 | E-mail-подписчиков: 2861


Спасибо Вам за добавление данной страницы в социальные сервисы:


Ещё инструкции и методы...


Задать вопрос или оставить комментарий

Вы можете поделиться своим мнением по теме или задать возникшие вопросы в комментариях. Спасибо!

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


Отправить комментарий
Содержание этого поля является приватным и не предназначено к показу.
You can change the default for this field in "Comment follow-up notification settings" on your account edit page.
КАПЧА
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
7 + 6 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.
Инвестиции на Форекс

Copyright © 2007-2018, Николай Мурашкин | Хостинг сайта

Копирование, а также любое другое подобное использование материалов без ссылки на сайт NikMurashkin.RU строго запрещено!

тИЦ и Page Rank сайта