Лучше использовать div или таблицы для столбцов ссылок?

У меня есть страница с 3 столбцами ссылок внизу. Каждый столбец помещается в div, а все три div заворачиваются в большой div по центру страницы. Это что-то, что лучше подходит для стола, или стол не подходит для работы?


javascript html css css-tables
person Michael Swarts    schedule 10.07.2009    source источник

Ответы (6)


arrow_upward
11
arrow_downward

Вы также можете использовать <ul> и <li> для этого.

#horizontal {
    width: 100%;
    background: #eee;
    float: left;
}

#horizontal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 12em;
    float: left;
}

Это создаст горизонтальные столбцы с использованием элементов li, а затем вы сможете заполнить HTML для создания отдельных ссылок в каждом li.

person Kirtan    schedule 10.07.2009
comment
+1 за семантику. То, что описывает OP, представляет собой список ссылок. Это должен быть элемент list. :-) - person Ben Blank; 10.07.2009
comment
Если у каждого списка есть собственный заголовок, вместо него можно использовать <dl> с <dt> и заголовком и <dd> для каждой ссылки. - person DisgruntledGoat; 10.07.2009

arrow_upward
2
arrow_downward

Эмпирическое правило:

Используйте Divs для макета, таблицы для табличных данных.

На заметку, проверьте этимологию термина «Правило большого пальца», довольно забавно.

person Jack Marchetti    schedule 10.07.2009
comment
Я постоянно сталкиваюсь со следующей проблемой: я следую эмпирическому правилу, поэтому использую DIV. Затем в какой-то момент я получаю несколько мешающих стилей, что заставляет меня попробовать TABLE... и это просто работает. - person Jeff Meatball Yang; 10.07.2009
comment
Всякий раз, когда дело доходит до стиля, должен быть какой-то способ/хак для достижения. И если это действительно не работает, я бы попробовал JS, чтобы помочь в стилизации. Несмотря ни на что, я не буду менять ПРАВИЛЬНОЕ форматирование на чистое решение для отображения. - person xandy; 10.07.2009
comment
Эмпирическое правило НЕ связано с избиением жены, если вы это имели в виду :p - person DisgruntledGoat; 10.07.2009

arrow_upward
0
arrow_downward

вопрос, который вы хотите задать себе, заключается в том, являются ли ваши ссылки частью каких-либо табличных данных?

если да, столы на ваш выбор. Если нет, то вы должны использовать div.

Важно использовать семантически правильный элемент для создания страницы, хотя другие элементы могут привести к такому же эффекту, возможно, с меньшими усилиями.

Что касается ваших ссылок, кажется, они не являются частью таблицы. Я бы предложил использовать div и правильный css.

младший

person jrharshath    schedule 10.07.2009

arrow_upward
0
arrow_downward

Я не думаю, что таблицы - хороший выбор для этого. Просто наличие трех столбцов не является табличными данными в моей книге. Имея чистую разметку и хорошую таблицу стилей, вы можете сделать это гораздо более гибким способом. Если вы используете плавающие элементы div слева, просто задайте им ширину в процентах, чтобы они заполнили родительский контейнер (100/количество элементов)%. Таким образом, если вы хотите добавить еще один столбец, это простое изменение разметки с одним изменением таблицы стилей. Таким образом, вам не придется иметь дело с шаткостью таблицы браузера и вы получите гораздо больше гибкости в ее дизайне - вдобавок ко всему, вы можете полностью изменить макет, не выходя из таблицы стилей.

person Community    schedule 10.07.2009
comment
Я бы посоветовал вам изменить процентный расчет на что-то вроде (floor(100/number-of-elements))% только для того, чтобы учесть проблемы браузера с процентным отношением ширины к пикселям. Я не могу вспомнить, было ли это особенно хуже в том или ином браузере, но иногда это может вызывать проблемы, если ширина равна ровно 100%, особенно если также добавляются границы. - person David says reinstate Monica; 10.07.2009

arrow_upward
0
arrow_downward

Основной принцип HTML заключается в том, чтобы «разметить» СМЫСЛ ваших данных.

Я буду использовать приведенный выше принцип в качестве руководства:

  1. Если у вас есть 3 столбца только потому, что это выглядит красиво, то ваши столбцы не имеют смысла, и вам следует попытаться использовать DIV (которые являются бессмысленными элементами «контейнера»).

  2. Если у вас есть 3 столбца, потому что есть 3 категории ссылок, то ТАБЛИЦА подойдет. Представьте, если бы вы дали заголовки каждому списку ссылок - это делает ТАБЛИЦУ с ЗАГОЛОВКОМ необходимой.

  3. И на самом деле каждый столбец представляет собой «неупорядоченный список», который транслируется в элемент UL с элементами LI.

  4. А так как у вас есть список ссылок, вы будете использовать, конечно же, элементы А.

Итак, из первых принципов у вас должна быть такая структура:

<DIV> or <TABLE> (with <TR>/<TD>)
 -> <UL>
 ----> <LI>
 -------- <A>
person Jeff Meatball Yang    schedule 10.07.2009

arrow_upward
0
arrow_downward

В отличие от других ответов, таблица может быть семантическим решением. Если три раздела отличаются друг от друга и имеют заголовок, вы можете использовать <th> для заголовков и <td> для каждой из ссылок. Я думаю, что это совершенно семантически.

person DisgruntledGoat    schedule 10.07.2009