Таблицы

Повторяй за мной: «Я не буду использовать таблицы для разметки документа». Можешь написать это красным маркером на потолке своей спальни. И при разработке для настольных браузеров не следует использовать таблицы для разметки. В мобильной разработке это настоящий ад. В некоторых мобильных браузерах таблицы поддерживаются крайне плохо, но даже если поддержка в браузере отличная, размер экрана все равно не подходит для таблиц.

Если ты хочешь или тебе действительно нужно использовать таблицу, то не делай в ней больше пяти столбцов (и желательно чтобы в столбцах были короткие заголовки и значения). Поддержка вложенных таблиц вообще ужасна — нет ни одного хорошего примера дизайна мобильного сайта, где используются вложенные таблицы. Ты вполне можешь реализовать все свои задумки на сайте и без использования вложенных таблиц, при помощи простого CSS и чистой разметки.

В XHTML 1.0 и 1.1 добавлено много тегов для таблиц, но далеко не все поддерживаются мобильными браузерами. Мы можем определить заголовок таблицы (<caption>), заголовок (<thead>), тело(<tbody>), футер (<tfoot>), колонки (<colgroup>, <col>), строки (<tr>), заголовки ячеек (<th>) и ячейки с данными (<td>). Ячейки можно обьеденить при помощи атрибутов rowspan и colspan, а дизайн должен определяться при помощи CSS.

В качестве тренировки, давай эмулируем следующую таблицу в XHTML и посмотрим, как она отображается в разных мобильных браузерах (таблица 6.16).

Код XHTML 1.1:

<table>
	<caption>Sales of the Company in 1998</caption>
	<colgroup align="left" />
	<colgroup span="2" align="right" style="color: blue" />
		<thead>
			<tr>
				<th rowspan="2">City</th>
				<th colspan="2">Sales</th>
				<th rowspan="2"># Clients</th>
			</tr>
			<tr>
				<th>Half 1</th>
				<th>Half 2</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>New York</td>
				<td>445,000</td>
				<td>233,000</td>
				<td>589</td>
			</tr>
			<tr>
				<td>Paris</td>
				<td colspan="2">No operations</td>
				<td>0</td>
				</tr>
			<tr>
				<td>Barcelona</td>
				<td>233,400</td>
				<td>344,000</td>
				<td rowspan="2">422</td>
			</tr>
			<tr>
				<td>Madrid</td>
				<td>133,400</td>
				<td>239,000</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>Total</td>
				<td>811,800</td>
				<td>816,000</td>
				<td>1,011</td>
			</tr>
		</tfoot>
</table>

Простой пример совместимости с браузерами показан в таблице 6.17.

Куда дальше

• следующая — Фреймы
• предыдущая — Формы
• содержание

По теме

• Таблицы в HTML. Как и где использовать.