Верстка таблиц

теги, основные правила размещения и свойства CSS

Теги таблицы

1. ячейка <td> текст </td>
2. ячейка-заголовок <th> текст </th>
3. строка <tr> <th> или <td> </tr>
4. <tbody> tr > td </tbody>
5. пояснение

    <caption>
   	<h4> пояснение для таблицы</h4>
   </caption>

6. таблица <table> все теги таблицы </table>

<table>
  <caption><h2>Пример таблицы</h2></caption>
  <tbody>
    <tr><th>Заголовок строки</th><th>Заголовок строки</th></tr>
	<tr><td>текст ячейки</td><td>текст ячейки</td></tr>	
  </tbody>
</table>

Первичность строк / tr

Ячейка (th / td) всегда должна быть внутри строки tr

Расчет числа ячеек таблицы

• столбцы: td / th число ячеек в каждом столбце одинаково с остальными столбцами таблицы
• строки: tr число ячеек в каждой строке одинаково с остальными строками таблицы

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

colspan атрибут для объединения ячеек в столбцах

<tr>
	<td>1</td><td>2</td><td>3</td>
</tr>

<tr>
	<td colspan="3">123</td>
</tr>

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

rowspan атрибут для объединения ячеек в строках

<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>

<tr><td rowspan="3">111</td><td>2</td><td>3</td></tr>
<tr>                        <td>2</td><td>3</td></tr>
<tr>                        <td>2</td><td>3</td></tr>

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

Задача

Теги группировки строк

• thead необязателен
• tbody обязателен
• tfoot необязателен

<table>
	<caption> описание</caption>
	<thead><tr><th>1</th><th>2</th></tr></thead>
	<tbody><tr><td>1</td><td>2</td></tr></tbody>
	<tfoot><tr><td>1</td><td>2</td></tr></tfoot>
</table>
		

Теги группировки колонок

• colgroup
• col одиночный тег, может содержать атрибуты вместо из размещения в colgroup

<tbody>
	<colgroup span="2" style="background-color: #0f0">
	</colgroup>
</tbody>

CSS: border-collapse

Для таблиц определены две совершенно разные модели border

• separate
  • каждая ячейка таблицы расположена на некотором расстоянии от других ячеек
  • рамки ячеек не сливаются друг с другом
  • нельзя задать border для строк, групп строк, столбцов и групп столбцов

CSS: border-collapse

Для таблиц определены две совершенно разные модели border

• collapse
  • между border вокруг таблицы и ее внешними ячейками никогда не может быть пробела
  • можно задать border для таблицы, ячеек, строк, группам строк, столбцам и группам столбцов
  • при слиянии рамки между ячейками центрируются
  • половина ширины рамки таблицы включена в ширину таблицы
  • две или более рамки сливаются

CSS: border-collapse

Преимущетсво бо'льших значений бордера

Пустые ячейки

Существует возможность скрыть оформление пустой ячейки в модели border-collapse: separate

empty-cells: hide; скрыть

Если все ячейки строки пусты и значение empty-cells для всех равно hide, то вся строка интерпретируется так, как будто для элемента строки задано display: none.

Пустые ячейки

Существует возможность показать оформление пустой ячейки в модели border-collapse: separate

empty-cells: show; показать

Размеры ячеек

• height для всех ячеек одной строки / row будет одинаковой
• height одной строки / row может отличаться от высоты другой
• width для всех ячеек одного столбца будет одинаковой
• width для различных столбцов может отличаться

Фиксированная и автоматическая ширина ячеек

table-layout:

• fixed
  • любая ячейка с заданной шириной отличной от auto определит ширину столбца
  • если таблица оказывается шире суммарной ширины всех ее столбцов, разница делится на число столбцов и добавляется к каждому из них
• auto пытается вместить ширину ячеек в заданную ширину таблицы

Выравнивание внутри ячейки

• width используем text-align
• height используем vertical-align

text-align:

center center center

left left left

right right right

justify justify justify

vertical-align:

top

bottom

middle

baseline

Спасибо за внимание!