HTML - 6. Теги для создания таблицы



Определение таблицы

<table style="width:100%">
  <tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Возраст</th>
  </tr>	
  <tr>
    <td>Иван</td>
    <td>Иванов</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>Олег</td>
    <td>Бубликов</td> 
    <td>30</td>
  </tr>
</table>
  • Таблицы определяются парным тегом <table>.
  • Строки определяются также парными <tr>.
  • Строки на ячейки делят парные теги <td>.
  • Ячейки для "шапки" определяются тегами <th>.
  • Атрибут style="width:100%" задаёт css стиль, который определяет ширину как 100%. Таблица будет растянута на всю ширину контейнера в котором она находится. Без css стиля, ширина будет зависеть от текстовой информации внутри.

С атрибутом border

По умолчанию рамка для таблиц не определена. Чтобы задать рамку нужно использовать атрибут border.

<table border="1" style="width:100%">
 <tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Возраст</th>
  </tr>	
  <tr>
    <td>Иван</td>
    <td>Иванов</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>Олег</td>
    <td>Бубликов</td> 
    <td>30</td>
  </tr>
</table>

Чтобы задать рамку лучше используйте CSS. Используйте тег <style> в заголовке документа, чтобы задать CSS свойства.

<head>
    <title>Заголовок</title>
    <style>
        table, th, td {
            border: 1px solid black;
	}
    </style>
</head>

Объединение ячеек

Для объединения ячеек используется атрибут colspan.

<table style="width:100%">
  <tr>
    <th>Имя</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Вася Пупкин</td>
    <td>20 20 327</td>
    <td>143 3 143</td>
  </tr>
</table>

Объединение строк

Для объединения строк используется атрибут rowspan.

<table style="width:100%">
  <tr>
    <th>Имя:</th>
    <td>Вася Пупкин</td>
  </tr>
  <tr>
    <th rowspan="2">Телефон:</th>
    <td>20 20 327</td>
  </tr>
  <tr>
    <td>143 3 143</td>
  </tr>
</table>

Заголовки

Для определения заголовка таблицы используется тег <caption>.

<table style="width:100%">
  <caption>Список сотрудников</caption>
  <tr>
    <th>Имя</th>
    <th>Должность</th>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Главный инженер</td>
  </tr>
  <tr>
    <td>Олег</td>
    <td>СЕО-специалист</td>
  </tr>
</table>

Общий результат по примерам выше