Таблицы в Bootstrap 3

По-моему мы даже на этапе изучения html не изучали тэги для создания таблиц. (А если и изучали - то ничего страшного)

Сегодня поговорим о реализации таблиц с помощью фреймворка Bootstrap

Вот с такого html-кода начнем:

(Код из этой статьи я выложу на Pastebin.com - ссылка будет в конце статьи)

Как обычно начинаем все с контейнера. Уже внутри него создаем тэг <table> с классом "table". Да, вот такое масло масляное, но ничего, терпимо.

Затем внутри идут два закрывающихся тэга <thead> и <tbody>, которые отвечают соответственно за заголовок и содержимое таблицы.

Теперь нам надо задать сами заголовки и содержимое для нашей таблицы.

Для каждой линии заголовков мы будем добавлять такие тэги: <tr></tr>, что является сокращением от английского - table row - то есть ряд таблицы (или строка)

Ну и затем для каждой колонки таблицы нам надо задать название - названия мы будем помещать в тэги <th></th>

Вот такой код получается на данный момент:

Я создал три столбца - то есть три заголовка: Адрес, Этаж и Номер квартиры.

Ну и теперь нам надо этим столбцам добавить какое-нибудь содержимое.

Содержимое добавляем внутри тэга <tbody>

Внутри этого тэга точно так же для каждой строки таблицы надо создавать тэг <tr></tr>, а внутри него для каждого элемента строки (и столбца) тэги <th></th>

В общем структура точно такая же как и в заголовке.

Вот как я это все сделал:

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

Собственно я сделал это так:

Но после сохранения и обновления страницы я все равно увидел кривую таблицу:

Серая полоска в строке длиннее полоски в заголовке, выглядит некрасиво. Посмотрел через консоль (Ctrl+Shift+C) - в последней строке (с Малой Спасской улицей) браузер видит не три тэга <th>, а четыре - хотя прописывали мы только три.

Убрал последний пустой тэг во второй строке - всё выровнялось. Не знаю что это было - возможно ошибка в самой библиотеке Bootstrap, возможно я делаю что-то неправильно.

Попробую найти в чем может быть ошибка - напишу про результаты в следующей статье. Помимо этого будем разбирать различные способы сделать нашу таблицу красивой - куча классов от Bootstrap)

Ссылка на код - https://pastebin.com/SYwcKEsp

@honey_and_money - Всегда добивайся поставленных целей и никогда не обращай внимания на их сложность!