😎 » HTML5 » Разная информация » Table - таблицы
589 0  

Table - таблицы

HTML таблицы раньше даже использовали для создания сеток, а тепер таблицы являються декоративным элементом при оформлении страницы.

<table> - таблица;
<tr> - строка таблицы;
<td> - ячейка таблицы;
<th> - заголовка таблицы;
<col> - тег колонки таблицы;
<colgroup> - тег группы колонок таблицы;
<thead> - тег верхнего колонтитула таблицы;
<tbody> - тег основной части таблицы;
<tfoot> - тег нижнего колонтитула таблицы;
<caption> - тег подписи таблицы.


Самый простой способ написать таблицу:

<table>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
    <tr>
      <td>Ячейка 7</td>
      <td>Ячейка 8</td>
      <td>Ячейка 9</td>
    </tr>
</table>

laughing Вы должны помнить что браузер сам добавляет теги < tbody >< /tbody >, или можно сразу писать самому:

<table>
  <tbody>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
    <tr>
      <td>Ячейка 7</td>
      <td>Ячейка 8</td>
      <td>Ячейка 9</td>
    </tr>
  </tbody>
</table>


Полный код таблицы с примером:

HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.

  • Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
  • Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.
  • Оба тега могут определять стили для одной или нескольких колонок. Атрибут span="число", указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.
  • Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col>, таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).
  • Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.


<table>
  <colgroup style="background-color: #ddd;">
    <col>
    <col style="background-color: #ccc;">
    <col>
  </colgroup>
  <caption>Комплектации Renault Sandero Stepway</caption>
  <thead>
    <tr>
      <th>Характеристика</th>
      <th>SUTA 09H 6R</th>
      <th>SUTA 09HR6R</th>
      <th>SUTA 15H 5R</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Наличие</th>
      <td>+</td>
      <td>+</td>
      <td>+</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Мощность двигателя</th>
      <td>0,9 (90 л.с.)</td>
      <td>0,9 (90 л.с.)</td>
      <td>1,5 (90 л.с.)</td>
    </tr>
    <tr>
      <th>Топливо</th>
      <td>бензин</td>
      <td>бензин</td>
      <td>дизель</td>
    </tr>
    <tr>
     <th>Норма токсичности</th>
     <td>Евро-6</td>
     <td>Евро-6</td>
     <td>Евро-5</td>
    </tr>
  </tbody>
</table>

Сама таблица:

Комплектации Renault Sandero Stepway
Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Наличие + + +
Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
Топливо бензин бензин дизель
Норма токсичности Евро-6 Евро-6 Евро-5

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023