воскресенье, 24 апреля 2016 г.

HTML. Как нарисовать таблицу

В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки — «add_image_in_html» и «images»

Любая таблица состоит из строк и столбцов. На их пересечении — ячейки. Первая строа таблицы — строка с заголовками. 

Таблица в блоге или ворде

Коротко о главном


Используем теги
  • table    — начинаем рисовать таблицу
  • tr         — строка таблицы, содержит в себе набор th или td
  • th        — ячейка заголовка в строке tr. Сколько эл-ов <th> — столько столбцов в таблице.
  • td        — ячейка в строке tr

Подробнее о тегах


Внутри тегов table будет наша таблица.
Формируем ее построчно. TR — одна строка. Открываем тег TR и внутри перечисляем ячейки одну за другой.

<table>
<!-- Строка заголовков -->
<tr>
<th>Название столбца 1</th>
<th>Название столбца 2</th>
</tr>
<!--  Первая строка после заголовков. 
                Каждый элемент td - ячейка строки -->
<tr>
<td>Эта ячейка относится к столбцу 1</td>
<td>Эта ячейка относится к столбцу 2</td>
</tr>
<!--  Вторая строка таблицы -->
<tr>
<td>Эта ячейка относится к столбцу 1</td>
<td>Эта ячейка относится к столбцу 2</td>
</tr>
 </table>

См также:
Комментарии в коде — как расставлять комментарии

CSS-код

Чтобы таблица отрисовывалась в браузере, нужно в раздел <head> добавить небольшой CSS-код:

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<!-- Просто небольшой фрагмпент CSS-кода, чтобы можно было видеть таблицу в 
         браузере. Не думайте пока о нем :) -->
<style type = "text/css">
td, th {border: 1px solid black;}
</style>
</head>

Пример


Нарисуем таблицу с заголовками багов и улучшений из пункта 3 статьи «Как заводить задачи в баг-трекер».

<!-- Тег table показывает, что начинается таблица -->
<table>
<!-- Это первая строка, которую мы начинаем тегом tr. 
Каждый элемент tr формирует строку таблицы. Не столбец! -->
<tr>
<!-- Каждый элемент th - название столбца таблицы. 
   Обратите внимание, что заголовки таблицы перечисляются один за другим. 
   В такой последовательности они и образуют строку tr -->
<th>Баг</th>
<th>Улучшение</th>
</tr>
<!--  Первая строка после заголовков. Каждый элемент td - ячейка строки -->
<tr>
<!-- Эта ячейка относится к столбцу «Баг» -->
<td>Можно зарегистрироваться с именем Ктулху</td>
<!-- Эта ячейка относится к столбцу «Улучшение» -->
<td>Запретить регистрацию с именем Ктулху</td>
</tr>
<!--  Вторая строка таблицы -->
<tr>
<!-- Эта ячейка относится к столбцу «Баг» -->
<td>Сообщение об ошибке указывает на неверный пароль при вводе недопустимого имени</td>
<!-- Эта ячейка относится к столбцу «Улучшение» -->
<td>Выводить в сообщение об ошибке детальную информацию по причине</td>
</tr>
</table>

Полный код — simple_table.html

Вот что у нас получилось

Отображение таблицы в браузере


Страшненькая? Да. Но читабельная. Smile :)
А о красивостях поговорим потом.

PS — добавила статью в полный список моих конспектов лекций по HTML & CSS

2 комментария:

  1. Я думал, что подписался на Тестирование софта, а мне в ленту приходят какие-то школьные гайды по HTML. Что за говно?

    ОтветитьУдалить
    Ответы
    1. Очень вам сочувствую :)
      Возможно, стоит отписаться от авторов, которые пишут "не о том"?

      Удалить