Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Может ли в моем случае ul заменить table?

Автор: Dima85 29.12.2009, 14:35

Типичная задача.
Необходимо вывести такой текст:

файл1 размер дата
файл2 размер дата
файл3 размер дата
***

Проблема заключается в том что название файлов, размеры, дата у каждого файла разные в итоге width в каждой строчке разный. В моем же случае необходимо все сделать пропорционально. Этого можно добиться используя table.
Возможно то же сделать но с использованием ul li, помогите пожалуйста как правильно реализовать это.

Автор: bars80080 29.12.2009, 16:08

это можно сделать симитировав строки и ячейки. что-то вроде

Код


<li><span>file</span><span>size</span><span>date</span></li>
<li><span>file</span><span>size</span><span>date</span></li>
<li><span>file</span><span>size</span><span>date</span></li>

Код


li span { display: inline-block; width: 200px; }
* html li span { display: block; }

причём возможно даже так не обойдётся, тогда поможет

Код


li span { display: block; float: left; }

но и это чревато

однако, если посмотреть не затуманенным взором на это, то станет ясно, что это и есть таблица. только почему-то мы стараемся сделать её через одно место

хотелось бы узнать, зачем там, где нужна таблица, не хочется её использовать

Автор: Dima85 29.12.2009, 16:21

Просто хотелось то же попробовать сделать посредствам ul li.
Вобщем ты прав, в моем случае лучше использовать таблицы.
Спасибо.

Автор: Mavrun 29.12.2009, 16:21

li span { display: block; float: left; }
и не забыть при этом width указать=)

По идее можно попробовать конструкцию

Код


<ul>
<li>file</li>
<li>size</li>
<li>date</li>
</ul>
<ul>
<li>file1</li>
<li>size1</li>
<li>date1</li>
</ul>

Код


ul {
display: table-row;
}
li {
display: table-cell;
width: 200px;
}

Тут мы представляем ul в виде строки таблицы, а li - в виде ячеек.
Но, код может не будет работать в ишаках 6 и 7, надо проверить.
Советую на хтмлбуке прочитать про css-свойство display.