Элемент col в html 5

Отображение элемента col HTML 5 в браузерах

Правильное отображение (chrome)	Отображение в вашем браузере

Описание элемента col в HTML5

Элемент col применяется для назначения характеристик одной или нескольких колонок таблицы. Элемент col может быть использован только в table или colgroup элементах.

Отличие элемента col HTML4.1 от HTML5

Элемент col лишен поддержки почти всех атрибутов, таких как: align, char, charoff, valign, width, сохранив актуальность лишь атрибута span.

Атрибуты элемента col в HTML5

Атрибут	Описание
align	Атрибут align для элемента col не используется. В замен используйте стиль CSS text-align.
char	Атрибут char для элемента col не используется. Рекомендуется использовать стиль CSS text-align.
charoff	Атрибут charoff для элемента col не используется. Рекомендуется использовать стиль CSS text-align.
span	Единственным атрибутом является span. Который определяет количество колонок к которым будут применены назначеные характеристики. Отсчет ведется слева на право. Если атрибут span не указан, то характеристики применяются к одной колонке, по порядку с крайней левой. Пример кода: <table border="1"> <col style="background-color:#0099ff"> <col> <col span="2" style="background-color:#ff3300"> <tr><td>2</td><td>+</td><td>2</td><td>=</td><td>?</td></tr> </table> Правильное отображение (chrome) Отображение в вашем браузере
width	Атрибут width для элемента col не используется. Рекомендуется использовать стиль CSS width.

Примеры использования элемента col в HTML5

Пример определения элемента col

<table border="1">
	<col span="3" style="background-color:#0099ff">
	<col span="2" style="background-color:#ff3300">
	<tr><td>си</td><td>ня</td><td>я</td><td>крас</td><td>ная</td></tr>
</table>

Результат отображения элемента col (chrome)	Результат отображения элемента col в вашем браузере

Идеи оригинального использования элемента col в HTML5

Выделение дней календаря.

<table border="1">
	<caption>
		<h2>Январь</h2>
	</caption>
	<col span="5" style="background-color:#0099ff">
	<col span="2" style="background-color:#ff3300">
	<thead>
		<tr>
			<th>Пн</th><th>Вт</th><th>Ср</th><th>Чт</th><th>Пт</th><th>Сб</th><th>Вс</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td>Сб</td><td>Вс</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td></td><td></td><td></td><td></td><td></td><td>1</td><td>2</td>
		</tr>
		<tr>
			<td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
		</tr>
		<tr>
			<td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
		</tr>
		<tr>
			<td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td>
		</tr>
		<tr>
			<td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
		</tr>
		<tr>
			<td>31</td><td></td><td></td><td></td><td></td><td></td><td></td>
		</tr>
	</tbody>
</table>