Главная/ Учимся Javascript, CSS, HTML/ Бонус книги/ Programming The Mobile Web/ Coding Markup/ Таблицы. Разработка для мобильного Веб. Maximiliano Firtman

Таблицы

Подготовили: Анна Лысак и Татьяна Головко

Дата публикации: 17.06.2011

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

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

Табл. 6.17. Таблица поддержки таблиц
Браузер/ Платформа Поддержка таблиц
Safari Полная
браузер Android Полная
Symbian/S60 Полная
Nokia Series 40 Полная
webOS Полная
BlackBerry Полная с версии 3.7
Нет поддержки таблиц до версии 3.7
NetFront Полная
Openwave (Myriad) Полная с версии 6.x
Internet Explorer Полная
Motorola Internet Browser Полная
Opera Mobile Полная
Opera Mini Полная

Куда дальше

По теме

Показать комментарии