Bootstrap таблици

Таблици в HTML – основни тагове
<table></table> – дефинират елемент таблица
Освен елемента <table>, всяка таблица може да съдържа един или повече от следните елементи:
<tr></tr> – (table row) дефинира ред от таблица
<th></th> – (table header) дефинира заглавие на таблица
<td></td> – (table cell) дефинира клетка от таблица

Групиране на съдържание в таблица:
<thead></thead> – групира съдържанието в заглавната част(горния колонтитул) на таблицата.
<tbody></tbody> – групира съдържанието в тялото на таблицата.
<tfoot></tfoot> – групира съдържанието на долния колонтитул на таблицата.

Свойства colspan и rowspan – указват колко колони/редове обхваща дадена клетка:

<tr>
<td colspan=“2″>клетка обхващаща две колони</td>
<tr>
<tr>
<td>първа колона</td>
<td>втора колона</td>
</tr>


Свойство scope.
Свойството scope идентифицира дали клетката е заглавка за колона, ред или група от колони или редове.
Свойството scope не се поддържа от HTML 5.

Пример:
<th scope=“col“>Име</th> – заглавие на колона
<td scope=“row“>Номер</td> – заглавна клетка на ред

Синтаксис:
<td scope=“col|row|colgroup|rowgroup“>
colgroup – заглавна клетка на група от колони
rowgroup – заглавна клетка на група от редове

Обикновена таблица

Основният клас за таблица в Bootstrap е .table. Пример:

<div class="container">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Номер по ред</th>
          <th scope="col">Предмет</th>
          <th scope="col">Стая</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Английски език</td>
          <td>203</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Математика</td>
          <td>205</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>История и цивилизация</td>
          <td>210</td>
        </tr>
      </tbody>
    </table>
  </div>
Резултата от кода по-горе

Bootstrap поддържа също така и клас .table-dark

<table class="table table-dark">
    ...
</table>
.table-dark

Надпис (caption) на таблица

Добавянето на <caption> към таблицата има същия смисъл като добавяне на надписи(пояснения) към различни елементи при текстообработката. Това помага на потребителите да разберат за какво става въпрос в таблицата.
Добавяме <caption> след тага <table>

<table class="table  table-dark">
      <caption>Учебна програма за сряда на 11б клас</caption>
      ...
    </table>

Компактна таблица

Посредством класа .table-sm можем да намалим вътрешните отстъпи в клетките на таблицата, за да я направим по-компактна.

<table class="table table-sm">
      <caption>Учебна програма за сряда на 11б клас</caption>
      ...
    </table>

Рамки на таблица

По подразбиране Bootstrap има очертания само на редовете в таблицата.
класът .table-bordered – задава всички очертания на таблицата.

<table class="table table-bordered">
      <caption>Учебна програма за сряда на 11б клас</caption>
      ...
    </table>

класът .table-borderless премахва всички очертания на таблицата

<table class="table table-borderless">
      <caption>Учебна програма за сряда на 11б клас</caption>
      ...
    </table>

„Раирани“ таблици.

Можем да оцветим редовете в таблицата (един светъл, един тъмен и т.н.) като използваме класа .table-striped.

<table class="table table-borderless table-striped">
      <caption>Учебна програма за сряда на 11б клас</caption>
      ...
    </table>

Оцветяване елементи на таблица

С класовете .thead-light и .thead-dark можем да оцветим заглавния ред на таблицата.

<thead class="thead-light">

Има 9 специфични класа за оцветяване на редовете или клетките на таблица, които се описват във формат:
.table-[context]
където [context] може да приема стойности activeprimarysecondarysuccessdangerwarninginfolightи dark.

Пример

<table class="table table-borderless table-striped">
      <caption>Учебна програма за сряда на 11б клас</caption>
      <thead>
        <tr>
          <th scope="col">Номер по ред</th>
          <th scope="col">Предмет</th>
          <th scope="col">Стая</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td class="table-warning">Английски език</td>
          <td>203</td>
        </tr>
        <tr class="table-danger">
          <th scope="row">2</th>
          <td>Математика</td>
          <td>205</td>
        </tr>
        <tr>
          <th scope="row" class="table-info">3</th>
          <td>История и цивилизация</td>
          <td class="table-success">210</td>
        </tr>
      </tbody>
    </table>

Задача: Използвайки таблици, създайте интерфейс за калкулатор по шаблона.