Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML.
Вверху: язык разметки - заголовок
Оригинальный источник
Стандартизированные дизайнерские решения - руководствопо разметке
и стилю Часть 1: Начните с разметкой с разметкой Глава 2 Злой стол?Вы знаете? Я не знаю, когда это началось, используя таблицы, превращенные в греховный акт? Действительно, самый большой миф о написании веб -страниц, основанных на веб -стандартах, состоит в том, чтобы больше прекратить использование таблиц, никогда! Это звучит как чума, ее следует избегать, и ее нужно запечатать и бросить в пыльный шкаф, и это рассматривается как антикварное, передаваемое с первых дней эпохи разработки Интернета.
Откуда происходит такое отвращение? Возможно, это было очень просто в начале, по крайней мере, с веской причиной. Многие люди будут уверены в содействии преимуществам отказа от традиционного макета в гнездовании столовых и пустых изображений GIF, а также использование гибкой структурированной компоновки CSS. Мы можем начать удалять все таблицы отстраненным образом, и даже упорно настаивать на том, чтобы изгнать все таблицы - независимо от случая.
Позже в книге мы увидим метод макета CSS и все преимущества этого. Но теперь давайте посмотрим, как использовать таблицы в правильной ситуации, то есть при маркировке списков данных. Мы рассмотрим несколько простых способов сделать наши списки данных проще в использовании и красивее.
Это полностью формаПри метке данных списка нет абсолютно никаких причин не использовать теги таблицы. Но подождите, что такое данные списка? Вот несколько примеров: маршрут календарной таблицы времени времени
Для этих примеров и многих других случаев очень сложные и строгие эффекты CSS должны использоваться, чтобы данные выглядели как таблица. Возможно, вы можете себе представить, что использование умных CSS -поплавок для поиска всех проектов приведет к несовместимым и противоречивым результатам, не говоря уже о том, что после удаления CSS точно чтение каждого данных, вероятно, станет невозможной задачей. На самом деле, нам не нужно бояться таблиц - мы должны использовать их с их первоначальными целями дизайна.
Формы для всехОдна из причин, по которой таблицы подвергаются критике, заключается в том, что если вы не используются тщательно, будут дефекты удобства использования. Например: программы для чтения экрана трудно правильно считывать контент, в то время как небольшие экранные устройства часто нарушаются таблицами, используемыми для макета, но у нас есть несколько простых способов увеличения удобства использования таблиц данных списка. В то же время мы устанавливаем гибкую структуру для облегчения обстановки стилей с CSS в будущем.
Давайте посмотрим на простой пример на рисунке 3-1, который является рекордом лиги Американской бейсбольной лиги:
Рисунок 3-1: Типичный пример представления данных
Возможно, это очень удручающие статистические данные для вентиляторов Red Sox, но рисунок 3-1 является прекрасным примером данных списка. Он имеет три заголовка таблицы (год, противник, сезонный рекорд (WL)), за которыми следуют четырехлетние данные. На таблице есть заголовок таблицы, который объясняет содержание таблицы.
Способ отметить эту таблицу данных очень интуитивно понятно, и мы можем сделать это с таком кодом, как это:
<p align = center> Чемпионат Boston Red Sox World Series </p>
<Таблица>
<tr>
<td align = center> <b> Год </b> </td>
<td align = center> <b> противник </b> </td>
<td align = center> <b> Сезонный рекорд (wl) </b> </td>
</tr>
<tr>
<Td> 1918 </td>
<Td> Чикаго Cubs </td>
<TD> 75-51 </td>
</tr>
<tr>
<Td> 1916 </td>
<Td> Бруклин Робинс </td>
<TD> 91-63 </TD>
</tr>
<tr>
<TD> 1915 </td>
<Td> Филадельфия Филлис </td>
<TD> 101-50 </TD>
</tr>
<tr>
<Td> 1912 </td>
<Td> Нью -Йорк Гиганты </td>
<TD> 105-47 </td>
</tr>
</table>
Результаты, показанные таким образом, должны быть очень похожи на рисунок 3-1, но мы можем добавить некоторые улучшения к этой основе.
Во -первых, мы можем использовать более семантический тег <poot> для хранения чемпионатов Boston Red Sox World Series. Тег <poot> необходимо следовать сразу после начального тега <table>, который обычно используется для хранения заголовка таблицы или описания информации о таблице.
Похоже, что пользователям облегчает видеть тему таблицы, а также может помочь людям, которые знают содержание Интернета другими способами.
Давайте удалим начальный абзац и добавим правильный <Подпись>:
<Таблица>
<poot> Чемпионат Boston Red Sox World Series </caption>
<tr>
<td align = center> <b> Год </b> </td>
<td align = center> <b> противник </b> </td>
<td align = center> <b> Сезонный рекорд (wl) </b> </td>
</tr>
<tr>
<Td> 1918 </td>
<Td> Чикаго Cubs </td>
<TD> 75-51 </td>
</tr>
<tr>
<Td> 1916 </td>
<Td> Бруклин Робинс </td>
<TD> 91-63 </TD>
</tr>
<tr>
<TD> 1915 </td>
<Td> Филадельфия Филлис </td>
<TD> 101-50 </TD>
</tr>
<tr>
<Td> 1912 </td>
<Td> Нью -Йорк Гиганты </td>
<TD> 105-47 </td>
</tr>
</table>
Важно отметить, что название должно быстро передать предмет следующей информации. Согласно настройкам по умолчанию, большинство визуальных браузеров центрируют текст в теге <poot> в верхней части таблицы. Конечно, мы можем использовать CSS для изменения стиля настройки по умолчанию позже - этот вопрос будет обсуждаться в расширении советов этой главы. Фактически, заголовок теперь находится в уникальном теге, что делает нашу последующую модификацию проще и просты.
Предыдущая Page1 2 3 4 5 6 7 8 Следующая страница Прочтите полный текст