Использование таблицы, когда я не должен - PullRequest
0 голосов
/ 02 августа 2010

Я пытался создать значок только для CSS с большим количеством деталей.Содержимое было примерно таким:

**General Details:** 
ID no(6digit number)
Date of Joining
Group
Sub Group

**Personal Details**
Name
Date of Birth
Gender
**Referrer Details**
Name of Referrer
URI
and so on

Я пытался использовать

  • и затем стилизовать его, затем я попытался сделать то же самое с div и span, однако я не мог получить согласованный вид.Наконец я должен был пойти за стол.Теперь, по крайней мере, данные отображаются равномерно, но я раздражен, потому что я использую таблицы для не табличных данных.Есть ли простой способ разработки структурированных макетов с помощью CSS?

Ответы [ 3 ]

2 голосов
/ 11 августа 2010

Есть ли простой способ дизайна структурированные макеты с помощью css?

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

Если вам не требуется поддержка IE 6 и 7, вам может потребоваться использование CSS display правил (со значениями table-cell, table-row и table) , Это даст вам много табличного поведения без разметки.

Но стоит отметить, что использование табличной разметки для не табличной разметки на самом деле не пересекает потоки или что-то еще. Большая часть излишней утраты семантики слишком преувеличена. Lynx может использовать эвристику для разграничения между макетами и семантическими таблицами по крайней мере с 1999 года. Некоторые программы чтения с экрана также делают это. Что действительно имеет смысл - если бы мы ждали, пока разойдутся макеты таблиц, прежде чем у нас появятся пользовательские агенты, которые смогут с ними работать, мы просто начнем. Вам не нужно чувствовать себя виноватым, если вы используете его, вы не сдерживаете семантическую сеть и не пинаете слепых людей в лицо. CSS-позиционирование - это инструмент, и часто он хороший, но если он не соответствует вашим целям и имеющимся у вас навыкам / ресурсам, не стесняйтесь использовать разметку таблицы.

Если вы используете разметку таблицы, я рекомендую поставить на нее class="layout". Он дает ручку для размещения некоторых стилей таблиц в вашей таблице стилей, сигнализирует другим разработчикам о том, что вы делаете, и может даже упростить пользовательским агентам различие между семантикой и компоновкой. Кроме того, не вкладывайте таблицы. Вы можете почти всегда избегать этого, если действительно стараетесь, и, хотя есть возможность иметь чистую, легко читаемую и редактируемую разметку с таблицами, вероятность того, что вы получите что-то злое, резко возрастет, если вы будете вкладывать.

1 голос
/ 11 августа 2010

Вы можете абсолютно точно позиционировать каждый элемент в нужном месте:

li.general {
position:absolute;
top: 10px;
left: 20px;
}
...
0 голосов
/ 11 августа 2010

Я думаю, что эти данные достаточно табличные, чтобы их можно было поместить в таблицу, на что будут жаловаться только претенциозные разработчики, конечные пользователи никогда не узнают разницу.В любом случае, создание макета CSS не займет более 47 минут.http://giveupandusetables.com/

...