В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки — «add_image_in_html» и «images»
Любая таблица состоит из строк и столбцов. На их пересечении — ячейки. Первая строа таблицы — строка с заголовками.
Таблица в блоге или ворде
Коротко о главном
Используем теги
- table — начинаем рисовать таблицу
- tr — строка таблицы, содержит в себе набор th или td
- th — ячейка заголовка в строке tr. Сколько эл-ов <th> — столько столбцов в таблице.
- td — ячейка в строке tr
Подробнее о тегах
Формируем ее построчно. 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
Вот что у нас получилось
Отображение таблицы в браузере
Страшненькая? Да. Но читабельная.
А о красивостях поговорим потом.
PS — добавила статью в полный список моих конспектов лекций по HTML & CSS
Я думал, что подписался на Тестирование софта, а мне в ленту приходят какие-то школьные гайды по HTML. Что за говно?
ОтветитьУдалитьОчень вам сочувствую :)
УдалитьВозможно, стоит отписаться от авторов, которые пишут "не о том"?