VPF::Как лучше создать вот такую таблицу:

Muerto

Дата 14.7.2011, 12:56 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: нет
Всего: 4

Дело в том что ширина таблички динамическая...

я бы мог три столбика и в ручную прописать... но гемор...

А если как бы верхний слой отдельная таблица, и нижняя отдельно - криво смотриться (ну может с margin padding spacing надо было ещё поиграть...)

Как посоветуйте такое сделать?

--------------------

Guedda

Дата 14.7.2011, 13:04 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Про аттрибут colspan слышали?

--------------------

Ll 2

Muerto

Дата 14.7.2011, 14:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: нет
Всего: 4

Да, но я таблицы создавать умею не в этом дело... вот со стилем как то хромаю...
как вы видите если всё это одна таблица, то слева как бы не должно быть границ... плюс вокруг должно быть 2 пикселя рамка, а внутри 1

--------------------

Guedda

Дата 14.7.2011, 14:52 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

В общем, как-то так пока мне видится решение:

Код


<html>
<head>
<title></title>
<style type="text/css">
table td {
    min-width: 100px;
    height: 20px;
}

table td.header {
    border-left: 2px #000 solid;
    border-top: 2px #000 solid;
    border-right: 2px #000 solid;
    background-color: #cfcfcf;
    text-align: right;
}

.top td {
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
}

.bleft {
    border-left: 2px #000 solid;
}

.bright {
    border-right: 2px #000 solid !important;
}

.btop {
    border-top: 2px #000 solid;
}

.bbottom {
    border-bottom: 2px #000 solid !important;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
    <td colspan="2"></td>
    <td colspan="2" class="header">Иерогрифы</td>
</tr>
<tr class="top">
    <td class="bleft btop"></td>
    <td class="btop"></td>
    <td class="btop"></td>
    <td class="btop bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft bbottom"></td>
    <td class="bbottom"></td>
    <td class="bbottom"></td>
    <td class="bright bbottom"></td>
</tr>
</table>
</body>
</html>

--------------------

Ll 2

SelenIT

Дата 14.7.2011, 20:27 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Если абстрагироваться от неидеальностей в IE7 и ниже, можно как-то так.

Упс, недосмотрел, что серые палки снаружи тоже нужны... Тогда для хороших браузеров можно так (правда, тут уже и IE8 начинает выпендриваться), а если нужна "железная" кроссбраузерность — видимо, да, только явным проставлением классов ячейкам...

Это сообщение отредактировал(а) SelenIT - 14.7.2011, 20:59

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Muerto

Дата 14.7.2011, 22:33 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: нет
Всего: 4

Guedda, SelenIT, Большое спасибо, я изначально лепил как Guedda, но больно геморно , а второй каротенький то что надо...
Чет не подумал про thead+th , гениально и просто smile

Это сообщение отредактировал(а) Muerto - 14.7.2011, 22:34

--------------------

olldman

Дата 15.7.2011, 04:09 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

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

Про элемент таблицы <caption> вспомните.

SelenIT

Дата 15.7.2011, 08:47 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(olldman @ 15.7.2011, 04:09

)

элемент таблицы <caption>

olldman, а кроссбраузерного примера его стилизации не подкинете?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

olldman

Дата 15.7.2011, 10:31 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

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

Цитата(SelenIT @ 15.7.2011, 11:47)

Цитата(olldman @ 15.7.2011, 04:09

)

элемент таблицы <caption>

olldman, а кроссбраузерного примера его стилизации не подкинете?

Почему бы и нет: _http://realtsib.ru/oldman/table_width_caption.html

Guedda

Дата 15.7.2011, 10:34 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Цитата(olldman @ 15.7.2011, 11:31

)

Почему бы и нет: _http://realtsib.ru/oldman/table_width_caption.html

Ситуация то в том, что человеку надо, чтобы края заголовка были пристыкованы к изменяющимся по ширине последним двум колонкам ;) А у Вас получается статическая ширина. Поэтому caption тут не подойдет.

--------------------

Ll 2

Muerto

Дата 15.7.2011, 10:52 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: нет
Всего: 4

Походу пора мне подучить html + css, отстал я smile

Это сообщение отредактировал(а) Muerto - 15.7.2011, 10:52

--------------------

Guedda

Дата 15.7.2011, 10:53 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Цитата(Muerto @ 15.7.2011, 11:52

)

Походу пора мне подучить html + css, отстал я

Тогда сразу начинай с html5 ) а то html4.01 уже уходит в прошлое ;)

--------------------

Ll 2

olldman

Дата 15.7.2011, 10:58 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

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

Цитата

Ситуация то в том, что человеку надо, чтобы края заголовка были пристыкованы к изменяющимся по ширине последним двум колонкам

- упс, ну тогда простите, правда таких условий в посте ТС я не увидел...

p.s. ну а ширину можно проставить процентами, не проблема.

Это сообщение отредактировал(а) olldman - 15.7.2011, 10:59

SelenIT

Дата 15.7.2011, 12:53 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

olldman, спасибо за пример, но... что в нем делает несемантичный span? ;)

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

olldman

Дата 15.7.2011, 13:05 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

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

Элемент <span> предназначен для определения встроенных элементов документа и служит в основном для выделения части информации внутри других структурных элементов, так что применять к нему определение "семантичность" я бы не стал. Ну а разобрав код примера, думаю, вы поймете как и какой участок иформации он выделяет. smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »