Веб-Блог.рф: для тех, кто живет в Интернете

Часто при разработке CMS требуется вывести таблицу с какими-то элементами, которые можно выбирать и редактировать (например, список страниц сайта или список вопросов в FAQ). Казалось бы, что проще: достаточно использовать всего три тега — table, tr, td и все. Однако если список будет длинный, да еще названия элементов могут быть длинными и растягиваться на несколько строчек, то пользоваться такой таблицей будет не очень удобно. Можно дать несколько советов, как сделать такую таблицу более удобной.

...

1. Продумывайте и задавайте ширину столбцов (и самой таблице не забыть задать width: 100% конечно же) с учетом того, что в них будет находиться. Делается это с помощью тегов <col style="width: значение" /> сразу после <table>. Значение желательно задавать в процентах.
2. Четко выделите заголовок, например, другим цветом и жирным шрифтом. Для этого поместить заголовочную строку в <thead>. Остальную часть таблицы поместите в тег <tbody>. Использование этих тегов позволит управлять заголовком и телом таблицы через CSS независимо друг от друга (с помощью правил вида #table_id thead { } и #table_id tbody { }).
3. Делайте правильное выравнивание. В большинстве случаев предпочтительным является выравнивание по центру, однако длинные строки (например, название элемента) лучше выравнивать по левому краю. Если в столбцах есть денежные суммы, их следует выравнивать по правому краю. Лучше всего делать так: для строки (#table_id tr) задавать выравнивание по центру, а потом для отдельных столбцов -- выравнивание в нужную сторону.
4. Сделайте таблицу полосатой, а так же предусмотрите достаточный отступ по вертикали для каждой ячейки. Это позволит лучше видеть границы каждого элемента и быстрее находить нужный. Делается это с помощью псевдокласса :nth-child (примечание: он появился только в CSS3, старые броузеры его не поддерживают, но если необходимо, это можно исправить с помощью  jQuery), например так: #table_id tr:nth-child(odd) { background: ... }; #table_id tr:nth-child(even) { background:  }.
5. Так же хорошей идеей будет выделить строку, над которой находится указатель мыши с помощью конструкции вида #table_id tr:hover {background: ... }.
6. Если пункты перечня хранятся в базе данных и имеют идентификаторы,  лучше сразу предусмотреть их вывод, даже если кажется, что особой необходимости в этом нет. Практика показывает, что рано или поздно возникают ситуации, когда возникает необходимость их узнать (или, что еще хуже, объяснять, как их найти, непродвинутому пользователю).
7. Если имеются какие-либо кнопки для действий над всей таблицей, а не отдельным элементом (например, добавление нового элемента, удаление/перенос/деактивация выбранных), то лучше их продублировать и снизу и сверху. То же самое касается и ссылок для перехода по страницам, если предусмотрено постраничное разбиение.
8. Если используется обрезание длинных строк с помощью CSS (свойство overflow:hidden в сочетании с жестко заданной высотой), можно сделать красивый эффект с плавным исчезновением строки, поместив в правую часть ячейки фоновый PNG, цвет которого совпадает с цветом фона таблицы, а прозрачность постепенно уменьшается вправо.

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