Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Теги для отображения таблиц и XHTML 1.0 Strict, записки задр*та 
:(
    Опции темы
mcTep
Дата 6.11.2009, 23:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6



Доброго времени суток!

Недавно решил выводить таблицы по всем правилам, используя теги <thead/>, <tbody/>, <tfoot/>, <caption/>, <colgroup/>, <col/>.
После недолгих мучений вывел следующий код:

Код

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
   <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type"/> 
        <title>Hello</title>
        <style type="text/css">
body, html    
{    margin: 0px; padding: 0px; width: 100%; height: 100%;                        }
table                    
{    background: #ddd;                                                            }
colgroup.wide-columns col    
{    width: 200px; background: #ccc; text-align: right;                            }
tfoot        
{    text-align: right; font-weight: bold;                                        }
.align-center
{    text-align: center;                                                            }
.align-right
{    text-align: right;                                                            }
caption
{    text-align: left;                                                            }
th
{    text-align: right;                                                            }
        </style>
     </head>
     <body>
        <table>
            <caption>Заголовок таблицы</caption>
            <colgroup/>
            <colgroup class="wide-columns">
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th>Столбец 0</th>
                    <th>Столбец 1</th>
                    <th>Столбец 2</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>Итого: </td>
                    <td colspan="2" class="align-center">Нижняя часть таблицы</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Ячейка 00</td>
                    <td>Ячейка 01</td>
                    <td>Ячейка 02</td>
                </tr>
                <tr>
                    <td>Ячейка 10</td>
                    <td>Ячейка 11</td>
                    <td>Ячейка 12</td>
                </tr>
                <tr>
                    <td>Ячейка 20</td>
                    <td>Ячейка 21</td>
                    <td>Ячейка 22</td>
                </tr>
            </tbody>
        </table>        
    </body>
</html>



И встретил некоторые проблемы:

- CSS свойство "text-align: right;" для класса элементов "colgroup.wide-columns col" никак не хочет выравнивать содержимое ячейки по нужную сторону, причем в IE6 и IE7 выравнивание происходит. 
- Тег <caption/> при указании ему значения атрибута align="bottom" заставляет браузер отображать содержимое заголовка таблицы внизу, но в стандарте XHTML 1.0 Strict использование данного атрибута запрещено. CSS-аналог в данном случае не дает нужного результата.
- При отображении таблицы в Google Chrome и Safari между заголовком таблицы <thead/> и ее нижней части <tfoot/> наблюдается небольшой отступ от содержимого таблицы. В FF, IE, Oepra такого отступа нет. Это можно решить при помощи определения свойств "table { border-collapse: collapse; }" и "td, th { border: 2px solid #ddd; }". 

Может кто-нибудь также заморачивался на эту тему и нашел решения приведенных проблем, а может и увидел другие. 
Не думаю целесообразным обсуждать вопросы типа: «Зачем эти теги нужны? И без них все нормально отображается.» или «Нефих дро*чить на валидатор, главное, чтобы в отображалось везде одинаково.»

Я нашел использование тегов <colgroup/> и <col/> очень удобным, т.к. не надо определять стили для каждой ячейки, если к примеру нужно сделать чередование цветов колонок для таблицы. Такая таблица по моему мнению хорошо смотрится.
А на счет валидатора это уже избитая на мой взгляд тема. Валидировал, валидирую и буду валидировать  smile 

P.S. В принципе этот топик можно рассматривать, как обзор данных тегов.

PM MAIL   Вверх
youri
Дата 7.11.2009, 08:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16



Цитата(mcTep @  6.11.2009,  23:37 Найти цитируемый пост)
Я нашел использование тегов <colgroup/> и <col/> очень удобным

вот это причина для использования <colgroup/> и <col/>. Для остальных я так понимаю причин нету
p.s. извини, не сдержалсо smile
PM   Вверх
mcTep
Дата 8.11.2009, 10:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6



Ну а для остальных: код выглядит более читабельно. Содержание отделено от заголовка и от позиции «Итого:» =)
PM MAIL   Вверх
youri
Дата 8.11.2009, 14:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16



читабельно сильно зависит от того, кто как привык. Ты явно в меньшинстве с tbody, thead... Но давай не продолжать, ты же сам не хотел это обсуждать (;
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0621 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.